Readable body text: line length, line spacing and contrast

What it is

Line length (measure) is the number of characters per line. Line spacing (leading) is the distance from baseline to baseline. The contrast ratio is the relationship between the luminance of text and that of its background. WCAG 2.2 gives numbers for all three. Success Criterion 1.4.8 "Visual Presentation" (AAA) requires for blocks of text: no more than 80 characters per line (40 for CJK scripts), no justified text, line spacing of at least 1.5 within paragraphs, paragraph spacing at least 1.5 times larger than the line spacing, and enlargement to 200 percent without horizontal scrolling. Criterion 1.4.12 "Text Spacing" (AA) requires that no content or functionality is lost when users set line spacing 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 (Minimum)" (AA) requires 4.5:1 for text and 3:1 for large text, which the document defines as about 18 point, or 14 point bold.

Why it matters

Very long lines make the eye lose its place when it returns to the start of the next line; tight leading makes lines blur together; weak contrast is unreadable in sunlight and for anyone with reduced vision. These are common mistakes that make even well-structured content unpleasant to read, and they are cheap to fix.

How to apply

• Limit the text column with max-width in ch (for example max-width: 65ch). One ch is the advance width of the digit 0 in the font, so the limit scales with the font; in a proportional font a line usually holds more characters than its ch value, so count a sample line against the 80-character limit instead of assuming.
• Set line-height as a unitless number (1.5 or more for body text, less for large headings) so that it scales with the font; increase it for long lines and for fonts with a large x-height.
• Use rem for font sizes and em/rem for spacing so that browser zoom and font size settings take effect; do not use fixed pixel heights on text containers, so that re-spaced text does not overflow.
• Check every text/background pair against 4.5:1, including placeholder text, text over images and both color schemes; large headings may use 3:1.
• Align body text to the left (the start of the line); justified text without hyphenation creates rivers of white space, and 1.4.8 explicitly calls for avoiding justified text.

Pitfalls

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