WCAG 2.2 · Guideline 1.4 · Perceivable
Distinguishable
Content has to be easy to see and hear as it ships, with no adjustment needed.
The other three Perceivable guidelines ask you to supply something extra. This one asks that what you already publish be perceivable as it stands. That covers sound as well as sight, because pulling a voice out of background noise is the same job as pulling text off its background. Light-gray text on white, meaning carried by color alone, a layout that clips at 200% zoom, and audio that starts on its own all fail here. They fail for what they are, not for something they are missing.
Nine A/AA success criteria live here, out of 13, and that is the largest block of audited rules in any guideline. One of them, 1.4.3 Contrast, is the failure automated tools find on more home pages than any other. Four of the nine arrived in WCAG 2.1, so an owner working to a law that still names WCAG 2.0 has never been asked for reflow, non-text contrast, text spacing or hover behavior. And the guideline is a heading rather than a rule. You pass or fail the nine, one at a time.
- Rules
- 9
- Level A
- 2
- Level AA
- 7
- Human testing only
- 3
All 9 Distinguishable rules
- 1.4.1Level AUse of ColorColor cannot be the only visual thing telling you something.Human testing9 fixes
- 1.4.2Level AAudio ControlIf any audio on a page plays by itself for more than three seconds, you owe the user one of two things.Partly scannable5 fixes
- 1.4.3Level AAContrast (Minimum)Text needs a contrast ratio of at least 4.5:1 against its background.Scanner-detectable7 fixes
- 1.4.4Level AAResize TextText has to survive being enlarged to 200% without losing content or function, and without assistive technology.Partly scannable15 fixes
- 1.4.5Level AAImages of TextWhere the technology can produce the visual presentation you want, use real text rather than a picture of text.Human testing9 fixes
- 1.4.10Level AAReflowAt 320 CSS pixels wide, content has to work without scrolling in two directions at once.Partly scannable11 fixes
- 1.4.11Level AANon-text ContrastTwo things owe 3:1 against the colors next to them.Partly scannable6 fixes
- 1.4.12Level AAText SpacingSet line height to 1.5 times the font size, spacing after paragraphs to 2 times, letter spacing to 0.12 times and word spacing to 0.16 times.Partly scannable6 fixes
- 1.4.13Level AAContent on Hover or FocusContent that appears on hover or focus and then goes away has to satisfy three conditions.Human testing2 fixes
Level AAA in this guideline
4 enhanced criteria sit under 1.4. They are outside the level almost every law names, so our audits treat them as reference rather than scope. Some are still worth adopting, and the Level AAA hub says which.
- 1.4.6Level AAAContrast (Enhanced)Body text needs a contrast ratio of at least 7:1, and large text at least 4.5:1, up from 4.5:1 and 3:1 at Level AA.Not graded7 fixes
- 1.4.7Level AAALow or No Background AudioThis one covers prerecorded audio with no picture, so podcasts and audiobooks rather than video.Not graded1 fixes
- 1.4.8Level AAAVisual PresentationThis one bundles five things about how a block of text is presented, and a block of text is anything more than one sentence.Not graded21 fixes
- 1.4.9Level AAAImages of Text (No Exception)At Level AA you may use an image of text where the image can be visually customized to the reader's needs, and you may use one where the technology cannot achieve the presentation any other way.Not graded9 fixes
What goes wrong here
These are the failures we find repeatedly under 1.4, across sites of every size.
- Text sits below its contrast threshold, most often in placeholder text and low-emphasis captions. Body text needs 4.5 to 1, large text 3 to 1, and the states people forget are hover, focus and visited.
- Colour carries the meaning on its own. A red field border with no message beside it says nothing at all to somebody who cannot see red.
- Content is unreadable at 200 percent text size or reflows badly at 400 percent page zoom. Those are two separate rules, and a page can pass one and fail the other.
- Focus indicators and the borders of controls miss 3 to 1 against what sits next to them. Body text passes, the interface does not, and the failure only shows up when somebody tries to use it.
- Audio starts by itself, runs past three seconds, and offers no way to pause it, stop it, or turn it down separately from the system volume.
Who it affects
- People with low vision, who need enough contrast to read and enough flexibility to enlarge without losing content off the side of the screen.
- People with colour blindness, who cannot separate a red border from a green one. Anything that rests on that distinction is invisible to them.
- Older readers, whose contrast sensitivity declines gradually. Many never describe themselves as disabled and still cannot read grey on white.
- Anyone reading outdoors in bright light, who runs into a version of the same problem for a different reason.
How to work through it
- 1Measure contrast on body text first, then on placeholder, hover, focus and visited. Skip anything disabled. An inactive control carries no contrast requirement, so measuring one only produces a finding that does not exist.
- 2Screenshot the page in grayscale and look for anything that lost its meaning. This is a fast heuristic rather than a simulation of colour vision, so treat what it flags as a lead.
- 3Set text size to 200 percent with no other zoom and look for clipping, overlap and controls that disappear. Captions and images of text are excepted from this one.
- 4Then set the viewport to 320 CSS pixels wide, which is what 400 percent zoom on a 1280-pixel screen amounts to, and check that nothing needs scrolling in two directions at once. Content that genuinely needs a two-dimensional layout to be usable is excepted, and maps, complex diagrams and data tables are the usual examples.
- 5Apply the text spacing overrides together and confirm nothing clips: line height at 1.5 times the font size, paragraph spacing at 2 times, letter spacing at 0.12 and word spacing at 0.16. The rule is a survival test, not a house style.
- 6Trigger every tooltip and hover panel and check you can dismiss it, move the pointer onto it, and keep it open until you move away or dismiss it.
How the levels build
Level A covers two things. Meaning never rests on colour alone, and audio that starts by itself and runs past three seconds can be paused, stopped, or turned down on its own. Level AA carries most of the practical work of this guideline, and there is a lot of it: contrast at 4.5 to 1, text resize to 200 percent, reflow at 320 CSS pixels, non-text contrast at 3 to 1, text spacing overrides, content on hover or focus, images of text, and audio control. Nine criteria, which is the largest AA block in the standard. Level AAA raises text contrast to 7 to 1 and 4.5 to 1 for large text, sets a hard limit on background audio behind speech, and adds a visual presentation criterion offering readers control over line length, justification, line spacing and colour.
Other Perceivable guidelines
- 1.1Text AlternativesAnything that is not text needs words attached, because text can be read, spoken, or felt.
- 1.2Time-based MediaAudio and video need captions, transcripts, and description, because sound and picture do not reach everyone.
- 1.3AdaptableStructure has to live in the code, not only in the way the page looks.
Part of the Perceivable principle · browse by level: Level A · Level AA · or the full 55-rule library.
See how your site does against these rules.
An expert review plus a real blind screen-reader user, on up to 10 pages, every finding with its screenshot, criterion, and fix. $499, report in 5 business days.