Visual accessibility

Visual accessibility is the part of accessibility designers control most directly. Many of the most common accessibility failures on the web are visual, and most are easy to prevent at the design stage. This lesson focuses on what you can see; Stage 9 covers keyboard, screen readers and cognitive accessibility in depth.

The key requirements

The Web Content Accessibility Guidelines (WCAG) 2.2 include these visual success criteria at level AA, which many organisations and laws use as a target:

• Contrast (minimum), 1.4.3: text needs at least 4.5:1 contrast with its background; large text (at least 24px regular or about 18.7px bold) needs 3:1.
• Non-text contrast, 1.4.11: meaningful graphics and the visible parts of controls (input borders, icons, focus indicators, chart lines) need at least 3:1 against adjacent colours.
• Use of colour, 1.4.1 (level A): colour must not be the only way information is conveyed, such as errors, links in text, or chart series.
• Resize text, 1.4.4: text can be enlarged to 200% without loss of content or function.
• Reflow, 1.4.10: content works at a width of 320 CSS pixels without two-dimensional scrolling, with some exceptions.
• Text spacing, 1.4.12: layouts survive users increasing line, paragraph, letter and word spacing.
• Focus visible, 2.4.7: keyboard focus is always visible. WCAG 2.2 adds focus not obscured (minimum), 2.4.11: the focused element is not completely hidden, for example by a sticky header.
• Target size (minimum), 2.5.8: pointer targets are at least 24 by 24 CSS pixels, or spaced so a 24px circle around each does not overlap others. Larger targets, such as 44px, are more comfortable and recommended by many platform guidelines.

Beyond the minimum

Meeting a success criterion is a floor, not a guarantee of a good experience. Text that passes 4.5:1 can still be tiring if it is thin and small. Aim for comfortable, not just compliant. And remember that automated contrast checkers cannot judge everything, such as text over images or whether colour is the only cue.

Low vision, colour vision deficiency, ageing eyes, small screens, bright sunlight and tired eyes affect a large share of people. Visual accessibility problems therefore affect far more people than many teams assume. Fixing them in design costs almost nothing; fixing them after development costs time and money, and in many countries inaccessible public services and some private ones can face legal challenges.

A transport company's journey planner shows delays in red text on a dark grey background, uses a pale grey outline for input fields, and removes the default focus outline because it "looked ugly". A customer who navigates by keyboard cannot tell where they are on the page, and colour-blind customers miss delays entirely.

The fix: delays get an icon and the word "Delayed" with sufficient contrast; input borders darken to meet 3:1; a clear two-colour focus ring is designed to work on both light and dark backgrounds; the sticky header is checked so it never covers a focused field. The changes take a designer one afternoon.