Home
Color Contrast Checker
Check your text and background colors against WCAG AA and AAA contrast rules.
Normal text sample. This line shows how regular 16px body text will look on the chosen background.
Large heading text
Relative luminance: text 0.031, background 1.000.
Enter a valid HEX color like #3366FF.
What is a color contrast checker?
A color contrast checker measures how clearly text stands out against its background. It returns a contrast ratio between 1:1 and 21:1 and tells you whether the pair meets the WCAG accessibility rules used by websites, apps and documents. Good contrast helps everyone read your content, including people with low vision or color vision differences.
How to use this contrast checker
- Pick your text color with the first swatch or type a HEX code directly.
- Pick the background color with the second swatch or HEX box.
- Read the contrast ratio and the four WCAG results: AA normal, AA large, AAA normal and AAA large.
- Check the live preview to see the sample text in your exact colors, and press the swap button to reverse the pair.
Why use this tool
- Instant pass or fail chips show every WCAG level at a glance.
- The live preview renders normal and large text in your chosen colors.
- Runs fully in your browser, so your color choices are never uploaded.
- Free to use with no signup, and it works on phone, tablet and desktop.
Frequently Asked Questions
Is this contrast checker free?
Yes. Check unlimited color pairs, see the contrast ratio and read WCAG results without paying or creating an account.
What contrast ratio do I need for WCAG AA?
Normal text needs a ratio of 4.5:1 or higher, while large text needs 3:1 or higher to pass WCAG AA.
What ratio is needed for WCAG AAA?
Normal text needs 7:1 or higher and large text needs 4.5:1 or higher to pass the stricter WCAG AAA level.
Does my color pair leave my device?
No. The tool calculates the ratio fully in your browser, so your colors are never uploaded anywhere.