Goal
Ensure that color is not the only way information is conveyed. Users who are color-blind or have low vision must still understand content even if they can’t perceive certain colors.
Key Points
- Don’t rely on color alone to show meaning, status, or action (e.g., errors, required fields, selected states).
- Use text labels, icons, patterns, or shapes in addition to color.
- Applies to charts, forms, buttons, and links especially.
- Check that contrast between text and background still meets other criteria (1.4.3).
Short Summary
Color differences shouldn’t be the only way users understand what’s important or what actions to take. Always combine color with another visual cue — like text, symbols, or shapes.
Example Issues and Fixes
Color Alone Shows Error
Fail
<div class="p-8 flex flex-col w-full gap-8">
<form class="space-y-3">
<label class="block">Email address</label>
<input type="email" class="border border-gray-300 rounded p-2 w-full" placeholder="you@example.com">
<p class="text-red-500">Please enter a valid email</p>
</form>
</div>
Pass
<div class="p-8 flex flex-col w-full gap-8">
<form class="space-y-3">
<label class="block">Email address</label>
<input type="email" class="border border-red-500 rounded p-2 w-full" placeholder="you@example.com" aria-invalid="true">
<p class="flex items-center gap-2 text-red-600">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
Error: Please enter a valid email address.
</p>
</form>
</div>Link Identification by Color Alone
Fail
<div class="p-8 flex flex-col w-full gap-8">
<p>For details, see our <a href="#" class="text-blue-600 !no-underline">privacy policy</a>.</p>
</div>For details, see our privacy policy.
Pass
<div class="p-8 flex flex-col w-full gap-8">
<p>
For details, see our
<a href="#" class="text-blue-600 underline hover:text-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-300">
privacy policy
</a>.
</p>
</div>For details, see our privacy policy .
Quick Checklist
- Is color the only way meaning or status is shown?
- Do links have an underline or another visual cue?
- Are error states also described by text or icons?
- Are charts or graphs using patterns or labels, not color alone?