F81Documented failure WCAG 1.4.1 Level A Human testing required

Do not mark required or error fields by color alone

A field is marked as required, or marked as the one that failed, with nothing but a change of color. F81 is the failure technique for that, so a match is a defect rather than a method. The exception is the part worth knowing, because it is what the argument usually turns on. Color on its own passes the color rule when the difference survives being seen in black and white, which W3C puts at a 3:1 lightness difference, and bold or a different typeface does the same job. So red text that also goes bold is not automatically this failure. It can still break three other rules at once, though, because nothing in words says what went wrong and nothing programmatic marks the field as required or invalid. Passing the color test is not the same as being fixed.

How we find it in an audit

We view the form in grayscale, which is the test the rule itself describes, and check whether the required fields and the failed ones are still tellable apart. Where a lightness difference survives, we measure it rather than eyeball it, because 3:1 is a number and not a feeling. Then a reviewer works through the three questions the same form raises next. Whether the message says in words what is wrong, whether the field carries a programmatic required or invalid state, and whether the tie between message and field lives in the markup rather than only on the screen.

How affected users experience it

Readers with color vision deficiency get the direct version, where red and grey arrive as the same grey and the failed field sits invisible among the ones that passed. Low-vision readers hit the same wall from another side. Screen-reader users sit outside the color rule altogether and lose more, because a red border says nothing whatsoever, so the form announces failure without naming a field or a reason. They resubmit, fail again, and leave.

Passes vs. fails

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

Passes

<label for="zip">ZIP code (required)</label>
<input id="zip" required aria-invalid="true" aria-describedby="zip-err">
<p id="zip-err">Enter a 5-digit ZIP code.</p>

Fails

.error { border-color: red; }
<input class="error" id="zip">

The other techniques filed under this rule

9 guides on this site are filed under 1.4.1 Use of Color. 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 F81: Failure of Success Criterion 1.4.1 due to identifying required or error fields using color differences only. 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.