#111111 on #FFFFFF18.88:1 - passes AA and AAAA high-contrast pair suitable for normal and large text.
Free Color tool
Contrast Checker
Check foreground and background color contrast ratios against WCAG AA and AAA text thresholds online for free.
Contrast Checker
Compare foreground and background colors, preview sample text, and check WCAG contrast thresholds for normal and large text.
How to use Contrast Checker
- Enter or choose the foreground and background colors.
- Calculate the contrast ratio between the two colors.
- Review WCAG AA and AAA results for normal and large text, then adjust colors as needed.
The interactive converter loads when JavaScript is available. The examples and guidance below remain readable without it.
Contrast Checker examples
Contrast ratio compares relative luminance, not color names or hue difference. Ratios range from 1:1 for identical luminance to 21:1 for black and white.
#767676 on #FFFFFF4.54:1 - passes AA for normal textThis pair reaches AA but not AAA for normal-size text.
#AAAAAA on #FFFFFF2.32:1 - fails normal text requirementsIncrease the difference in relative luminance before using this pair for text.
Practical guidance
How to read WCAG contrast results
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. AAA raises those targets to 7:1 and 4.5:1. Large text means at least 24 CSS pixels in regular weight or about 18.66 CSS pixels when bold. Use the result that matches the text size and weight you will actually publish.
Test every visible state
A passing default color pair is only the start. Check links, muted labels, placeholder text, disabled controls when their meaning must remain visible, keyboard focus indicators, and hover or selected states. Test text over images against the lightest and darkest areas it may cover because one sampled background color may not represent the complete design.
Contrast is one accessibility check
Passing a numerical threshold does not guarantee an accessible interface. Keep labels clear, preserve visible keyboard focus, avoid communicating status by color alone, and test zoom and responsive layouts. Brand colors can often be retained for decoration while a darker or lighter accessible variant is used for text and interactive controls.
Frequently asked questions
What does the contrast ratio measure?
It compares the relative luminance of foreground and background colors on a scale from 1:1 to 21:1.
What are AA and AAA results?
They indicate whether the color pair reaches WCAG contrast thresholds for normal or large text. AAA uses the stricter thresholds.
Does passing contrast guarantee accessibility?
No. Contrast is one requirement. Typography, focus visibility, labels, interaction states, and not relying on color alone also matter.