Accessible Chart Colors with Tailwind CSS

Chart Accessibility Challenges

Charts rely heavily on color to distinguish data series. This fails for the 8% of men who are color blind. Accessible charts use a combination of color, pattern, direct labeling, and proper contrast.

Color-Blind-Safe Chart Palette

// Palette tested across all major color blindness types
const accessibleChartColors = [
  { name: 'Blue',    value: '#2563eb', tw: 'blue-600'   },
  { name: 'Orange',  value: '#ea580c', tw: 'orange-600' },
  { name: 'Teal',    value: '#0d9488', tw: 'teal-600'   },
  { name: 'Rose',    value: '#e11d48', tw: 'rose-600'   },
  { name: 'Amber',   value: '#d97706', tw: 'amber-600'  },
  { name: 'Violet',  value: '#7c3aed', tw: 'violet-600' },
];

// Each color has distinct luminance, not just hue

Beyond Color: Additional Cues

• Direct labels on chart segments instead of a separate legend
• Different patterns (stripes, dots, crosshatch) for each data series
• Tooltips that show values on hover for all users
• Data tables as an alternative view for screen reader users
• Line charts: Use different stroke styles (solid, dashed, dotted)

Implementing Accessible Legends

<div class="flex flex-wrap gap-4">
  <div class="flex items-center gap-2">
    <span class="w-4 h-4 rounded bg-blue-600 border-2 border-blue-800"></span>
    <span class="text-sm text-slate-700">Revenue ($48.2k)</span>
  </div>
  <div class="flex items-center gap-2">
    <span class="w-4 h-4 rounded bg-orange-600 border-2 border-orange-800"></span>
    <span class="text-sm text-slate-700">Expenses ($31.1k)</span>
  </div>
</div>
<!-- Include values in legend text for quick scanning -->