• Success Criterion 1.4.1
  • Conformance level A
  • W3C reference F81

Required or Error Fields Marked Only by a Red Border

1.4.1 — Use of Color

Scenario

Setting

A car-rental site's checkout flow

What’s wrong

Required fields or fields with errors are marked by color only (red border) — colorblind and screen reader users can't tell which field is the problem.

Example 

<input type="text" class="error" style="border: 2px solid #e53e3e;">
<!-- no icon, no error text, no aria-invalid -->

Why it matters

A renter finishing checkout resubmits the form twice, unable to tell which of six fields triggered the rejection.

How to test

Trigger a form error in grayscale: if the only change is a red border/text with no icon, symbol, or text label, it fails.

How to fix

Pair the color change with an icon and a text message tied to the field via aria-describedby.

<input type="text" class="error" aria-invalid="true" aria-describedby="license-error" style="border: 2px solid #e53e3e;">
<p id="license-error">Driver's license number is required.</p>

Outcome

The renter fixes the license field on the first try because the error message tells them exactly what's wrong.

Who is affected

Colorblind users who can't see the red border, and screen reader users because the border color is never announced.

Learn more

Related scenarios