WCAG colour contrast
Two colours, the contrast ratio, AA and AAA thresholds and the nearest passing colour.
- Category
- Graphics
- Price
- free
The tool starts in your browser.
Everything is calculated in your browser. Nothing you type is sent to our server.
How to use it in three steps
The tool as a schematic with this page's example. Each step's number stands where you take it: in the fields, at the result or outside the tool.
Enter the text and background colours.
Read the contrast ratio and the WCAG thresholds.
Copy the nearest colour that passes.
#7c8599 on white, step by step
The example colours computed by the same function as in the tool, with the WCAG formula. The ratio is truncated to two places, never rounded up.
You enter
- Text
- #7c8599
- Background
- #ffffff
Relative luminance
- Text
- 0.2336
- Background
- 1
Each colour gets a luminance from 0 for black to 1 for white, with channel weights for the eye.
Ratio
- Contrast
- 3.70:1
The lighter plus 0.05 divided by the darker plus 0.05.
WCAG thresholds
- Normal text, AA
- fails (4.5:1)
- Large text, AA
- passes (3:1)
Large text is 24 px regular or about 18.7 px bold and up.
The nearest passing text colour
- AA (4.5:1):
#6e7688 - AAA (7:1):
#535967
Questions
Related tools
The tool does one job. If the same thing should happen automatically in your bot, server or system, we build it.
Missing a tool you need?
Tell us what you want to calculate or generate. We will tell you whether a tool is enough or an integration in your system fits better.