Color contrast checker (WCAG 2.2)
WCAG 2.2 asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text at level AA, and 7:1 and 4.5:1 at AAA. Enter a text and a background color to get their ratio, the levels they pass, and the nearest text shade that would pass if they don't.
Contrast ratio
4.54:1
#767676 on #FFFFFF
Large text at 24 px
Normal body text at 16 px, the size most paragraphs use.
Button border- Pass · AA · normal textSC 1.4.3, at least 4.5:1
- Pass · AA · large textSC 1.4.3, at least 3:1 (24 px, or 18.5 px bold)
- Fail · AAA · normal textSC 1.4.6, at least 7:1
- Pass · AAA · large textSC 1.4.6, at least 4.5:1
- Pass · AA · icons and UI bordersSC 1.4.11, at least 3:1 against adjacent colors
- Nearest text color for 7:1
- #5959597.00:1 on #FFFFFF
- This passes AA by a whisker. Anti-aliasing, thin fonts and screen glare make text near 4.5:1 harder to read than the number suggests.
How is the contrast ratio calculated?
WCAG compares how bright two colors look using their relative luminance: each sRGB channel is linearised (values at or below 0.04045 are divided by 12.92, the rest raised to the power 2.4), then weighted 0.2126 for red, 0.7152 for green and 0.0722 for blue, because the eye is most sensitive to green.
The ratio is the lighter luminance plus 0.05 divided by the darker plus 0.05, so it runs from 1:1 (identical colors) to 21:1 (black on white). The 0.05 stands in for the glare a real screen adds.
Results are never rounded before they are compared: 4.499:1 fails a 4.5:1 requirement. That is why this checker cuts the displayed ratio to two decimals instead of rounding it up. When a pair fails, it walks the text color's lightness, keeping the hue, to the nearest shade that passes.
L = 0.2126 R + 0.7152 G + 0.0722 B (linearised sRGB) ratio = (L_lighter + 0.05) ÷ (L_darker + 0.05)
Which gray text colors pass on white and on black?
| Gray | On white | AA on white | On black | AA on black |
|---|---|---|---|---|
| #000000 | 21.00:1 | pass | 1.00:1 | fail |
| #333333 | 12.63:1 | pass | 1.66:1 | fail |
| #555555 | 7.45:1 | pass | 2.81:1 | fail |
| #595959 | 7.00:1 | pass | 2.99:1 | fail |
| #666666 | 5.74:1 | pass | 3.65:1 | fail |
| #707070 | 4.95:1 | pass | 4.24:1 | fail |
| #767676 | 4.54:1 | pass | 4.62:1 | pass |
| #777777 | 4.47:1 | fail | 4.68:1 | pass |
| #888888 | 3.54:1 | fail | 5.92:1 | pass |
| #949494 | 3.03:1 | fail | 6.92:1 | pass |
| #AAAAAA | 2.32:1 | fail | 9.03:1 | pass |
How to check color contrast for WCAG
- 1Enter the text colorPick it with the color picker or type its HEX code, such as #767676.
- 2Enter the background colorUse the color directly behind the text, not the page's overall background if a card or button sits between them.
- 3Read the levelsThe checker shows the ratio and whether it passes AA and AAA for normal and large text, and the 3:1 rule for icons and borders.
- 4Take the suggested shade if it failsCopy the nearest passing text color, which keeps your hue and changes only its lightness.
Frequently asked questions
What contrast ratio does WCAG AA require?
Is #767676 on white accessible?
Do logos and disabled buttons need to meet contrast rules?
Does contrast apply to icons and input borders?
Why does my design tool show a slightly different ratio?
Sources
- WCAG 2.2 — SC 1.4.3, 1.4.6, 1.4.11 and the relative luminance definition (W3C Recommendation) (checked 20 Oct 2026)
- Understanding SC 1.4.3 Contrast (Minimum) — no rounding, large-text sizes (W3C WAI) (checked 20 Oct 2026)
Need this, but tailored to your brand?
We design UI, UX, and interfaces that feel as good as they look.
Built by CountryDevs · No signup · No ads · We count visits, never what you enter