Color contrast checker
Enter a text color and a background color to see their contrast ratio and whether they meet WCAG 2.1 levels AA and AAA. Everything runs in your browser.
#FFFFFF on #004487 has a contrast ratio of 9.65:1.
Readable at any size
This is body text at 16px. Check that it is easy to read for people with low vision.
This is small text at 14px, which needs the strongest contrast.
Button label
Results
9.65:1Contrast ratio
Passes AAA for all text
| Check | Needs | Result |
|---|---|---|
| AA, normal textUnder 24px, or under 18.66px bold | 4.5:1 or more | Pass |
| AA, large text24px and up, or 18.66px bold and up | 3:1 or more | Pass |
| AA, interface partsIcons, buttons and input outlines | 3:1 or more | Pass |
| AAA, normal textEnhanced contrast for body text | 7:1 or more | Pass |
| AAA, large textEnhanced contrast for headings | 4.5:1 or more | Pass |
How it works
1
Enter two colors
Type the text color and the background color as hex codes.
2
Read the ratio
The ratio runs from 1:1 for identical colors to 21:1 for black on white.
3
Fix what fails
If a check fails, use the suggested color to get a passing text color.