Color Contrast Checker
NEWTest a text and background color pair against WCAG contrast ratios for accessible design.
How to use Color Contrast Checker
- Pick a foreground (text) color and a background color.
- The contrast ratio is calculated automatically.
- Check which WCAG levels it passes — AA Normal, AA Large, AAA Normal and AAA Large.
Reference: W3C's WCAG contrast requirements
Frequently asked questions
What contrast ratio do I actually need?
WCAG AA (the legal baseline most accessibility standards reference) requires 4.5:1 for normal text and 3:1 for large text (18pt+, or 14pt+ bold). AAA is stricter — 7:1 and 4.5:1 respectively — and is recommended but not required for most sites.
How is the contrast ratio calculated?
Using the WCAG 2.1 formula: each color's relative luminance is computed from its gamma-corrected RGB values, then the ratio is (lighter luminance + 0.05) ÷ (darker luminance + 0.05). Pure black on white gives the maximum possible ratio, 21:1.
Why does "large text" get a lower requirement?
Bigger, bolder strokes remain legible at lower contrast than small text does, so WCAG relaxes the threshold for text large enough that individual letterforms are easier to distinguish regardless of contrast.
Community
Loading...