How deeply does Math for Web Design cover WCAG?

Explains AA and AAA thresholds, contrast-ratio arithmetic, sRGB linearization, and weighted luminance calculation.

WCAG

The Web Content Accessibility Guidelines (WCAG) are an international standard for making web content accessible to people with disabilities.

WCAG makes readable web text measurable: calculate the contrast ratio between foreground and background colors instead of relying on visual judgment. section 7.4

Choose the applicable minimum ratio:

Normal text below 18px needs 4.5:1 for AA or 7:1 for AAA. section 7.4.1
Large text at least 18px, or bold text at least 14px, needs 3:1 for AA or 4.5:1 for AAA. section 7.4.1
Compute contrast as CR = (L1 + 0.05) / (L2 + 0.05), using the lighter luminance first; results range from 1:1 to 21:1. section 7.4.2

To obtain luminance, normalize sRGB channels to 0–1, linearize each with the piecewise gamma formula, then calculate L = 0.2126Rᵢ + 0.7152Gᵢ + 0.0722Bᵢ. The weighting reflects greater sensitivity to green than blue. section 7.4.3

Blue text on white

Pure blue (#0000FF) has relative luminance 0.0722. Against white with luminance 1, the contrast ratio is 8.59:1, exceeding the AAA threshold for normal text. section 7.4.3 section 7.4.1

CR = (1 + 0.05) / (0.0722 + 0.05) = 1.05 / 0.1222 = 8.59

Verify the blue-on-white result by evaluating the contrast formula with the two luminance values. section 7.4.3

How Math for Web Design covers it

liveBook manning.com

Read Math for Web Design on liveBook Get the book at manning.com

Also explained in

liveBook manning.com

Everyday Data VisualizationThe Web Content Accessibility Guidelines, a W3C standard for making web content accessible to people with disabilities and impairments.
liveBook manning.com

D3.js in Action, Third EditionThe Web Content Accessibility Guidelines are an international standard of recommendations for making web content accessible to people with disabilities.

Compare how 3 books explain WCAG →

Related concepts

WCAG success criterionhas part · A WCAG success criterion is a testable requirement for satisfying a Web Content Accessibility Guidelines guideline at a specified conformance level.
contrast ratiouses · A contrast ratio is the numerical ratio of the higher relative luminance to the lower relative luminance of two colors.
line-height propertyconfigures · The CSS line-height property specifies the height of each line box and thereby controls the vertical spacing of text lines.

This explainer was generated by Manning's knowledge graph from the text of Math for Web Design. The section links point to the parts of the book it draws on.