Color Contrast Checker
Check WCAG color contrast ratios for accessible web design.
Color inputs
WCAG large text is at least 18pt (24px) or 14pt (about 18.7px) bold. Your selection counts as normal text.
Contrast result
Readable text should have enough contrast against its background.
Contrast ratio
17.73:1
Grade
Excellent
WCAG level (normal text)
AAA
UI 3:1
Pass
- This pair passes WCAG AA and AAA text contrast for both normal and large text.
- Large text has lower contrast requirements than normal body text.
- Contrast ratio is only one part of accessible design.
- Check hover, focus, disabled, and error states separately.
Example pairs
Contrast questions
A color contrast checker compares foreground and background colors to estimate whether text and interface elements have enough visible contrast.
Contrast ratio measures the luminance difference between two colors. It ranges from 1:1 for no contrast to 21:1 for maximum contrast.
WCAG AA uses 4.5:1 for normal text and 3:1 for large text. UI components and graphical objects commonly use 3:1 guidance.
WCAG AAA uses 7:1 for normal text and 4.5:1 for large text.
The maximum contrast ratio is 21:1, such as black text on a white background or white text on a black background.
No. Large text has lower contrast thresholds because bigger letters are easier to read. WCAG defines large-scale text as at least 18 point, or at least 14 point bold, which is about 24 CSS pixels, or about 18.7 CSS pixels bold.
Yes. Use the UI component mode for a 3:1 non-text contrast reference, and also check the button text against its button background.
No. Color contrast is one important part of accessibility, but full accessibility also depends on structure, keyboard support, labels, focus states, readability, and assistive technology support.
No. Color parsing and contrast calculations run locally in your browser.
Yes. You can copy a summary with the colors, contrast ratio, luminance values, and pass/fail results.
Related tools