liveBook · Manning

Accessible palette

As explained in D3.js in Action, Third Edition

An accessible color palette is a set of colors selected to maintain distinguishability and sufficient contrast for users with visual impairments.

An accessible palette uses colors with sufficient contrast and keeps categories distinguishable for people with visual impairments. A white background, darker colors, and dark shape strokes can improve contrast. section 10.2.2

Build an accessible palette by:

  • Checking at least a 3:1 contrast ratio between geometric shapes and their background. section 10.2.2

Conservation-status scatterplot

A scatterplot assigns each conservation status an accessible categorical color and a distinct SVG pattern. D3 applies patterns such as circles, horizontal lines, vertical lines, stars, and crosses to marks and legend symbols.

How D3.js in Action, Third Edition covers it

How deep it goes
Explains contrast checking, palette replacement, strokes, and D3 SVG-pattern implementation, while stopping short of broader accessibility standards.
Examples
Uses a conservation-status scatterplot, white background, dark circle strokes, contrast-checker feedback, and patterned marks.
What it assumes
Assumes basic chart and SVG concepts while demonstrating palette selection, contrast checking, and pattern construction through concrete visualization code.
What you can do after
Apply via D3.js and SVG by checking contrast, selecting categorical colors, and adding patterns to chart marks and legends.
How it connects
Connects contrast ratio, color blindness, categorical color palettes, double encoding, data visualization, and SVG patterns.
Cover of D3.js in Action, Third Edition
liveBookmanning.com
Read D3.js in Action, Third Edition on liveBook Get the book at manning.com

Related concepts

This explainer was generated by Manning's knowledge graph from the text of D3.js in Action, Third Edition. The section links point to the parts of the book it draws on.