Guides › Accessibility
Writing content everyone can read
Accessibility isn’t only code. A page can pass every automatic check and still shut people out with dense sentences, social posts in “bold” Unicode that screen readers spell out letter by letter, captions too fast to read, or a chart whose lines differ only by red and green. These checks are for the words, captions and pictures themselves, and run in your browser.
1. Check the reading level
Paste the text into Text Statistics. Under readability, Reading age averages five formulas; public information is usually aimed at a reading age of 9 to 11 (most UK and US government guidance), and anything well above 14 will lose a lot of readers. The averages show where the problem is: long Words per sentence (aim for under 20) or long words. Split sentences at “and” and “which”, swap long words for short ones, and paste it again.
The formulas were made for English prose: treat lists, code and other languages with care.
For emphasis, use the platform’s real bold or italics. The “bold” and “italic” letters that text stylers make for social posts are different Unicode characters: screen readers spell them out letter by letter or skip them, and search can’t find them.
2. Check caption timing
Captions help deaf viewers, people watching with the sound off and anyone reading in a second language, but only if they can be read in time. Open the SRT or WebVTT file in the Caption Checker. The usual limits are about 17 Characters per second for adults (13 to 15 for children), 42 Characters per line and 2 Lines per cue. Each problem names the cue: split long cues in your caption editor, or lengthen them where there’s a gap. If the captions drift out of step with the video, Shift or Stretch fixes the timing.
3. Colours that everyone can tell apart
For text, check each colour pair in the Contrast Checker: body text needs at least 4.5:1 for WCAG AA, large text and the lines of charts and icons 3:1. When a pair fails, Nearest passing text colours gives the closest colour that passes, so you keep the look.
For charts, maps and diagrams, take a screenshot and open it in the Colour Blindness Simulator with Every kind. If two lines or areas look the same in any view, add a second difference that doesn’t rely on colour: labels on the lines, dashed and solid lines, or patterns. About one man in twelve has red–green colour blindness, so this isn’t an edge case.
Then the page itself
For headings, link text, picture descriptions and keyboard use on a web page, follow Is my web page accessible?
All 62 guides, grouped by what they help with.
Saved you a few minutes? Say thanks with a coffee.
Something wrong or unclear in this guide? Report it or suggest a guide.