F83Documented failure WCAG 1.4.3 WCAG 1.4.6 Level AA Partly scanner-detectable

Do not set text over a low-contrast background image

Text sits on top of a photograph and the photograph wins, so the headline reads perfectly over the dark trees and vanishes into the bright sky. F83 is the failure technique for that, which makes a match a defect rather than a design decision you can defend on the rule. The comparison asked for is narrower than people assume, because it runs against the parts of the image most like the text and behind the text. A dark corner nowhere near the headline does not fail anything. There is a second way to break it that no ratio catches, though. When the image carries lines that cross behind the letters, an F starts reading as an E while the measured contrast stays fine. W3C files this one under a Level AAA enhanced-contrast rule as well.

How we find it in an audit

The quick check comes first, and it is the step most audits skip. We measure the text against the lightest part of the image for light text, or the darkest part for dark text, and if that worst case clears the ratio then the image passes in a single measurement. Only when it fails do we sample the background behind each letter, which is slower and is the version a client will argue with. A reviewer also looks at the picture rather than the numbers, since pattern interference clears every ratio and still leaves the word unreadable.

How affected users experience it

Low-vision readers and readers with color vision deficiency lose whole phrases to this, and the way they lose them is what makes it wearing. Part of the line reads, part of it fades, and which part fades changes when the image reflows on a different screen. So there is no learning it and no working around it. On a hero image carrying a price or a deadline, the piece that disappears is usually the piece that mattered.

Passes vs. fails

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

Passes

.hero { background-image: url(sky.jpg); color: #fff; }
.hero h1 { background: rgba(0, 0, 0, 0.65); padding: 0.5em; }

Fails

.hero { background-image: url(sky.jpg); color: #fff; }

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

The other techniques filed under this rule

7 guides on this site are filed under 1.4.3 Contrast (Minimum). W3C documents this one as a failure of that rule, so it describes a way the rule gets broken rather than a way to pass it.

This guide is our interpretation of W3C technique F83: Failure of Success Criterion 1.4.3 and 1.4.6 due to using background images that do not provide sufficient contrast with foreground text (or images of 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.