Color Blind Friendly Design: How to Make Your Website Accessible to All

Understanding Color Blindness

Color blindness, more accurately called color vision deficiency (CVD), affects approximately 1 in 12 men and 1 in 200 women worldwide. That translates to roughly 300 million people globally who perceive colors differently than the majority. For any website with meaningful traffic, color blind users are already part of your audience, whether your design accounts for them or not.

Color blind friendly design is not about eliminating color from your website. It is about ensuring that color is never the sole means of conveying information. WCAG Success Criterion 1.4.1 (Use of Color) makes this a Level A requirement, the most basic tier of accessibility compliance.

Types of Color Blindness

Understanding the different types of color vision deficiency helps you make better design decisions.

Red-Green Color Blindness (Most Common)

Red-green deficiency accounts for roughly 99% of all color blindness cases. It has two subtypes:

Protanopia / Protanomaly — Reduced sensitivity to red light. Reds appear darker, and red-green distinctions are lost. Affects about 2% of men.
Deuteranopia / Deuteranomaly — Reduced sensitivity to green light. The most common form overall, affecting about 6% of men. Greens and reds blend together.

People with red-green deficiency struggle to distinguish between red, green, brown, and orange. A traffic light is distinguishable mainly by position (top, middle, bottom) rather than color.

Blue-Yellow Color Blindness

Tritanopia / Tritanomaly — Reduced sensitivity to blue light. Blues appear greenish and yellows appear pinkish or light gray. This is rare, affecting less than 0.01% of the population.

Complete Color Blindness

Achromatopsia — Total inability to perceive color. The world appears in shades of gray. Extremely rare, affecting roughly 1 in 33,000 people.

Never Use Color Alone to Convey Meaning

This is the single most important rule. Whenever you use color to communicate something, add a second visual indicator:

Form validation: Do not just turn a field border red for errors. Add an error icon and error text message.
Status indicators: Do not rely solely on green for success and red for failure. Add labels like “Approved” or “Rejected,” or use icons like checkmarks and crosses.
Charts and graphs: Do not differentiate data series only by color. Use patterns, labels, or different shapes for data points.
Links in body text: Do not rely solely on color to distinguish links from surrounding text. Underline links or add another visual differentiation.

Certain color combinations are inherently problematic. Avoid these pairings:

Red and green — The most dangerous combination, indistinguishable for the majority of color blind users.
Green and brown — These often appear identical with red-green deficiency.
Blue and purple — Can be difficult for some types of color blindness.
Light green and yellow — Hard to separate for deuteranopia.

Safer color combinations include:

Blue and orange — Distinguishable across almost all types of color blindness.
Blue and red — Distinct for most users, though ensure sufficient value contrast.
Dark blue and yellow — High contrast and color distinction.
Black and white with a single accent color — The safest foundation.

Use Sufficient Value Contrast

Even when two colors appear different in hue, they can have similar lightness values. Color blind users often rely on lightness differences more than hue differences. Ensure that any two colors used next to each other have different brightness levels, not just different hues.

Test this by converting your design to grayscale. If two elements become indistinguishable in grayscale, they need more value contrast regardless of their hue difference.

Add Texture and Patterns

For data visualizations, complement color with patterns:

Use hatching, dots, stripes, or crosshatch patterns in chart fills.
Add direct labels to chart elements rather than relying on color-coded legends.
Use different line styles (solid, dashed, dotted) for line charts.

Use Icons and Labels

Pair every color-coded element with a text label or icon:

Traffic light status indicators should include “Active,” “Warning,” and “Inactive” labels.
Tags and badges should display their category name, not just a color dot.
Alert banners should include an icon (info circle, warning triangle, error cross) alongside the color.

Buttons and Interactive States

Ensure hover, active, focused, and disabled button states are distinguishable without color:

Hover: Change background shade and add an underline or border.
Disabled: Reduce opacity and add a “not-allowed” cursor in addition to graying out.
Active/Selected: Add a border, underline, or weight change alongside the color change.

Data Tables

Tables that use background color to highlight rows or cells (such as red for overdue items) should include a status column with text labels. A table showing green rows for “paid” and red rows for “overdue” is useless for red-green color blind users without text labels in a status column.

Maps and Geographic Data

Choropleth maps that use color gradients are notoriously difficult for color blind users. Use a single-hue gradient (light blue to dark blue) rather than a multi-hue gradient (green to yellow to red). Add value labels directly on the map regions when possible.

Form Design

Error and success states in forms should combine color with:

An icon (checkmark for valid, exclamation mark for error).
Descriptive text explaining what went wrong or confirming success.
A change in border weight or style, not just border color.

Testing Your Design for Color Blindness

Simulate Color Blindness

Several tools let you preview how your site appears to users with different types of color vision deficiency:

Chrome DevTools — Open DevTools, go to Rendering, and use the “Emulate vision deficiencies” dropdown to simulate protanopia, deuteranopia, tritanopia, and achromatopsia.
Firefox — The Accessibility panel includes color blindness simulation.
Figma — Plugins like “Color Blind” simulate CVD directly on your design files.

Check Contrast Ratios

Use the wcagkit contrast checker to verify that your color combinations meet WCAG contrast requirements. Poor contrast affects everyone, but it disproportionately impacts color blind users who may already struggle to distinguish certain hues.

The Grayscale Test

Convert your entire page to grayscale (most operating systems have an accessibility setting for this). Navigate through the site and check:

Can you still understand the navigation?
Are errors and success states clearly different?
Can you read and interpret charts and graphs?
Are links distinguishable from surrounding text?

If anything becomes unclear in grayscale, it needs a non-color indicator.

User Testing

If possible, include people with color vision deficiency in your usability testing sessions. Simulation tools approximate the experience, but real user feedback reveals issues that simulations miss, especially around cognitive load and task completion speed.

No information is conveyed by color alone.
Error states use icons and text alongside color.
Charts use patterns, labels, or shapes in addition to color.
Links are underlined or otherwise visually distinct beyond color.
Color combinations avoid red-green pairings.
All adjacent colors have sufficient lightness contrast.
The design remains understandable in grayscale.
Interactive states are distinguishable without color.

Conclusion

Color blind friendly design benefits far more people than just those with diagnosed color vision deficiency. It improves usability in low-light conditions, on poor-quality displays, and for users experiencing screen glare. The core principle is simple: use color to enhance, never as the only signal.

Test your current color palette with the wcagkit contrast checker to ensure your combinations meet WCAG requirements, then run the alt text checker and heading analyzer for a broader accessibility review of your site.