Text needs a contrast ratio of at least 4.5 to 1 against its background, dropping to 3 to 1 for large text, and interface elements such as buttons and form borders need at least 3 to 1. The most common failures are not dramatic: pale grey body text, placeholder text inside form fields, footer links, and text placed over photographs.
The numbers
| Element | Minimum (AA) | Notes |
|---|---|---|
| Body text | 4.5:1 | Anything under 18pt, or under 14pt bold |
| Large text | 3:1 | 18pt and above, or 14pt bold and above |
| Interface components | 3:1 | Button edges, form field borders, focus indicators, icons carrying meaning |
| Decorative elements | No requirement | Purely ornamental graphics conveying nothing |
Worth knowing that "large" is larger than most people assume. Eighteen points is roughly 24 pixels, which is heading territory rather than slightly bigger body text. Bumping paragraph text from 16 to 18 pixels does not qualify it for the lower threshold.
Where sites actually fail
Pale grey body text
The single most common failure, and it comes from designers rather than accidents. Light grey on white looks refined on a calibrated monitor in a controlled room. On a phone outdoors it is close to invisible.
Placeholder text in form fields
Almost universally too light, because browsers default to a pale grey and few people override it. Compounded by the fact that placeholder text is often carrying the field label, which is a separate problem covered in accessible forms.
Footer links
Mid-grey text on a dark grey footer is a recurring design convention and frequently fails. It is also where people look for your address and phone number.
Text over photographs
The hardest case, since the background varies across the image and may change with screen size. A dark overlay behind the text, or a solid panel, is more reliable than hoping the photograph stays dark where the words sit.
Coloured text on coloured backgrounds
Brand colours frequently fail against each other. A gold on cream or a mid-blue on teal can look excellent and measure poorly.
Checking it without being a designer
- Browser developer tools report the contrast ratio when inspecting a text element, and flag failures directly. Free and already installed.
- Automated page scans catch contrast reliably, since it is one of the things machines assess well.
- The phone-outdoors test. Unscientific and remarkably effective. Take your site outside on a bright day and read it at arm's length.
The design objection
Designers frequently resist this, and the objection deserves a straight answer rather than dismissal.
The concern is that compliant contrast looks harsh, and that pure black on pure white is unpleasant to read. That is a legitimate observation, and the conclusion drawn from it is wrong.
The requirement is a minimum ratio, not a mandate for maximum contrast. A very dark grey on an off-white background passes comfortably while remaining softer than black on white. There is a wide band of usable, attractive combinations above the threshold, and the failures are almost always well below it rather than marginally so.
The honest framing is that a design nobody can read is not a successful design, and that this constraint is no different from any other practical requirement a designer works within.
Who this is for
Not only people with diagnosed visual impairments, and this is worth stating because it changes how the requirement feels.
Contrast affects anyone reading on a phone in sunlight, anyone over roughly forty, anyone on a cheap or aging screen, anyone tired, and anyone in a poorly lit room. The population that benefits is far larger than the population usually imagined, which is why this is one of the few accessibility measures that visibly improves outcomes for everybody.
Frequently asked questions
What contrast ratio does text need?
At least 4.5 to 1 against its background for normal text, and 3 to 1 for large text meaning 18 point and above, or 14 point bold and above. Interface components such as button edges, form field borders, and focus indicators need at least 3 to 1.
What counts as large text for contrast purposes?
Eighteen points or larger, which is roughly 24 pixels, or 14 point bold and above. This is larger than most people assume, so increasing paragraph text from 16 to 18 pixels does not qualify it for the lower threshold.
Where do websites most commonly fail contrast requirements?
Pale grey body text, placeholder text inside form fields where browsers default to a light grey, footer links on dark backgrounds, text placed over photographs where the background varies, and brand colours used against one another.
Does meeting contrast requirements mean using black on white?
No. The requirement is a minimum ratio rather than a mandate for maximum contrast, so a very dark grey on an off-white background passes comfortably while remaining softer to read. There is a wide band of attractive combinations above the threshold.
How can I check contrast without design tools?
Browser developer tools report the contrast ratio when inspecting a text element and flag failures directly, automated page scans detect contrast reliably, and taking the site outdoors on a phone in bright daylight is unscientific but remarkably effective.
Who benefits from good colour contrast?
Far more people than those with diagnosed visual impairments. Anyone reading on a phone in sunlight, anyone over roughly forty, anyone using an older or cheaper screen, and anyone in poor lighting all benefit, which makes it one of the most broadly useful accessibility measures.
West Coast Media Solutions Inc. builds websites for businesses across Canada. Platform policies change and enforcement varies; where legal actions are described they are identified by jurisdiction, since much of the published material on these topics is American and does not apply directly in Canada. This is general information rather than legal advice.
Want help getting this right?
We build websites and handle the work that surrounds them, so the details on this page get done properly the first time.
Start a Conversation