Designing for accessibility AAA without compromising aesthetics

Designers often treat WCAG AAA as the level where a site has to become ugly. Our experience is the opposite: most AAA requirements push a design toward clarity, and clarity usually looks good.

Contrast is a palette decision

AAA asks for a contrast ratio of 7:1 for body text and 4.5:1 for large text. That sounds restrictive until you build the palette around it from the start. Pick your text colour and your background first, check the ratio, and then choose accents that work against both.

The colours that fail are almost always mid-tone greys and pale brand colours used for text. Keep the brand colour for large type, buttons, and marks, and use a darker shade of it where it has to carry small text.

Type that is easy to read is also good typography

• Lines of 80 characters or fewer.
• Line spacing of at least one and a half within paragraphs.
• Text that can be resized to 200% without breaking the layout.
• No justified text.

None of this is exotic. It is what a good editorial designer would do anyway.

Focus states deserve design time

A visible keyboard focus is required, and the browser default is rarely what you want. Design it the way you design a hover state: a clear outline in a colour from your palette, with enough offset that it does not crowd the element. A good focus ring looks deliberate.

Motion with an off switch

Animation is fine. Animation that cannot be turned off is not. Respect the reduced-motion setting, keep anything that moves on its own short, and never make content depend on an animation finishing.

Where AAA is genuinely hard

Some criteria are difficult for some content: sign language for all video, or a reading level that suits every subject. The standard itself says AAA is not always achievable for a whole site. Our approach is to meet AA everywhere without exception, and take AAA wherever the content allows it, which turns out to be most of the visual design.