Readable body text: measure, line height and contrast

What it is

Measure is the length of a line in characters. Leading (line height) is the distance from one baseline to the next. Contrast ratio is the luminance relationship between text and its background. WCAG 2.2 gives numbers for all three. Criterion 1.4.8 Visual Presentation (AAA) lists, for blocks of text: width no more than 80 characters or glyphs (40 for CJK), text not justified, line spacing at least space-and-a-half within paragraphs with paragraph spacing at least 1.5 times larger than the line spacing, and text resizable to 200 % without horizontal scrolling. Criterion 1.4.12 Text Spacing (AA) requires that no content or function is lost when the user overrides line height to at least 1.5 times the font size, paragraph spacing to 2 times, letter spacing to 0.12 times and word spacing to 0.16 times. Criterion 1.4.3 Contrast (AA) requires 4.5:1 for text and 3:1 for large text, which the document defines as roughly 18 point, or 14 point bold.

Why it matters

Overlong lines make the eye lose its place on the return sweep; cramped leading makes lines merge; low contrast is unreadable in sunlight and for anyone with reduced vision. These are the failures that most often make otherwise well-structured content unpleasant to read, and they are cheap to fix.

How to apply

• Constrain the text column with max-width in ch units (for example max-width: 65ch). One ch is the advance width of the font's 0 glyph, so the limit scales with the font; in a proportional face a line holds more characters than its ch value, so count a sample line against the 80-character ceiling instead of assuming it.
• Set line-height as a unitless number (1.5 or more for body text, less for large headings) so it scales with the font; increase it for long lines and for fonts with tall x-heights.
• Use rem for font sizes and em/rem for spacing so browser zoom and user font-size settings work; avoid fixed pixel heights on text containers so re-spaced text does not overflow.
• Check every text/background pair against 4.5:1, including placeholder text, text over images and both colour schemes; large headings may use 3:1.
• Left-align (start-align) body text; justification without hyphenation produces rivers of white space, and 1.4.8 lists non-justified text explicitly.

Pitfalls

Thin font weights lose contrast on screens even when the colour ratio passes. line-height in px does not scale with text. Truncating with text-overflow: ellipsis hides content when users enlarge spacing. Contrast tools measure colour only; a busy background image needs a solid or blurred backdrop behind text.