Perceivable · 1.4 Distinguishable
For text blocks, a mechanism must let users pick text and background colors and get lines of at most 80 characters (40 for CJK), unjustified text, line spacing of at least 1.5 with paragraph spacing at least 1.5 times that, and 200 percent text resize without horizontal scrolling in a full-screen window.
Live demo
The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.
Compare how easy each story is to read. Then set the text to 200%, narrow the frame, or turn on the spacing control.
From Monday, the central library will stay open until 9 pm on weekdays and until 6 pm on Saturdays. The council says the change follows a survey in which more than 4,000 residents asked for evening access to study space and computers.
Staff numbers will rise by twelve to cover the longer day. The children's section will keep its current hours, and the cafe on the ground floor will close at 7 pm.
From Monday, the central library will stay open until 9 pm on weekdays and until 6 pm on Saturdays. The council says the change follows a survey in which more than 4,000 residents asked for evening access to study space and computers.
Staff numbers will rise by twelve to cover the longer day. The children's section will keep its current hours, and the cafe on the ground floor will close at 7 pm.
The tools follow the version you last used.
What happened
Why it passes
Lines stop at about 70 characters, the text is left aligned with even gaps, and the lines are well spaced. At 200% the text wraps, so each line fits on screen.
Why it fails
Lines run to well over 100 characters, justified with uneven gaps and tight spacing, so it is easy to lose your place. At 200% the fixed width needs sideways scrolling to read each line.
Examples
Five examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.
Fails
Live preview
.story p { text-align: justify;}Justified text stretches the gaps between words unevenly. People with dyslexia can lose their place in the channels of white space that run down the paragraph.
Passes
Live preview
.story { max-width: 32em; /* under 80 characters per line */}.story p { text-align: start;}Text aligned to its starting edge keeps even word spacing, and the column keeps lines under 80 characters while still narrowing with the window.
Fails
Live preview
.story { width: 1100px; line-height: 1.1;}.story p { margin: 0 0 0.25em;}The lines sit almost on top of each other and the paragraphs barely separate. The fixed 1100px width also forces sideways scrolling when the page is zoomed to 200%.
Passes
Live preview
.story { max-width: 32em; line-height: 1.5;}.story p { margin: 0 0 2.25em;}Line spacing is 1.5, and the space after each paragraph is 2.25em, 1.5 times the line spacing. The column shrinks with the window, so zoomed text wraps.
Passes
Live preview
<fieldset class="reading-colors"> <legend>Reading colors</legend> <label><input type="radio" name="scheme" value="default" checked> Site default</label> <label><input type="radio" name="scheme" value="cream"> Dark text on cream</label> <label><input type="radio" name="scheme" value="night"> Light text on black</label></fieldset>With a script that applies the choice, this lets readers pick the text and background colors of the article. Not overriding the browser's own color settings is another way to meet this part.
Why it matters
People with low vision, dyslexia or other reading and cognitive disabilities can set up text so it is easier to track and read, with shorter lines, more spacing or their own colors.
W3C: Understanding 1.4.8Level AAA
Level AAA is the highest level. It is not required for whole sites, but it is worth meeting where you can.
Where it is required
No law on this site requires Level AAA criteria for whole sites.
How to test
A few concrete steps. Automated tools find some failures; most need a person.
Common failures