About WCAG contrast
Ratio and AA/AAA level
How to use
Enter two colors to see their WCAG contrast ratio and an instant AA or AAA pass/fail verdict for text and interface elements.
WCAG contrast
WCAG contrast standards
WCAG AA requires a ratio of at least 4.5:1 for normal text and 3:1 for large text. AAA raises those thresholds to 7:1 and 4.5:1.
Large text means 18pt regular or 14pt bold and above. Interface icons and focus indicators should also reach 3:1 against their background.
Checking and fixing contrast
Enter the text and background colors, or use the sliders to move lightness while keeping hue and saturation intact.
The suggestions panel proposes nearby colors that reach AA. Choose one, copy it, and verify it again against your real background image or overlay.
Frequently asked questions
What is the difference between AA and AAA?
AA is the baseline accessibility level and AAA is stricter. AAA is recommended for long-form reading, while AA is the common target for product interfaces.
What counts as large text?
Text at 18pt (24px) or 14pt (18.66px) bold and above. Large text needs a lower contrast ratio than body copy.
Why does my ratio look different in the browser?
Browsers may apply opacity, overlays or image backgrounds. Measure the final rendered colors, not only the declared values.
Can I use these colors in production?
Yes. The values are ordinary HEX colors. Always re-check them in context, including disabled and hover states.