Is a color that looks bright enough automatically accessible?
No. Perceived brightness is not the same as the WCAG contrast calculation. Two colors that appear distinct may still fail the required ratio.
How to Use WCAG Contrast Checker
Step 1: Foreground Color
Enter text color HEX or pick with the color tool.
Step 2: Background Color
Enter background container color.
Step 3: Review Compliance
View exact contrast ratio (e.g. 4.82:1) and pass/fail badges for AA and AAA.
Key Features & Capabilities
- Evaluates WCAG 2.1 AA (4.5:1) and AAA (7:1) thresholds
- Checks Normal Text, Large Bold Text, and Graphical UI Components (3:1)
- Live interactive preview card with simulated typography
Frequently Asked Questions
What contrast ratio should normal text meet?
For WCAG 2.1 Level AA, normal text generally needs at least 4.5:1. Large text generally needs at least 3:1.
Does passing the text contrast check make a button accessible?
Not by itself. Buttons and controls can have additional requirements for non-text contrast, focus indicators, states, and meaningful labels.
Why can the same colors look different on two screens?
Display brightness, contrast settings, color profiles, ambient light, and the user's device can change perception. A measurable contrast ratio gives you a more consistent baseline than visual judgment alone.
Related Tools
- Interactive Color Picker & Inspector — Visual color picker with palette swatches, eyedropper, and multi-format conversions.
- Harmonious Color Palette Generator — Generate complementary, analogous, triadic, tetradic, and monochromatic color palettes.