How to use
- Set the background color and the text color with the color pickers or by typing HEX codes.
- Read the contrast ratio shown as a number such as 4.50:1, and look at the preview card.
- Check the PASS or FAIL badges for normal text AA, large text AA and normal text AAA.
The checker calculates the contrast ratio the way the Web Content Accessibility Guidelines define it. Each color is converted to relative luminance using the sRGB formula, and the ratio is the lighter luminance plus 0.05, divided by the darker luminance plus 0.05. The result is shown with two decimals, from 1:1 for identical colors up to 21:1 for black on white. The default colors are white and black.
Three results are shown. Normal text at level AA needs a ratio of at least 4.5. Large text at level AA needs at least 3. Normal text at level AAA needs at least 7. Each is marked PASS or FAIL. The ratio itself is color-coded as well. Under WCAG, large text means roughly 18 point regular or 14 point bold, so use the large text result only when your text is that size.
A preview card uses your two colors, showing a heading and a sample line of text, so you can judge the colors as well as the number. A passing score does not guarantee good readability on its own, since font weight, size and surroundings also matter.
The colors must be entered as 6-digit HEX codes. Calculation is done in your browser.
FAQ
What ratio do I need?
For WCAG AA, normal text needs 4.5:1 and large text needs 3:1. For AAA, normal text needs 7:1. The tool shows the result for each.
What counts as large text?
In WCAG, text at about 18 point or larger, or 14 point bold or larger.
Which color goes where?
The tool treats one color as background and the other as text, but the ratio is the same either way.
Why does my short HEX code not work?
Enter the full 6-digit form, such as #333333 rather than #333.
Does it check non-text elements?
It only gives text thresholds. The ratio is shown, so you can compare it with the 3:1 guideline for interface components yourself.