The Designer's Checklist, for Catching It in Figma

Clear 4.5 to 1 on every text and background pair

Run the pairs through the checker, including text sitting over photographs and gradients, where the honest test is the busiest region rather than an average. Two exceptions save real arguments. Text that is part of a logo or brand name has no contrast requirement at all, and neither does text in a disabled control.

WCAG 1.4.3

Clear 3 to 1 on icons, borders and controls

Interface parts answer to their own rule, and it is the one a careful team still misses, because measuring your body copy does not make you look at your input borders. Measure each against whatever sits directly behind it. Inactive controls and anything the browser draws unchanged are excepted, so a grayed-out button is not a finding.

WCAG 1.4.11

Design a palette that passes before you use it

Build the shade ladder first, mark which combinations clear which threshold, and then design inside it. Do it once and you never have the other argument. Nobody wins a fight about a brand color after the screens are drawn.

Check the whole screen in grayscale

Drop the color out and look for anything that has just become ambiguous. That screen is what somebody with a color vision deficiency is already looking at, and it takes ten seconds to produce. Chart series, status pills and required-field markers usually go first.

WCAG 1.4.1

Give error and success states a word or an icon

A red border on its own says nothing to somebody who cannot pick red out, and nothing at all to somebody listening. Add the word, keep the color, and the color goes on doing its job for everybody who can see it while stopping being the only signal.

WCAG 1.4.1

Set body text at 16px or larger

Sixteen is the size browsers default to, for a reason. Anything under 14 is a readability problem for a lot of people rather than a stylistic choice. Small type compounds everything else on this list. A low-contrast pair at 12px is harder again than the same pair at 16.

Cap line length around 80 characters

A long measure makes the return sweep hard, so a reader loses the line they were on and starts the same one twice. It costs people with dyslexia most, and it costs everybody something. That is why the number sits in the standard's enhanced level as well as in every typography book.

Leave room for text to grow

Mock one real screen with the text at twice its size and see what clips. Fixed-height cards and buttons are where it breaks, and they break silently, because the design file never shows you the state where the third line has nowhere to go.

WCAG 1.4.4

Design the 320 pixel wide state

At 400% zoom everything has to fit inside 320 CSS pixels with no sideways scrolling, which is the same width a small phone gives you. One column is a common way of getting there and the rule never asks for it, so a layout that still works in two columns passes perfectly well.

WCAG 1.4.10

Avoid text baked into images

Text in a picture cannot be resized, recolored, translated or read aloud, so use real text over a background image instead. Logos and brand marks are excepted by name, which means your wordmark can stay as artwork, and so can a genuine reproduction of an original document.

WCAG 1.4.5

Draw the focus state for every control

Hover is not focus. Hover is the one that gets drawn. The rule here asks only that a keyboard focus indicator is visible somewhere in your design, and it sets no ratio, no size and no shape, so what you are checking is that the state exists at all rather than that it measures anything.

WCAG 2.4.7

Measure the focus indicator at 3 to 1 against what surrounds it

The ratio belongs to the non-text contrast rule, which compares your indicator against the colors adjacent to it. A different rule again, at the enhanced level, compares the focused and unfocused states on the same pixels and sets a minimum area, so an indicator can clear one of these and fail the other. Measuring against the surroundings is the one that applies at AA.

WCAG 1.4.11

Size targets at 24 by 24 pixels, or space them out

That is the AA obligation, and the spacing route is usually the cheaper one. A smaller target passes if a 24 pixel circle centered on it overlaps neither another target nor the circle around another small target, which is what makes a tight row of footer icons fail even when each icon is fine on its own. Aiming at 44 by 44 is better, and that figure is the enhanced level rather than the AA one. Apple asks for 44 points and Google for 48 density-independent pixels, which is platform guidance rather than anything a WCAG audit measures.

WCAG 2.5.8

Design the error state with real messages

"Invalid input" is a placeholder pretending to be a message, and it survives into production because nobody replaced it. Write the actual words in the file. The message has to say which field is wrong and what is wrong with it, and you are the person who knows what the field wanted.

WCAG 3.3.1

Keep labels visible above fields

A placeholder disappears the moment somebody types into it, which leaves anybody who was interrupted looking at a filled box with no idea what it wanted. Put the label above the field permanently and use the placeholder for an example of the format, which is what it is good at.

WCAG 3.3.2

Give any drag interaction a click alternative

Reordering a list, moving a card between columns, and setting a value on a slider all need a second path that does not involve dragging. Buttons beside the item are the usual answer, and they cost nothing. Dragging is difficult for anybody with a tremor or limited fine motor control, and impossible for somebody driving the page from a keyboard.

WCAG 2.5.7

Mark the heading level of every text block

Write H1, H2 and H3 onto the design itself, so the levels come from the structure of the page rather than from which text looked biggest. Heading levels describe depth, and a developer picking them by type size will produce an outline that matches your visual hierarchy and not your argument.

WCAG 1.3.1

Number the focus order on complex screens

Anywhere your visual layout differs from the order the markup will run in, say what order focus should take. This is what stops a two-column form tabbing down one column and then back up the other, which is what happens by default when a designer arranges by column and a developer builds by row.

WCAG 2.4.3

Write the alt text in the design file

You picked the image and you know what it is doing on the page, and the developer placing it knows neither. Writing the words at this stage is also the point where somebody notices that half the images are decorative and take an empty alt, which is a decision nobody makes later.

WCAG 1.1.1

Name each interactive element's accessible name

An icon-only button has no name unless somebody writes one, and it is announced as "button" with nothing after it. Name it after what it does rather than what it looks like, and put that name in the file, because a developer looking at a magnifying glass has no way to know whether you meant Search or Zoom.

WCAG 4.1.2