Contrast ratio
A contrast ratio is the numerical ratio of the higher relative luminance to the lower relative luminance of two colors.
D3.js in Action, Third Edition
A contrast ratio is a numerical measure of the relative luminance difference between foreground and background colors.
- How it is used
- Guides accessible color selection and verification for text, controls, geometric shapes, and visualization legends.
- 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 you can do after
- Operate the WCAG Color contrast checker and WebAIM checker to evaluate colors and revise inaccessible visualization elements.
Read how D3.js in Action, Third Edition explains contrast ratio →
Math for Web Design
A contrast ratio is a numerical comparison of the relative luminances of two colors, calculated with the higher luminance as the numerator.
- How it is used
- Checks text-and-background color pairs against WCAG accessibility thresholds instead of subjective readability judgments.
- How deep it goes
- Derives ratios from gamma-corrected relative luminance and implements calculation and compliance checks in JavaScript.
- Examples
- Contrasts blue against white and red, compares grays on white, and builds a hex-color calculator.
- What you can do after
- Apply it via JavaScript to calculate color-pair ratios and report AA or AAA compliance.
Everyday Data Visualization
A contrast ratio is a numeric comparison of the relative luminance of a lighter color with that of a darker color.
- How it is used
- Guides accessible color choices for text and data visualizations.
- How deep it goes
- Defines the formula and thresholds, but defers detailed luminance arithmetic to calculators.
- Examples
- Compares blue bars with light gray backgrounds and dark-gray borders.
- What you can do after
- Apply an accessible-colors calculator to check text, borders, and visualization elements.
Read how Everyday Data Visualization explains contrast ratio →
Related concepts
- WCAGused by · WCAG is a W3C standard providing testable recommendations and success criteria for making web content accessible to people with disabilities.
- brightnessmeasures · Brightness is the perceived or measured intensity or lightness of a color, image, visual stimulus, or light source.
- relative luminanceuses · Relative luminance is a normalized measure of a color’s apparent brightness calculated from the weighted contributions of its linearized red, green, and blue components.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.