Color contrast checker
The ratio is computed in this tab. Nothing is uploaded.
Contrast
Normal text looks like this at 16px.
Large text at 24px
5.79:1
WCAG 2 contrast: AA 4.5:1 for normal text and 3:1 for large text; AAA 7:1 and 4.5:1; non-text 3:1.
How to use this tool
Check a text and background pair against WCAG 2 AA and AAA. Nothing is uploaded.
Open Contrast checker
A sample pink on cream pair is filled. The ratio and pass/fail rows sit on the right under a text sample.
Enter your colors
Type a hex code or use the color picker for text and background. Swap exchanges the two.
Fix a failing pair
When normal text fails AA, the closest passing text color is suggested below the table. Copy puts the ratio and results on the clipboard.
FAQ
What does the contrast ratio mean?
It compares the relative luminance of the text color and the background on a scale from 1:1 (same color) to 21:1 (black on white), as defined by WCAG 2.
Is anything uploaded?
No. The ratio is computed in this tab.
What ratio do I need?
WCAG AA asks for 4.5:1 for normal text and 3:1 for large text; AAA asks for 7:1 and 4.5:1. Icons, borders and form controls need 3:1 (non-text contrast).
What counts as large text?
At least 18pt (24px) regular, or 14pt (about 18.7px) bold.
How does the suggestion work?
When the pair fails AA for normal text, the text color is moved step by step toward black or white, whichever helps, until it reaches 4.5:1. Hue is kept as close as possible.