Give large text at least 3:1 contrast
Contrast rules relax for big text. G145 is that relaxation written down. Text counting as large scale needs a contrast ratio of at least 3:1 against its background, rather than the 4.5:1 the rule asks of everything else. Large scale means at least 18 point, or 14 point when bold. In CSS pixels that lands near 24px and 18.5px, because one point is 1.333 pixels. This is a sufficient technique for 1.4.3 Contrast (Minimum) at Level AA. The enhanced rule at Level AAA moves the same two numbers up, asking 7:1 in general and 4.5:1 for large text. Photographic backgrounds are where this usually goes wrong, since the ratio has to hold against the lightest and darkest patches the text crosses, not against the average.
How we find it in an audit
Contrast is the part of accessibility a machine measures well. Our scan reports ratios across the site and flags anything under the threshold. Human work starts where the background stops being flat. Our reviewers sample text over photographs, gradients and video at several points, and check the size actually rendered rather than the size in the design file.
How affected users experience it
Low contrast does not read as low contrast to the person living with it. It reads as tiredness. Or a bad screen, or their eyes getting worse. Older readers, people with cataracts, and anyone outdoors in daylight all lose the same text, and nobody files a complaint about a headline they could not read. They just leave.
Passes vs. fails
Passes
The headline measures at least 3:1 against the lightest area it crosses, helped by a solid overlay sitting behind the text.
Fails
A hero banner sets its 32px headline at 2.2:1 against a light area of the photograph behind it.
How this gets tested
The W3C publishes test rules that define what a checker looks for here.
- Text has enhanced contrastA tool can check this
- Text has minimum contrastA tool can check this
Other ways to satisfy this rule
7 guides on this site are filed under 1.4.3 Contrast (Minimum). W3C lists this one as sufficient for that rule on its own. Implement it correctly, in a way your readers' software actually supports, and the rule is met.
- G18sufficientMeet the 4.5:1 contrast ratio for text
- G148sufficientLeave text colors default, or set both
- G174sufficientOffer a working switch to high-contrast view
- G156advisoryKeep text recolorable by the user's browser
- F24failureNever set text color without its background
- F83failureDo not set text over a low-contrast background image
This guide is our interpretation of W3C technique G145: Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text) and background behind the text. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.