Contrast checker
Check that text is readable on its background according to the WCAG accessibility standard
Contrast ratio
14.68:1
| AA | AAA | |
|---|---|---|
| Normal text | Pass | Pass |
| Large text (24 px or 18.66 px bold) | Pass | Pass |
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
About this tool
This checker calculates the contrast ratio between a text color and its background color, using the relative luminance formula from WCAG 2. Use it to confirm that a button, a link or a paragraph stays readable, including for people with low vision, before you ship a mockup or a theme. A preview shows a sample sentence in both colors.
The result tells you whether level AA and level AAA pass, for both normal text and large text. When the contrast falls short of AA for normal text, the tool suggests the closest text color that reaches it, by darkening or lightening your color. Enter colors as hex codes or with the color picker.
How to use it
- Enter the Text color and the Background color, as hex codes or with the color picker.
- Read the Contrast ratio and the Pass or Fail results for Normal text and Large text.
- If a text color is suggested for level AA, click Apply to use it.
- Click Swap to test the combination with the two colors reversed.
Frequently asked questions
Which WCAG thresholds does the tool use?
For normal text, 4.5:1 at level AA and 7:1 at level AAA. For large text, meaning 24px or 18.66px bold, 3:1 at level AA and 4.5:1 at level AAA.
How is the suggested color calculated?
The tool gradually moves your text color toward black or white, whichever contrasts more with the background, and stops as soon as the ratio reaches 4.5:1. The suggested color therefore stays as close as possible to your original one.
Which color formats are accepted?
Three- or six-digit hex codes, with or without the hash sign, or the color picker. Transparency is not supported: for semi-transparent text, enter the color you get once it is blended with the background.
Do the colors I test leave my browser?
No. The calculation runs entirely in your browser with no network request. The last two colors you tested are only kept in the browser's local storage so they show up again when you come back.