G18Sufficient technique WCAG 1.4.3 WCAG 1.4.6 Level AA Scanner-detectable

Meet the 4.5:1 contrast ratio for text

Body text needs a contrast ratio of at least 4.5:1 against its background, and G18 is the technique that says so. W3C lists it as sufficient for 1.4.3 Contrast (Minimum) at Level AA, and again for 1.4.6 Contrast (Enhanced) at Level AAA. The ratio comes out of a formula rather than an opinion, which makes it a number you settle rather than a matter you argue about. On white, #767676 is the lightest neutral gray that clears the bar, and it clears it at 4.54:1, so there is almost nothing in hand. Thresholds are thresholds. They do not round, so 4.499:1 fails. Large text takes 3:1 instead, and that allowance belongs to the criterion and to technique G145 rather than to G18, whose own scope is the smaller sizes. Large means 18pt, or 14pt when the text is bold, and because nobody sets type in points W3C gives the conversion itself. Those work out at roughly 24px and 18.5px. Two neighbouring rules save confusion later. Icons, control borders and other non-text things have their own 3:1 requirement, which lives under 1.4.11. And 2.4.7 Focus Visible sets no ratio at all, so a focus ring's contrast gets judged there rather than here.

How we find it in an audit

We sample text and background colors with a contrast meter across every audited page, and the failures cluster in the places nobody designed on purpose. Hover states, placeholder text, labels styled to look disabled that are not disabled, and text sitting over a photograph. That last one has no single answer. A letter over an image is measured against whatever sits directly behind that letter, so one heading can pass on the left of the picture and fail on the right. Findings carry the measured ratio and the nearest passing color, which makes the fix a hex value rather than a conversation.

How affected users experience it

This one lands on people with low vision rather than on blind users, and low vision is a much wider group than the phrase suggests. It takes in most people past 50, anyone reading on a phone in daylight, and anyone whose screen is dimmed to save battery. #999999 gray on white measures 2.85:1, which looks refined on a calibrated monitor in a dark studio and vanishes on a train. Move it to #595959 and it measures 7:1, still softer than black, and readable again by everybody who was losing it.

Passes vs. fails

Passes: clears the ratio this rule sets. Fails: fashionable, unreadable gray.

Passes

.price {
  color: #595959;   /* 7:1 on white */
}

Fails

.price {
  color: #999999;   /* 2.85:1 on white */
}

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.

This guide is our interpretation of W3C technique G18: Ensuring that a contrast ratio of at least 4.5: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.