Colour Contrast Checker
Enter a text colour and a background colour to see the contrast ratio and whether it passes the WCAG levels.
Your result
A large headingBody text set in these two colours.
Nearby text colours that reach 4.5:1
How to use it
- Enter the text colour and the background colour, or pick them from the colour box.
- Read the contrast ratio and the result for each level.
- If normal text fails AA, press one of the suggested colours to try it.
Examples
- Black on white#000000 / #ffffff 21:1
- Grey on white#777777 / #ffffff 4.47:1
- Slightly darker grey#767676 / #ffffff 4.54:1
Tool details and privacy
Enter or pick a text colour and a background colour to see the contrast ratio and the AA and AAA results for normal and large text. If the colour fails, the tool suggests a nearby colour that passes.
Contrast ratio = (lighter luminance + 0.05) ÷ (darker luminance + 0.05). It runs from 1:1 to 21:1.
Options
- HEX, rgb() and hsl() values.
- A button swaps the text and background colours.
- Suggested text colours are made by lightening or darkening your colour until it reaches 4.5:1.
Limits
- The ratio is shown to two decimal places, rounded down. The pass or fail uses the exact value.
- Transparent colours and colour names such as red are not supported.
- Large text in WCAG is 24 pixels or more, or 18.66 pixels or more when bold.
- It checks two colours only. It is not a full accessibility audit of a page.
Privacy
The colours are checked in your browser and are not sent to any server.
Questions
What contrast ratio does WCAG require?
Level AA needs 4.5:1 for normal text and 3:1 for large text. Level AAA needs 7:1 for normal text and 4.5:1 for large text.
What counts as large text?
Text of 24 pixels or more, or 18.66 pixels or more when it is bold.
Why does 4.47:1 fail when it is so close to 4.5?
4.5:1 is a minimum, and the tool does not round the ratio up. Darken the text colour slightly or try the suggested colour.
Does passing contrast make a site accessible?
No. Contrast is one WCAG requirement. Others remain, such as keyboard navigation and text alternatives for images.