R

RatedWithAI

WCAG guidance

Scan your site

WCAG 2.1

1.4.1 Use of Color

Level A success criterion

Color should not be the only way to convey information, indicate an action, or distinguish elements.

Why it matters

Users with color vision deficiencies may miss important cues when color is the sole indicator.

Common violations

  • Error states shown only in red
  • Required fields indicated only by color
  • Charts that rely on color-only legends

Code examples

Bad

<span class="text-red-500">Error</span>

Good

<span class="text-red-500">Error:</span> Please enter a valid email.

How to fix

Add text labels, icons, or patterns alongside color cues so meaning is conveyed in multiple ways.

Related criteria

1.4.3 Contrast (Minimum)3.3.2 Labels or Instructions4.1.3 Status Messages

Related resources

Apple accessibility scoreWalmart accessibility scoreTarget accessibility scoreWordPress accessibility guideShopify accessibility guideSquarespace accessibility guide

Scan your site

Check your WCAG coverage in minutes

Start a free scan