Skip to main content
WCAGrules
Quick navigation

Add text cues to color-coded field labels

A form that marks required fields in red has told everyone who can see red. G205 says put the cue in the text as well, and put it inside the label itself so the meaning travels with the field. W3C's example is a label reading 'Last name (required)' with the color applied by a class, plus a line above the form saying required fields are shown in red and marked that way. This is a sufficient technique for 1.4.1 Use of Color at Level A. The placement matters more than it looks. A legend at the top of the form explains the color once, in a place the reader may already have passed, and it attaches nothing to any individual field. Inside the label, the cue reaches three groups at once. People scanning the color, people reading or listening for the text, and people reading a braille display by touch.

How we find it in an audit

Our reviewers turn off color and read the form. Any distinction that disappears is the finding. Then we listen to each field with a screen reader and check the cue is inside the announced label rather than sitting somewhere nearby, since proximity on screen is not association in the markup.

How affected users experience it

Braille readers are the group most often forgotten here and W3C names them directly. A braille display renders text and no color at all, so a red label and a black one are the same label. Screen reader users are in the same position. Adding the word to the label costs nothing and is the only version of the cue that reaches touch, speech and sight together.

Passes vs. fails

Passes: instructions name the control. Fails: shape and position only.

Passes

<label>Card number (required)</label>. The requirement is in the label text, with the red kept as reinforcement for those who see it.

Fails

<label style="color:#c00">Card number</label> with a note at the top of the form reading 'Fields in red are required.'

Other ways to satisfy this rule

9 guides on this site are filed under 1.4.1 Use of Color. W3C lists this one as sufficient for that rule on its own. Implement it correctly, in a way your readers' software actually supports, and the rule is met.

This guide is our interpretation of W3C technique G205: Including a text cue for colored form control labels. 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.

Go somewhere useful

Find tools, resources and your workspace.

29 destinations