Accessibility is a core part of creating inclusive, effective design. One of the most widely recognized standards in this area is WCAG. But what exactly is WCAG, and why does it matter for designers?
WCAG stands for Web Content Accessibility Guidelines. It was first published by the W3C’s Web Accessibility Initiative (WAI) in 1999, with major updates in WCAG 2.0 (2008), 2.1 (2018), and the latest WCAG 2.2 (2023). These guidelines set the international standard for making web content more accessible to people with all abilities (Thanks, Wikipedia!).
You can find the official documentation here: WCAG 2 Overview
The official language is written with developers in mind, and it can take a lot of time to interpret and translate it into practical steps for design. I’ve done the hard part for you! Here is your WCAG-based accessibility checklist you can keep in mind while designing any product:
1. Color Contrast
Getting contrast right is one of the fastest ways to make your designs more accessible. Here are the minimum contrast ratios according to WCAG guidelines:
Text vs. background:
• Normal text: at least 4.5:1
• Large text (≥18pt regular or ≥14pt bold): at least 3:1
UI components (icons, borders, form fields, etc.): at least 3:1
Before you hand off your designs (I recommend doing it at early stages of the design process), quickly test your color combinations. There are several Figma plug‑ins you can use. A super handy tool is the WebAIM Contrast Checker.
2. Focus Styles (Visible Focus)
Making focus visible is a key part of designing for keyboard and assistive‑technology users. In your interface, the focused element should stand out visually. For example, a button might show a bold outline, a link might get an underline, or a form field might glow with a clear highlight when it’s active. This lets users instantly see where they are on the screen as they navigate.
3. Target Size
Interactive elements need to be easy to hit, especially on touch devices. Interactive areas (buttons, links, icons, checkboxes, etc.) should be at least 24×24 px (According to WCAG 2.2). If your icon or element is smaller than that, add extra padding or spacing around it. This helps users with motor challenges and makes your design more touch‑friendly overall.
4. Clear Labels & Instructions
Buttons, icons, and form controls should have clear, descriptive labels, not just vague icons. For example, use “Download PDF” instead of only a down arrow. Icons can mean different things in different cultures or contexts. A star might represent rating or favorite depending on the situation, so do your best to pair icons with clear text labels.
5. Keyboard Navigation (Logical Focus Order)
This is mostly handled by developers, but it’s important for designers to understand. When someone navigates using only a keyboard (pressing Tab), focus should move through interactive elements in the same order they appear visually. Focus should follow a predictable, top‑to‑bottom, left‑to‑right flow.
Good example: Name field → Email field → Submit button
Bad example: Name field (left column) → Submit button (bottom right) → Email field (back up left)
6. Error Identification & Suggestions
When a user makes a mistake in a form, make sure the error is easy to notice and understand. Show a clear error message near the field and explain how to fix it. Use both text and visual indicators, not just color like red alone. For example, include an icon and helpful copy such as “Password must be at least 8 characters.”
7. Consistent Navigation
Repeated elements such as menus, headers, and footers should stay in the same place across all screens. Avoid changing menu layouts from page to page unless it is absolutely necessary.
8. Avoid Traps
Make sure users can always move forward, go back (where relevant) or exit an element. For example, if you use a modal window, include a clear “Close” button or an “X” in the corner so users can easily leave it. Users should not feel stuck with no way out.
9. Motion Sensitivity
Avoid motion effects that might cause dizziness, nausea, or even seizures for some users. Respect operating system settings like “Reduce Motion,” and give users a way to turn off animations. For example, avoid parallax scrolling, automatic carousels, or looping animations unless the user can pause or control them.
10. Error Prevention (for complex tasks)
For important actions like submitting a form or making a payment, help users avoid mistakes. Include a confirmation step, an option to undo, or a clear review screen before final submission. For example, use a progress indicator and a “Review Your Order” page so users can double‑check details before completing the task.
Accessibility isn’t just a checklist, it’s a mindset. By considering these WCAG principles early in your design process, you will create products that work for more people, in more situations, with less friction.
Use this checklist as a starting point and keep learning, testing, and refining. Every pixel, label, and interaction you design has the power to include or exclude. Let’s make sure we’re designing for everyone.
A Designer’s Guide to WCAG Accessibility was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.
