WCAG 1.4.1 Use of color

The rule behind WCAG 1.4.1, in plain words

WCAG names four jobs that color must not do on its own: carrying information ("items in red are sold out"), showing an action (a link that is blue and nothing else), asking for a response ("fill in the red fields") and telling elements apart (two lines on a chart in red and green). In each case you may keep the color. You just add something that works without it.

The rule is about vision, not code. A screen reader user does not see the color either way, which is handled by other rules such as giving the text of an error message. This rule protects people who look at the page but cannot rely on hue.

Links inside text: the underline question

Links in a paragraph are the most common failure of this rule. Navigation menus and button rows are clearly links from their position, but a link in the middle of a sentence looks like any other word unless something marks it.

You have two ways to pass:

1. Underline the link (or give it another non-color mark, such as bold weight that body text never uses). This is the simple and safe choice.
2. Skip the underline only if the link color stands at 3:1 or more from the surrounding body text, the link still has 4.5:1 against the background, and an underline or similar cue appears on mouse hover and on keyboard focus.

The second route is tighter than it sounds. With black body text, #0066cc works: it gives 3.77:1 against the black text and 5.56:1 against white. With dark grey body text such as #333333, no link color can do both jobs on a white page, because any color light enough to stand 3:1 apart from the grey is too light to keep 4.5:1 on white. In that case the underline is the only practical answer.

Link blue on white The same blue next to black

Everyday failures and how to repair them

Red and green are a famous problem pair. The red #d32f2f and the green #2e7d32 differ by only 1.02:1 in lightness, so on a grayscale screen they look the same shade.

Who notices when color carries meaning

Color vision deficiency affects roughly 1 in 12 men and 1 in 200 women, most often making reds and greens hard to tell apart. Some people see no color at all. People with low vision, those using high contrast or inverted color settings, and anyone reading a black and white printout lose color information too. Even users with typical vision miss color changes on a dim phone screen in daylight.

Checking a page in grayscale

1. Turn on a grayscale filter. On Windows open Settings, Accessibility, Color filters; on a Mac open System Settings, Accessibility, Display, Color filters. In Chrome or Edge you can instead open developer tools, then the Rendering panel, and choose a vision deficiency to emulate.
2. Read the page as a new visitor. Can you find every link in the body text?
3. Submit a form with mistakes. Can you tell which fields are wrong and which are required?
4. Look at every chart, map key, status badge and calendar. Is anything only told apart by hue?
5. Turn the filter off and confirm each fix still looks right in color.

Before and after: an error message

<input id="email" class="error">
.error { border-color: #d32f2f; }

<label for="email">Email (required)</label>
<input id="email" aria-describedby="email-err" aria-invalid="true">
<p id="email-err">Error: enter an email address like name@example.com</p>

The red border can stay. The words do the real work, and they also satisfy 3.3.1 Error identification.

Use of color versus contrast and other rules

People often mix up this rule with contrast. They answer different questions:

• This rule asks: is there a cue other than hue? It is level A, so it applies even to the most basic conformance claim.
• Text contrast asks: is the text dark or light enough against its background?
• Non-text contrast asks: can people see the edges of controls, icons and chart parts?

Fixing one does not fix the others. A green and red chart can pass both contrast rules and still fail here. Use the contrast checker for the numbers, and the grayscale test for this rule. W3C's Understanding Use of Color page lists more examples.