An Accessibility Checklist for Visual Designers

Accessibility is often treated as a developer’s job, but many of the most common problems are decided in the design file. These checks follow the Web Content Accessibility Guidelines (WCAG 2.2, level AA) and take only a few minutes per screen.

Color and contrast

• Body text needs a contrast ratio of at least 4.5:1 against its background.
• Large text – about 24px regular or 18.5px bold and up – needs at least 3:1.
• Icons, input borders and focus indicators that people need to see also need 3:1.
• Never use color alone to show meaning. Add an icon, a label or a pattern to errors, links and chart lines.

Placeholder text and light grey captions are the usual suspects. Check them first.

Typography

• Keep body text at 16px or larger, with a line height of about 1.5.
• Avoid long passages in all caps or in very thin weights.
• Make sure the layout still works when text is enlarged to 200% – leave room for words to wrap.

Focus and keyboard

Everything you can click must also be reachable with the keyboard, and people need to see where they are. Design a visible focus state for every interactive element: a clear outline or ring that contrasts with both the element and the background.

Add the focus state to your component variants next to hover and pressed. If it is not in the design file, it will rarely make it into the product.

Targets and spacing

WCAG 2.2 asks for interactive targets of at least 24×24px, or enough space around smaller ones. On touch screens, aim for 44×44px. Small icon buttons, close buttons and links inside dense tables need the most attention.

Forms

• Every field needs a visible label – placeholder text is not a label.
• Mark required fields in text, not only with color or an asterisk.
• Show errors next to the field, in words, and explain how to fix them.

Images and media

Decide in the design which images are decorative and which carry information, and write the alt text for the informative ones. Videos need captions; audio needs a transcript.

Motion

Animations should be short and never essential to understanding the page. Provide a reduced-motion alternative for parallax, auto-playing carousels and large movements, and avoid anything that flashes more than three times a second.

Make it a habit

Run through this list whenever you finish a screen, and keep a short note of the decisions you made for your developers. Accessible design is not a separate phase – it is simply good design that works for more people.