liveBook · Manning

Contrast ratio

As explained in D3.js in Action, Third Edition

A contrast ratio is a numerical measure of the relative luminance difference between foreground and background colors.

Contrast ratio measures the relative luminance difference between foreground and background colors, helping make charts and interfaces readable and accessible. section 10.2.2

Use these thresholds when checking a visualization:

  • Require at least 3:1 contrast for geometric shapes and large text against the background. section 10.2.2
  • Require at least 4.5:1 contrast for regular text. section 10.2.2
  • Check text with the WCAG Color contrast checker and manually enter geometric colors into the WebAIM contrast checker. section 10.2.2

Improving a scatterplot

A chart’s text and active button reached 12.91:1, while inactive-button text reached only 3.84:1. Changing the background to white and selecting a more accessible categorical palette improved the contrast of conservation-status circles. Dark strokes around legend circles provided another contrast improvement. section 10.2.2

How D3.js in Action, Third Edition covers it

How deep it goes
Defines numerical thresholds, names verification tools, and demonstrates palette revision without deriving the underlying luminance calculation.
Examples
Uses scatterplot circles, legends, buttons, a white background, and revised categorical colors to demonstrate passing and failing ratios.
What it assumes
Assumes basic foreground, background, text, and geometric-shape concepts while teaching accessibility thresholds from the beginning.
What you can do after
Operate the WCAG Color contrast checker and WebAIM checker to evaluate colors and revise inaccessible visualization elements.
How it connects
Connects WCAG contrast thresholds with accessibility, color palettes, color blindness, and double encoding.
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

Also explained in

Compare how 3 books explain contrast ratio →

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.