Why Colour Contrast Matters for Accessibility
Pale grey text on a white background is one of the most common design mistakes on the web, and it is almost always made by someone with a good monitor in a well-lit room. On a phone outdoors, or to a reader with any degree of low vision, it simply disappears. The Contrast Checker tells you before anyone else has to.
What the ratio means
Contrast ratio compares the relative brightness of two colours and returns a number between 1:1 and 21:1. Identical colours give 1:1. Black on white gives 21:1, the maximum possible.
The Web Content Accessibility Guidelines set the thresholds most organisations work to. For the AA level, normal text needs at least 4.5:1 and large text at least 3:1 - large meaning roughly 18pt, or 14pt bold. The stricter AAA level asks for 7:1 and 4.5:1.
If you remember one number, make it 4.5.
Why this is not only an accessibility box to tick
Around one person in twelve has some colour vision deficiency, far more have uncorrected vision, and everyone at some point reads a screen in sunlight. Contrast is one of the few design decisions that helps every single reader rather than a subset. It is also increasingly a legal requirement for public sector and commercial sites in many countries.
How to check a pair
Open the tool, enter your text colour and your background colour, and you get the ratio and its WCAG rating immediately. If it fails, darkening the text is usually a smaller change than it feels - a step or two on the lightness scale is often all it takes.
Building a whole set? Derive your shades with the Palette Generator and check the pairs you intend to use together.
Where sites usually fail the check
Four patterns account for most failures, and all four come from the same instinct - making something look lighter and calmer.
Placeholder text in form fields is the commonest, often several steps too pale because it is meant to look secondary. Disabled buttons are next; greyed out is a legitimate convention but the label still needs to be readable. Then captions, footnotes and timestamps, set in light grey because they are less important. And finally white text on a mid-tone brand colour, which almost always falls just under the line.
The fix in each case is the same and smaller than it feels: one or two steps darker is usually enough, and almost nobody notices the change except the people who could not read it before.
Common questions
Does this apply to buttons and icons too?
Yes. Interface components and meaningful graphics are expected to reach 3:1 against what is next to them.
What about text over a photograph?
Contrast still applies, measured against the part of the image behind the text. A solid panel or a dark overlay is the usual fix.
Does contrast apply to logos?
No. Logos and purely decorative graphics are exempt under WCAG. Anything conveying information is not.
My brand colour fails against white. What now?
Darken it for text use while keeping the original for large shapes and backgrounds. Most brand systems end up with a slightly darker accessible variant for exactly this reason.
Check a pair of colours now: