• Success Criterion 1.4.1
  • Conformance level A

Form Validation That Turns Borders Red as the Only Cue

1.4.1 — Use of Color

Scenario

Setting

An online spreadsheet's toolbar

What’s wrong

Form validation turning borders red as the only error indication (specific instance of F81 pattern).

Example 

.sheet-tab.invalid { border-bottom: 3px solid #d32f2f; }
<!-- renaming a sheet tab to a duplicate name only turns the tab underline red -->

Why it matters

A spreadsheet user renaming a tab doesn't notice the rejection and assumes the new name saved when it didn't.

How to test

View a form with a required-field error in grayscale: red-only borders with no icon or text label fail.

How to fix

Surface a text alert next to the tab instead of relying on the underline color to explain the rejection.

.sheet-tab.invalid { border-bottom: 3px solid #d32f2f; }
<div role="alert">"Sales Q3" is already in use. Choose a different name.</div>

Outcome

The user reads the alert, renames the tab uniquely, and moves on without wondering why their edit disappeared.

Who is affected

Colorblind users and anyone glancing quickly at the toolbar without registering a subtle color shift.

Learn more

Related scenarios