More
More
Colour Contrast Checker
WCAG contrast between two colours.
Free. Runs in your browser: nothing you enter or open is uploaded.
| Use | Needs | Result |
|---|
Large text, 24px or 18.66px bold
Normal text at 16px. The quick brown fox jumps over the lazy dog, and this sentence is long enough to read as a paragraph.
Button border Icon
Nearest passing colours
Same hue, lightness moved only as far as needed. Click Use to apply one.
Ratios follow the WCAG 2.2 formula for relative luminance. A see-through text colour is blended onto the background first, as a browser would show it. Large text means at least 24px, or 18.66px when bold.
How to use it
- Enter the text colour and the background colour, by typing a value or using the pickers.
- Read the contrast ratio and whether it passes AA and AAA for normal text, large text and interface parts such as buttons and icons.
- If it fails, use one of the suggested colours: each keeps the hue and changes lightness just enough to pass.
Questions
What contrast ratio do I need?
WCAG level AA asks for 4.5:1 for normal text and 3:1 for large text and for interface parts such as input borders and icons. Level AAA asks for 7:1 for normal text and 4.5:1 for large text.
What counts as large text?
Text of at least 24 CSS pixels, or at least 18.66 pixels when it is bold. That is roughly 18 point regular or 14 point bold.
Why does #777 on white fail when it looks readable?
Its ratio is 4.48:1, just under the 4.5:1 minimum. The limits are set so text stays readable for people with low vision or on a dim screen in sunlight, not just on a good monitor. A slightly darker grey such as #767676 passes.
Does the tool check WCAG 3 or APCA?
No. It uses the WCAG 2.2 ratio, which is what accessibility laws and audits refer to today. APCA is a proposed method for a future version and gives different numbers.