Accessible Design Basics - WCAG Guidelines for Practical Designers

Accessibility is one of those things I spent years ignoring because nothing in my workflow required it. Then I got a client in the healthcare sector and accessibility compliance became a hard requirement. Here’s what I actually had to learn:

WCAG guidelines in plain terms for designers:

Level AA is the practical target for most professional work. AAA is stricter and not always achievable in design-constrained contexts.

Contrast ratios: Normal text needs 4.5:1 contrast against background. Large text (18pt+ or 14pt bold+) needs 3:1. UI components and focus indicators need 3:1. Check every text element in context, not just swatches.

Tools that actually work in workflow: Figma has built-in contrast checking. The browser plugin Colour Contrast Analyser is what I use for production verification. Both should be in your standard toolkit.

Beyond color contrast (what gets missed): Focus states on interactive elements. All images need meaningful alt text in implementation (not your problem to write, but your responsibility to flag as needed). Touch targets should be minimum 44x44 pixels. Don’t rely on color alone to convey meaning.

Typography for accessibility: avoid justified text in body copy (uneven spacing creates reading difficulty). Sufficient line height (1.5x minimum for body). Don’t use very thin weights at small sizes.

The biggest shift for me: accessibility requirements often produce better design decisions. Sufficient contrast usually also means more legible, more confident work.

The “often produces better design” reframe is what helped me take it seriously. When I stopped thinking of accessibility as constraint and started thinking of it as quality criteria, the friction reduced significantly. Clear, readable, usable IS the design goal.

Touch target size is the most commonly missed in mobile design reviews. 44x44px feels large until you’re using an app on a small device screen in a hurry. The clients who pushed back on “larger buttons” stopped pushing back after user testing.

@RushMoment the justified text point is something I now include in every typography handoff note. Developers default to justify without thinking about it and the ragged word spacing in narrow columns is a genuine reading barrier. Single line of guidance prevents it.

Focus states are invisible to designers during design review because we’re clicking not tabbing. Adding keyboard navigation testing to the QA checklist fixed that for our team. You can’t evaluate focus states without actually using keyboard navigation.

level AA as the practical target is the right framework. I’ve had clients ask about AAA and the honest answer is that for many design-expressive projects AAA creates constraints that fundamentally change the aesthetic. AA is the professional standard.