Contrast Checker (WCAG)
Work out the contrast ratio between two colours and see whether it passes WCAG AA and AAA.
DeveloperResult
Contrast ratio
17.21:1
- Normal text, AA (4.5:1)
- Passes ✓
- Large text, AA (3:1)
- Passes ✓
- Normal text, AAA (7:1)
- Passes ✓
- Large text, AAA (4.5:1)
- Passes ✓
How does it work?
Enter a text colour and a background colour. The tool computes the contrast ratio with the WCAG 2 relative-luminance formula and shows whether it clears the AA (4.5:1 / 3:1) and AAA (7:1 / 4.5:1) thresholds for normal and large text. Unlike the Color Converter, which checks a colour against fixed white and black, this compares any two colours you give it.
Formula
Contrast = (L1 + 0.05) ÷ (L2 + 0.05), L: relative luminance (the lighter colour on top, the darker on the bottom)
Example
Text colour: #0B1647 · Background colour: #FFFFFF → Contrast ratio: 17.21:1
Similar Tools
Toolbox Get your Toolbox ready.
Star the tools you use most and, with an account, they follow you to every device.
Frequently asked questions
What ratio is good enough?
WCAG AA asks for at least 4.5:1 for normal-size text; text at 18px+ bold or 24px+ regular counts as 'large text' and only needs 3:1. AAA is stricter: 7:1 and 4.5:1 respectively.
Does it support semi-transparent (rgba) colours?
If a colour is semi-transparent, its alpha channel is ignored; the real contrast you'd actually see depends on whatever it sits on top of, which this tool doesn't account for.
How is this different from the contrast shown in the Color Converter?
The Color Converter checks one colour against fixed white and black. This tool lets you compare the exact two colours in your own design (say, your dark navy text against your own navy background) directly.