Around 8% of men and 0.5% of women have some form of color vision deficiency. That is roughly 1 in 12 male users looking at your dashboard right now. If the only way to tell "revenue up" from "revenue down" is green versus red, those users are guessing.
The fix is not to remove color. Color still helps the majority. The fix is to never let color do the job alone. Pair it with shape, pattern, label, or position so the meaning survives even when the hue disappears. This guide covers practical techniques for line charts, bar charts, pie charts, maps, and status indicators — with code you can drop into D3, Chart.js, or plain SVG.
Google Maps stopped relying on red/green pins for traffic. They shifted to a red-yellow-green gradient with distinct lightness steps, and added line thickness changes on routes. A deuteranopic user can still distinguish heavy traffic from light traffic by brightness alone. Google reported a 23% improvement in correct route selection among colorblind beta testers after the redesign.
Stripe's dashboard uses shape + color for status indicators. A successful payment gets a green dot AND a checkmark icon. A failed payment gets a red dot AND an X icon. Even in grayscale, the shapes communicate status instantly. Their accessibility audit in 2024 showed zero support tickets from colorblind users about payment status confusion — down from an average of 40/month before the redesign.
The Financial Times rebuilt their chart palette around lightness separation. Instead of picking "pretty" colors that happen to share similar luminance values, they chose series colors where each one has a distinct lightness level. A protanopia simulation of their charts still shows clearly separated lines because the brightness differences carry the distinction.
Power BI added texture fills as a first-class option in 2024. Bar charts can now use hatching, dots, diagonal lines, and solid fills — making bars distinguishable without any color perception at all. Microsoft's internal testing showed comprehension scores rose from 64% to 91% among participants with deuteranopia.
| Technique | Works for | Fails when | | --- | --- | --- | | Lightness separation | All CVD types | Colors share the same luminance | | Pattern fills | All CVD types, grayscale printing | Too many series (>6 patterns get noisy) | | Direct labels | Everyone | Chart is too dense for label placement | | Shape markers | Line charts, scatter plots | Markers overlap at high density | | Redundant encoding (size + color) | Bubble charts, maps | Size differences are too subtle |
Google Maps stopped relying on red/green pins for traffic. They shifted to a red-yellow-green gradient with distinct lightness steps, and added line thickness changes on routes. A deuteranopic user can still distinguish heavy traffic from light traffic by brightness alone. Google reported a 23% improvement in correct route selection among colorblind beta testers after the redesign.
Stripe's dashboard uses shape + color for status indicators. A successful payment gets a green dot AND a checkmark icon. A failed payment gets a red dot AND an X icon. Even in grayscale, the shapes communicate status instantly. Their accessibility audit in 2024 showed zero support tickets from colorblind users about payment status confusion — down from an average of 40/month before the redesign.
The Financial Times rebuilt their chart palette around lightness separation. Instead of picking "pretty" colors that happen to share similar luminance values, they chose series colors where each one has a distinct lightness level. A protanopia simulation of their charts still shows clearly separated lines because the brightness differences carry the distinction.
Power BI added texture fills as a first-class option in 2024. Bar charts can now use hatching, dots, diagonal lines, and solid fills — making bars distinguishable without any color perception at all. Microsoft's internal testing showed comprehension scores rose from 64% to 91% among participants with deuteranopia.
| Technique | Works for | Fails when | | --- | --- | --- | | Lightness separation | All CVD types | Colors share the same luminance | | Pattern fills | All CVD types, grayscale printing | Too many series (>6 patterns get noisy) | | Direct labels | Everyone | Chart is too dense for label placement | | Shape markers | Line charts, scatter plots | Markers overlap at high density | | Redundant encoding (size + color) | Bubble charts, maps | Size differences are too subtle |
Google Maps stopped relying on red/green pins for traffic. They shifted to a red-yellow-green gradient with distinct lightness steps, and added line thickness changes on routes. A deuteranopic user can still distinguish heavy traffic from light traffic by brightness alone. Google reported a 23% improvement in correct route selection among colorblind beta testers after the redesign.
Stripe's dashboard uses shape + color for status indicators. A successful payment gets a green dot AND a checkmark icon. A failed payment gets a red dot AND an X icon. Even in grayscale, the shapes communicate status instantly. Their accessibility audit in 2024 showed zero support tickets from colorblind users about payment status confusion — down from an average of 40/month before the redesign.
The Financial Times rebuilt their chart palette around lightness separation. Instead of picking "pretty" colors that happen to share similar luminance values, they chose series colors where each one has a distinct lightness level. A protanopia simulation of their charts still shows clearly separated lines because the brightness differences carry the distinction.
Power BI added texture fills as a first-class option in 2024. Bar charts can now use hatching, dots, diagonal lines, and solid fills — making bars distinguishable without any color perception at all. Microsoft's internal testing showed comprehension scores rose from 64% to 91% among participants with deuteranopia.
| Technique | Works for | Fails when | | --- | --- | --- | | Lightness separation | All CVD types | Colors share the same luminance | | Pattern fills | All CVD types, grayscale printing | Too many series (>6 patterns get noisy) | | Direct labels | Everyone | Chart is too dense for label placement | | Shape markers | Line charts, scatter plots | Markers overlap at high density | | Redundant encoding (size + color) | Bubble charts, maps | Size differences are too subtle |
/* Accessible chart palette — each color has distinct lightness */
const accessiblePalette = [
{ hex: '#1B4F72', label: 'Deep Blue', L: 35 },
{ hex: '#E67E22', label: 'Orange', L: 62 },
{ hex: '#27AE60', label: 'Green', L: 55 },
{ hex: '#8E44AD', label: 'Purple', L: 40 },
{ hex: '#F1C40F', label: 'Yellow', L: 80 },
{ hex: '#E74C3C', label: 'Red', L: 48 },
];
/* SVG pattern definitions for print/grayscale fallback */
function createPatterns(svg: d3.Selection<SVGSVGElement, unknown, null, undefined>) {
const defs = svg.append('defs');
const patterns = [
{ id: 'dots', d: 'M2,2 h1 v1 h-1 Z', size: 6 },
{ id: 'diagonal', d: 'M0,6 L6,0', size: 6 },
{ id: 'cross', d: 'M3,0 V6 M0,3 H6', size: 6 },
{ id: 'horizontal',d: 'M0,3 H6', size: 6 },
{ id: 'vertical', d: 'M3,0 V6', size: 6 },
{ id: 'zigzag', d: 'M0,3 L3,0 L6,3', size: 6 },
];
patterns.forEach(p => {
defs.append('pattern')
.attr('id', p.id).attr('width', p.size).attr('height', p.size)
.attr('patternUnits', 'userSpaceOnUse')
.append('path').attr('d', p.d)
.attr('stroke', '#333').attr('stroke-width', 1).attr('fill', 'none');
});
}
/* Direct labeling helper — eliminates legend-only color decoding */
function addDirectLabels(
chart: d3.Selection<SVGGElement, unknown, null, undefined>,
series: { name: string; lastX: number; lastY: number; color: string }[]
) {
series.forEach(s => {
chart.append('text')
.attr('x', s.lastX + 8)
.attr('y', s.lastY + 4)
.attr('fill', s.color)
.attr('font-size', '12px')
.attr('font-weight', '600')
.text(s.name);
});
}复制粘贴到项目即可使用。
Google Maps stopped relying on red/green pins for traffic. They shifted to a red-yellow-green gradient with distinct lightness steps, and added line thickness changes on routes. A deuteranopic user can still distinguish heavy traffic from light traffic by brightness alone. Google reported a 23% improvement in correct route selection among colorblind beta testers after the redesign.
Stripe's dashboard uses shape + color for status indicators. A successful payment gets a green dot AND a checkmark icon. A failed payment gets a red dot AND an X icon. Even in grayscale, the shapes communicate status instantly. Their accessibility audit in 2024 showed zero support tickets from colorblind users about payment status confusion — down from an average of 40/month before the redesign.
The Financial Times rebuilt their chart palette around lightness separation. Instead of picking "pretty" colors that happen to share similar luminance values, they chose series colors where each one has a distinct lightness level. A protanopia simulation of their charts still shows clearly separated lines because the brightness differences carry the distinction.
Power BI added texture fills as a first-class option in 2024. Bar charts can now use hatching, dots, diagonal lines, and solid fills — making bars distinguishable without any color perception at all. Microsoft's internal testing showed comprehension scores rose from 64% to 91% among participants with deuteranopia.
| Technique | Works for | Fails when | | --- | --- | --- | | Lightness separation | All CVD types | Colors share the same luminance | | Pattern fills | All CVD types, grayscale printing | Too many series (>6 patterns get noisy) | | Direct labels | Everyone | Chart is too dense for label placement | | Shape markers | Line charts, scatter plots | Markers overlap at high density | | Redundant encoding (size + color) | Bubble charts, maps | Size differences are too subtle |
Google Maps stopped relying on red/green pins for traffic. They shifted to a red-yellow-green gradient with distinct lightness steps, and added line thickness changes on routes. A deuteranopic user can still distinguish heavy traffic from light traffic by brightness alone. Google reported a 23% improvement in correct route selection among colorblind beta testers after the redesign.
Stripe's dashboard uses shape + color for status indicators. A successful payment gets a green dot AND a checkmark icon. A failed payment gets a red dot AND an X icon. Even in grayscale, the shapes communicate status instantly. Their accessibility audit in 2024 showed zero support tickets from colorblind users about payment status confusion — down from an average of 40/month before the redesign.
The Financial Times rebuilt their chart palette around lightness separation. Instead of picking "pretty" colors that happen to share similar luminance values, they chose series colors where each one has a distinct lightness level. A protanopia simulation of their charts still shows clearly separated lines because the brightness differences carry the distinction.
Power BI added texture fills as a first-class option in 2024. Bar charts can now use hatching, dots, diagonal lines, and solid fills — making bars distinguishable without any color perception at all. Microsoft's internal testing showed comprehension scores rose from 64% to 91% among participants with deuteranopia.
| Technique | Works for | Fails when | | --- | --- | --- | | Lightness separation | All CVD types | Colors share the same luminance | | Pattern fills | All CVD types, grayscale printing | Too many series (>6 patterns get noisy) | | Direct labels | Everyone | Chart is too dense for label placement | | Shape markers | Line charts, scatter plots | Markers overlap at high density | | Redundant encoding (size + color) | Bubble charts, maps | Size differences are too subtle |
用这些免费工具实操你学到的知识：