Color blindness reduces the ability to distinguish some colors, shades, or brightness levels. A categorical palette can therefore make chart categories difficult to identify. section 10.2.2
Accessible visualizations should not communicate essential information through color alone. Double encoding pairs color with another channel, such as patterns or shapes. section 10.2.2 section 10.3
A practical pattern-based workflow is:
- Check the palette with a WCAG color-contrast checker and improve contrast against the background. section 10.2.2 section 10.3
- Append a defs element to the SVG, then create pattern tiles containing lines, dots, or other shapes. section 10.2.2 section 10.3
- Apply a status-specific pattern to every data mark and repeat the same encoding in the legend. section 10.2.2
Pattern-encoded scatterplot
Create an SVG pattern for each conservation status, then assign it with a status-to-pattern function: d3.selectAll(".cetacean").attr("fill", d => getPattern(d.status)). A horizontal-line pattern can be built from a white rectangle and an SVG line inside a repeated tile.
