Use of Color.

Information conveyed only by color is invisible to colorblind users (8% of men)

What does this check test?

This check verifies that color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. Any information communicated through color must also be available through another channel: text labels, patterns, shapes, or icons. This maps to WCAG 2.2 Success Criterion 1.4.1 (Level A). Common failures include red/green status indicators without labels, error states shown only by turning a field border red, and required fields marked only with color.

Why does it matter?

Approximately 8% of men and 0.5% of women have some form of color vision deficiency — that is roughly 350 million people worldwide. The most common form is red-green colorblindness (deuteranopia/protanopia), which makes red error states and green success states look nearly identical. Beyond colorblindness, situational factors like screen glare, low-brightness settings, grayscale mode, and printed pages all strip color information. Relying solely on color creates a barrier that is easy to avoid with minimal design effort.

Who is affected?

UI/UX designers choosing color palettes and status indicators, front-end developers implementing form validation, data visualization engineers building charts and graphs, and product managers defining error/success states. Anyone designing dashboards, status pages, or data-heavy interfaces should be particularly aware.

Where does this apply?

Form validation messages (red borders for errors), status indicators (green/yellow/red dots), link text distinguished from surrounding text only by color, charts and graphs with color-coded data series, calendar events using color categories, required field indicators, and progress/step indicators.

How to fix it

<!-- Bad: only a red border indicates the error -->
<input class="border-red-500" type="email">

<!-- Good: icon + text + color -->
<input class="border-red-500" type="email" aria-describedby="email-err">
<span id="email-err" class="error" role="alert">
  <svg aria-hidden="true"><!-- warning icon --></svg>
  Email is required
</span>

<!-- Bad: color-only status -->
<span class="dot dot--green"></span>

<!-- Good: color + text label -->
<span class="status-badge">
  <span class="dot dot--success"></span> Active
</span>

/* Ensure links are underlined, not just colored */
a { text-decoration: underline; }

References

• WCAG 2.2 — Success Criterion 1.4.1 Use of Color
• W3C WAI — Using color to identify and convey information
• Coblis — Color Blindness Simulator