F24Documented failure WCAG 1.4.3 WCAG 1.4.6 WCAG 1.4.8 Level AA Partly scanner-detectable

Never set text color without its background

F24 is a documented failure filed under three contrast rules, so it reaches further than the one shown above. The failing pattern is half a pair. An author sets a text color and no background, or a background and no text color, and the missing half comes from whoever is looking. There is a correction to make about how you check for it, because the obvious method is wrong. The two colors do not have to be on the same element. Text color inherits, and an element with no background of its own is transparent, so what the rule actually asks is that some ancestor sets one. Sweeping a stylesheet for rules missing a background-color would flag nearly every rule on a conforming site. Background can also arrive from an image or the background shorthand, which brings a contrast problem of its own behind the text. And the states are where this really lives. A visited link color declared with no background is the most common real instance there is.

How we find it in an audit

We render the page under user color schemes rather than reading rules in isolation, which is the only method that answers the real question. Force a dark background, force a light one, turn on a high contrast mode, and see what disappears. Then we walk the link states, normal, visited, hover and focus, because a visited color declared alone is the classic version of this and it survives every default-state test. Contrast ratios are measurable and we measure them. Whether a color was declared alone is a question about the cascade, so it takes rendering rather than searching.

How affected users experience it

People with low vision often set their own colors, and many operating systems let them do it without overriding everything an author wrote. What that produces on a half-styled page is a combination nobody designed. Light gray text the author chose, on a light gray background the user chose, is the published example and it is not an edge case. The text has not been hidden. It is still there, at a contrast nobody can read, and the setting that was supposed to help is what produced it.

Passes vs. fails

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

Passes

.panel { background-color: #1a3550 }
.panel .note { color: #f8f8f8 }
/* The background can sit on an ancestor. It just has to exist. */

Fails

.note { color: #f8f8f8 }
/* Near-white text, and no background declared anywhere above 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

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 F24: Failure of Success Criterion 1.4.3, 1.4.6 and 1.4.8 due to specifying foreground colors without specifying background colors or vice versa. 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.