Visual Presentation
This one bundles five things about how a block of text is presented, and a block of text is anything more than one sentence. The reader can choose the foreground and background colors. Lines run no more than 80 characters, or 40 for Chinese, Japanese and Korean. Text is not justified to both margins. Line spacing is at least one and a half, with paragraph spacing at least one and a half times that again. And text scales to 200 percent without the reader having to scroll sideways to finish a line. What the rule asks for is that a mechanism exists to reach those five outcomes, not that your content ships with those values. The browser can be that mechanism, and often already is.
Why it matters
Each of the five is a documented reading barrier on its own. Justified text opens rivers of white space that readers lose their place in, long lines make the start of the next one hard to find, tight leading runs the lines together, and fixed colors defeat somebody who reads better on a tinted background than on white. That last one surprises people, because the combination that works for a particular reader can have lower contrast than the standard demands elsewhere. W3C allows exactly that, as long as a mechanism can put the required values back.
Who this rule protects
People with dyslexia, low vision and other reading difficulties benefit most, and W3C attributes the justification problem specifically to certain cognitive disabilities.
How to check it yourself
- Count the characters on a full line of body text, and use 40 rather than 80 for Chinese, Japanese and Korean.
- Check whether text is justified to both margins, and where it is, look for the control that removes the justification. This is the one item with a documented failure attached, and it is also the one item with a documented control that answers the failure.
- Check that your stylesheet does not fight the browser's own controls for color, size and spacing.
- Zoom to 200 percent on a maximized desktop window and check you can read a line without scrolling back and forth. Some sideways scrolling is fine. Scrolling within a line is not.
- Check line spacing at one and a half within paragraphs, and the gap between paragraphs at one and a half times that.
Failures we see most often
- Body copy runs fully justified with nothing anywhere on the page that turns the justification off.
- A stylesheet sets a text color and no background color, which fails this rule and both contrast rules with it.
- Line measures run past 100 characters on a wide screen and nothing, in the page or in the browser, lets the reader bring them in.
- A fixed-width layout forces the reader to scroll sideways along every line at 200 percent zoom.
Who this one is for
Read from this rule's own note above, so the grouping and the note cannot disagree.
- Low visionpeople who can see the screen but not easily
- Cognitive and learningpeople for whom the difficulty is understanding, remembering, or staying with it
How to fix it
- Cap the measure with a max-width set in characters rather than in pixels.
- Set line height to at least 1.5 for body text, and paragraph spacing to at least 1.5 times that.
- Do not justify text if you can avoid it, and align to the direction the language reads in rather than always to the left. Where a design genuinely needs justification, put a control near the top of the page that removes it, which is the route W3C documents as sufficient.
- Leave colors unset for the main content where you can, which satisfies the color half at no cost, and never set one of foreground or background without the other.
Step-by-step fix guides (21)
- C12: Size text in percent so it scales
- C13: Use named font sizes that respect user defaults
- C14: Size text in em units, not pixels
- C19: Align text left or right, never justified
- C20: Cap line length with relative column widths
- C21: Give paragraphs breathing room with line spacing
- C23: Let main content follow user color settings
- C24: Size containers in percentages, not fixed pixels
- C25: Mark out page areas without hard-coding colors
- SCR34: Compute sizes so they scale with the text
- G146: Use liquid layouts that fit any window
- G148: Leave text colors default, or set both
- G156: Keep text recolorable by the user's browser
- G169: Align text to one side only
- G172: Let users switch off fully justified text
- G175: Let readers pick their own text colors
- G188: Offer a control that opens up line spacing
- G204: Do not block the browser's natural text reflow
- G206: Offer a layout without horizontal scrolling
Passes vs. fails
Passes
The same article runs left aligned, capped near 70 characters, at 1.6 line height, and reflows cleanly when the reader zooms.
Fails
A justified article runs 120 characters a line at 1.2 line height and breaks into sideways scrolling at 200 percent zoom.
In audits and lawsuits
This is Level AAA and the most misread criterion in the standard, including by us until this rewrite. Almost everybody states it as five requirements on the content. The normative text says a mechanism has to be available to achieve five outcomes, that content is not required to use those values, and that the mechanism may come from the browser rather than from you. Justification is where that gets argued, because W3C publishes both a failure for justified text and a sufficient technique for offering a control that removes the justification. The failure does not cancel the technique. Every failure W3C publishes carries the same qualification, that content can still satisfy the criterion where equivalent content or functionality meets the normative requirement, and a control near the top of the page that unjustifies the text is exactly that. So the honest reading is this. Author to the values, or ship the mechanism, and if you justify text then ship the control that undoes it. One more thing narrows the whole rule. Where a writing system does not use one of these presentation aspects, content in that writing system conforms without it.