By role · Designers
Designers Decide More of It Than They Think
About half of what our reports flag was settled in the design file. Settling it there costs minutes.
You decide contrast, target size, focus states and error wording. Those are design decisions, not code problems.
Designers get told accessibility is the developer's problem, and about half of it never reaches a developer at all. Contrast is a colour decision. Target size is a spacing decision. Focus states, error message wording and heading hierarchy are all settled in your file before anybody opens an editor. Fixing them once the code has shipped is slow, expensive and sometimes impossible. Fixing them in the file costs a few minutes and nobody ever hears about it.
Four constraints carry most of the weight. Colour pairs have to clear a ratio, clickable things have to be big enough to hit, meaning cannot rest on colour alone, and the layout has to survive somebody enlarging it. Contrast is where most of the web falls down. A scan of the top million home pages in February 2026 detected low-contrast text on 83.9% of them, which is five sites in six making the same mistake in a colour picker. Those four are not the whole list, though. Images of text, alt text, resilience to changed spacing, motion and flashing all carry requirements of their own. What is genuinely yours after that is the taste: the type, the imagery, the personality, the layout flourish.
What you own
- The colour palette, and which pairs clear the ratio for the level you are working to. Body text needs 4.5:1 and large text 3:1 at Level AA. Text inside a logo is excepted, and so is a control that is switched off. Almost nothing else is.
- Every interactive state you expect to exist, the focus indicator and the error visual included. At Level AA the indicator needs 3:1 against what sits next to it. The AAA rule measures 3:1 between the focused and unfocused versions of the same pixels, which is a second test an indicator can fail while passing the first. Where the browser draws the indicator and nobody has restyled it, that AAA test does not apply.
- The size and spacing of every target, so it can be hit accurately. WCAG asks for 24 by 24 CSS pixels at AA, with a spacing route for anything smaller. Android and Apple both publish larger minimums in their own units, which are not CSS pixels, so a native guideline is a good habit rather than a shortcut past the web measurement.
- Font size and line length, how the text holds up when somebody resizes it to 200%, and how the layout rearranges at 400% page zoom. Reflow does not mean one column. Content that genuinely needs two dimensions to be usable is excepted, which is what covers a map, a complex diagram or a data table, rather than a blanket pass for anything in that shape.
- The real wording of every error message and empty state, written into the file rather than left as "Error text here".
- The heading hierarchy, annotated in the file so the developer builds the structure you meant instead of the one that looked right.
What is not yours
Whether the code uses a real heading instead of a styled div, how focus moves inside a dialog, and whether a change announces itself to a screen reader. Those are build decisions. Your file is the brief they work from, which is why it has to say what you meant rather than only look like it.
Where to start, in order
- Accessible web designThe four design decisions that carry the most weight, and the one widely believed myth that wastes design time.
- Colour and contrastThe ratio for each kind of element, and the judgement calls the formula cannot settle for you.
- Fonts and typographyWhat actually helps people read, which is not the same as what design culture believes about it.
- The designer's checklist20 checks that run inside Figma, so not one of them waits on a build.
- Mobile accessibilityThe rules that become impossible to meet on a small screen if nobody planned for them at the wireframe stage.
The mistakes we see most from this role
Not a criticism. These are the failures that recur across audits, and knowing them is most of avoiding them.
- Light grey on white, which reads as restraint in the comp and misses the 4.5:1 body text ratio in the audit.
- Leaving the focus state out of the file, so the developer either invents one or quietly drops it.
- Shipping "Error text here" instead of the sentence somebody will actually read when the form refuses them.
- Using placeholder text as the only label. A placeholder can supply an accessible name, so a name-based rule such as axe's label check has nothing to report, and the label still disappears the moment anybody types.
- Packing icon buttons so tightly that they fall under 24 by 24 pixels with no spacing left to rescue them.
- Never drawing the layout at 400% zoom. Multi-column grids collapse into each other there, and text runs off the side.
- Treating the text spacing rule as a setting to apply, when it is a survival test. Somebody changes the spacing in their own browser, and your only job is that nothing clips when they do.
Tools you will use
Other roles
Find out what your site actually needs.
The free scan checks 10 pages in a real browser against all 90 supported automated rules, keeps its 27 best-practice checks separate from WCAG findings, and names the rule behind every finding.