RatedWithAI

RatedWithAI

Accessibility scanner

Free Scan

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

Test & fix this criterion

Use these free tools and guides to check and fix 1.4.1 Use of Color violations:

Free accessibility checker — find WCAG violations automaticallyColor contrast checker — test contrast ratiosHow to fix common WCAG failuresTop 10 most common WCAG failures

Scan your site

Check your WCAG coverage in minutes

Start a free scan