Web Design

A practical color-contrast checklist for design handoff

DSN

Every accessibility audit we've run this year has flagged the same handful of contrast issues, almost always introduced at the design stage rather than in code, which meant catching them in a post-launch audit was always the most expensive place to catch them. We put together a short pre-handoff checklist for designers to run before a mockup ever reaches a developer, rather than relying on development-stage tooling to catch problems that were baked into the design from the start.

The core of the checklist is simple: body text needs to meet a 4.5:1 contrast ratio against its background, and large text, defined by WCAG as 18pt regular weight or 14pt bold, can pass at a lower 3:1 ratio. Those two numbers alone catch the majority of what audits flag, and running a proposed color pairing through a contrast checker takes under a minute once it's a habit rather than an afterthought. We use a browser extension and a Figma plugin that both surface the ratio directly next to a selected layer, which keeps the check inside the tool designers are already working in rather than a separate step that's easy to skip under deadline pressure.

A less obvious item on the checklist, and one that used to get missed even by designers who were already careful about text contrast, is non-text contrast: WCAG 2.1 also requires a 3:1 ratio for meaningful UI components and graphical elements, like a button's border, a form input's outline, or an icon that conveys information on its own. Brand-color buttons with a low-contrast border against a white background, and disabled-looking secondary buttons that were actually meant to be interactive, both showed up repeatedly in past audits and are now explicit line items on the checklist rather than something we hope someone remembers.

We deliberately kept the checklist to items designers can verify themselves inside their existing tools, rather than deferring everything to a developer or a separate accessibility specialist review, since the whole point was catching issues at the cheapest possible stage rather than adding another review gate later in the process. Checking body text against 4.5:1 and large text against 3:1 before a design ever reaches development, along with the non-text contrast check, has cut our post-launch accessibility fixes related to color by more than half this quarter compared to the same period last year, and the designers who've adopted the habit report it adds only a few minutes to a typical page design.

← Back to the journal

Have a project in mind?
Let’s talk.

Tell us where you are and where you want to go. We'll map the fastest route between the two.

Currently accepting new clients