Color Blind Safe Color Palettes

Designing for Color Blindness

Approximately 8% of males and 0.5% of females have some form of color vision deficiency (CVD). While WCAG contrast ratios primarily address luminance contrast, designing for color blindness requires considering how different color combinations appear to users with CVD.

Types of Color Vision Deficiency

Type	Prevalence	Affected Colors
Deuteranopia (green-blind)	1% of males	Red-green confusion
Deuteranomaly (green-weak)	5% of males	Red-green reduced
Protanopia (red-blind)	1% of males	Red-green confusion
Protanomaly (red-weak)	1% of males	Red-green reduced
Tritanopia (blue-blind)	0.003%	Blue-yellow confusion

Color Combinations to Avoid

/* AVOID these pairs for conveying meaning */
/* Red + Green (most common issue) */
.error { color: #ef4444; }    /* Looks brown to deutan/protan */
.success { color: #22c55e; }  /* Looks brown/yellow to deutan/protan */

/* Green + Orange */
.info { color: #f97316; }     /* Similar appearance to green for deutan */
.success { color: #22c55e; }

/* Blue + Purple */
.link { color: #6366f1; }     /* Hard to distinguish for tritan */
.visited { color: #a855f7; }

Safe Color Palettes

These combinations work for all common types of CVD:

/* Blue + Orange (safe for all types) */
.primary { color: #2563eb; }
.accent { color: #ea580c; }

/* Blue + Red (safe for most types) */
.info { color: #2563eb; }
.error { color: #dc2626; }

/* Dark blue + Yellow (high contrast, CVD safe) */
.emphasis { color: #1e3a8a; }
.highlight { background: #fef08a; }

Beyond Color: Redundant Coding

WCAG 1.4.1 (Use of Color) requires that color is not the sole means of conveying information. Always pair color with another visual indicator:

/* Error state: color + icon + text */
.input-error {
  border-color: #ef4444;
  border-width: 2px;            /* Thicker border */
}
.input-error::before {
  content: "!";                  /* Icon indicator */
}
.error-message {
  color: #dc2626;
  /* Include descriptive text: "This field is required" */
}

/* Chart data: color + pattern */
.chart-series-1 { fill: #2563eb; } /* Solid */
.chart-series-2 { fill: #ea580c; stroke-dasharray: 5; } /* Dashed */
.chart-series-3 { fill: #16a34a; stroke-dasharray: 2 4; } /* Dotted */

Testing Recommendation

Use browser DevTools' rendering panel to simulate color vision deficiencies. Chrome DevTools offers simulations for protanopia, deuteranopia, tritanopia, and achromatopsia under the Rendering tab.