Colour Contrast Checker
Check WCAG contrast ratio between two colours, with AA and AAA results
| WCAG 2.1 check | Needs | Result |
|---|---|---|
| AA Normal text | 4.5 : 1 | Pass |
| AA Large text | 3 : 1 | Pass |
| AAA Normal text | 7 : 1 | Pass |
| AAA Large text | 4.5 : 1 | Pass |
| AA UI components and graphics | 3 : 1 | Pass |
Runs entirely in your browser. Nothing you type or upload is sent to us or stored.
Results are for general guidance. Please check anything important before relying on it. Terms of use
How to Use
- Set the text colour and the background colour: click a colour box to pick one, or type a HEX code (#777 or #777777) or rgb(119, 119, 119). Tap a pair under Try a pair to start from an example.
- Read the contrast ratio and the pass or fail marks for WCAG 2.1 AA and AAA, for normal text, large text and UI components.
- Check the two samples to see your colours as entered and swapped. Use Swap colours to flip text and background, and Copy CSS to copy the pair as
colorandbackground-color. - If the pair fails, choose a target under Nearest passing text colour, then copy the suggested darker or lighter shade or press Use to try it.
What a colour contrast checker measures
A colour contrast checker tells you how easy text will be to read against its background. It compares how bright the two colours look to the human eye and gives a ratio from 1 : 1 (the same colour, unreadable) to 21 : 1 (black on white). The Web Content Accessibility Guidelines (WCAG) set minimum ratios, and this tool marks each one as pass or fail.
Low contrast hurts more people than you might think: anyone reading a phone in Indian afternoon sunlight, older relatives with weaker eyesight, people with colour vision deficiency, and anyone on a cheap screen with the brightness turned down.
The formula
Each colour first gets a relative luminance. The red, green and blue values (0 to 255) are scaled to 0 to 1, converted from the sRGB curve to linear light, and weighted by how sensitive the eye is to each one. Green counts most, blue least.
linear = c / 12.92 if c ≤ 0.04045, else ((c + 0.055) / 1.055)^2.4
L = 0.2126 × R + 0.7152 × G + 0.0722 × B
ratio = (L_lighter + 0.05) / (L_darker + 0.05)
WCAG 2.1 prints the threshold as 0.03928 while the sRGB standard uses 0.04045. With 8-bit colours no channel value falls between the two, so the result is the same either way.
The levels you need to pass
| What | AA (minimum) | AAA (enhanced) | Criterion |
|---|---|---|---|
| Normal text | 4.5 : 1 | 7 : 1 | 1.4.3 and 1.4.6 |
| Large text (24px, or about 19px bold) | 3 : 1 | 4.5 : 1 | 1.4.3 and 1.4.6 |
| Buttons, input borders, icons, chart lines | 3 : 1 | none | 1.4.11 |
"Large" means at least 18 point (24 CSS pixels) regular, or 14 point (about 18.7 pixels) bold. Logos and purely decorative text have no requirement.
Level AA is the usual target. In India, the Guidelines for Indian Government Websites (GIGW 3.0) ask for conformance with WCAG 2.1 Level AA, so government sites and the vendors who build them need to meet these ratios.
Worked example: grey text and saffron buttons
The light grey #777777 on white looks fine to many designers, but it measures 4.48 : 1. That is just under 4.5, and WCAG doesn't allow rounding up, so it fails AA for body text. It passes for large text and UI parts (3 : 1). A touch darker, #767676, measures 4.54 : 1 and passes.
Saffron #FF9933 on white is only 2.13 : 1, so white text on a saffron button, or saffron text on white, fails even the 3 : 1 bar. The same saffron with black text gives 9.86 : 1, comfortably AAA. If you want to keep saffron text on white, the checker's darker suggestion for 4.5 : 1 is #B85C00 (4.60 : 1), a deep burnt orange with the same hue.
How the suggestions are found
The tool converts your text colour to HSL (hue, saturation, lightness), keeps the hue and saturation, and moves the lightness one percentage point at a time, darker in one direction and lighter in the other, until the ratio reaches the target you picked. You get the nearest shade on each side that passes, so your brand colour stays recognisable. Sometimes only one side works: on a white background, nothing lighter than a mid grey can ever reach 4.5 : 1.
Tips
- Check placeholder text, disabled buttons and text on top of photos. They are the usual failures.
- Don't rely on colour alone to show an error or a required field. Add an icon or a word too.
- Transparent colours can't be checked as they are; work out the colour they produce on your background first.
- Check dark mode separately. A pair that passes on white may fail on dark grey.