Contrast Checker
Check the contrast ratio between two colors and see if it passes WCAG.
Steps to check color contrast with the contrast checker
- Set your text color in the foreground field, by HEX or with the picker.
- Set the background color behind that text.
- Read the contrast ratio at the top, shown as a number from 1:1 to 21:1.
- Check the AA and AAA badges for normal and large text.
- If a badge fails, nudge the text darker or the background lighter and watch the ratio climb until it passes.
Contrast ratios you need for WCAG AA and AAA
The contrast checker scores every pair against the two WCAG levels. AA is the legal baseline most sites target; AAA is the stricter goal for content that has to be readable by everyone.
Common color contrast failures and how to fix them
Contrast is the single most common accessibility failure on the web, found on roughly 8 in 10 homepages. Almost all of these are a few hex values away from passing. These pairs fail AA on a white background and show the smallest fix that clears 4.5:1.
What gray text color passes WCAG contrast
Most failures are pale gray body or helper text. The fix rarely touches your layout or brand; it is a single value change that most users will not even notice.
- For normal text on white, stay darker than #767676, which is the exact point that hits 4.5:1.
- Light gray like #999 reads as "subtle" to designers but falls to 2.85:1 and fails.
- #767676 passes at 4.54:1, yet one shade lighter, #787878, drops to 4.38:1 and fails. Eyeballing is not safe; the checker is.
- Footer and disabled-state text get no WCAG exemption. If it is readable content, it must meet the ratio.
How to calculate a contrast ratio
The number is not a simple color difference. WCAG converts each color to its relative luminance, a brightness value that weights green more than red and red more than blue to match how the eye works, then compares the two with the formula (L1 + 0.05) / (L2 + 0.05). That is why a bright yellow on white can still fail while a mid-gray passes.
Contrast checker vs guessing by eye
Why darkening text beats changing your brand
The usual pushback is that accessible colors look ugly. That myth comes from picking the wrong fix, like swapping a whole background. Hold the brand background and darken the text instead; moving a gray from #999 to #767676 keeps the design intact and clears AA. Save palette work for the Palette Generator and grab exact codes from the HEX Color Picker.
For a clean pass or fail readout against the standard, use the WCAG Checker. To confirm a passing pair also works for colorblind users, try the Color Blindness Simulator.
At least 4.5:1 for WCAG AA, the most common legal requirement. Large text can pass at 3:1.
Anything at or above 4.5:1 is safe for normal text. Dark text like #1e293b on white clears AAA at 7:1 automatically.
Bigger, heavier letters are easier to read, so WCAG allows 3:1 for text 18pt and up, or 14pt bold.
Logos and incidental text are exempt. Disabled controls are too, but any readable text, including footers, must meet the ratio.
No. It is essential but only one part. You still need alt text, keyboard support and meaning that does not rely on color alone.