Readability & contrast

This module turns typography and color from subjective page polish into a resilient storefront system. The outcome is text that remains perceivable and usable across component states, viewport sizes, zoom, and user-applied spacing.

Contrast and layout belong together because a passing color pair can still sit inside clipped, overlong, or non-reflowing content. WCAG 2.2 defines minimum text contrast and separate requirements for resize, reflow, and tolerance of text-spacing changes.¹ Its large-text definition uses at least 18 point regular, 14 point bold, or the equivalent scale for Chinese, Japanese, and Korean fonts. Reflow is tested at 320 CSS pixels wide for vertically scrolling content or 256 CSS pixels high for horizontally scrolling content, subject to defined exceptions.¹

Work at system level

Inventory typography tokens, color schemes, and component states before fixing pages. Test body text, headings, prices, labels, placeholders, errors, links, controls, badges, overlays, and text on imagery. Include hover, selected, disabled, sold-out, focus, and alternate-scheme states.

Then check how those styles behave in representative product descriptions, forms, policies, tables, drawers, and modals. Avoid declaring one universal line-length value. Choose a workable content measure for the actual script, typeface, size, content, and viewport, then verify it in context.

Module diagnostic

Select one template and ask:

1. Do all text and background pairs meet the applicable contrast criterion?
2. Does text remain available at 200 percent resize?
3. Does the layout reflow at the applicable WCAG width or height without losing information or function?
4. Can user-applied text spacing be tolerated?
5. Do long translations, dynamic prices, and errors remain readable?
6. Are repeated failures caused by a shared token or component?

Assignment

Create a state matrix for one high-traffic template. Record each pair and text style, run the four checks above, and assign repeated failures to the owning token or component rather than patching instances.

Evidence and further reading

1. [1]"Web Content Accessibility Guidelines (WCAG) 2.2," W3C, https://www.w3.org/TR/WCAG22/. Supports contrast, resize, reflow, and text-spacing criteria. Accessed August 23, 2026.