Colours: contrast, palette and gradient
WCAG contrast with AA and AAA thresholds, the dominant colours of an image and a CSS gradient with a Tailwind class.
- Category
- Graphics
- Price
- free
Starting the tool...
WCAG contrast: 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
Each tab of 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.