Accessibility for Designers: Creating Inclusive Visual and Interaction Design

An accessible website starts with accessible design. Many of the most common accessibility failures — insufficient color contrast, unclear navigation, confusing layouts, missing focus indicators — originate in decisions made during the design phase. By the time code is written, these issues are baked in, and fixing them requires redesigning rather than simply adjusting code.

As a designer, you have more influence over accessibility than almost anyone else on the team. The choices you make about color, typography, spacing, navigation patterns, and interaction models determine whether millions of users can effectively interact with your product.

Color Contrast

Insufficient color contrast is one of the most prevalent accessibility issues on the web. WCAG requires a minimum contrast ratio of 4.5:1 between text and its background for normal-sized text, and 3:1 for large text (defined as 18pt regular or 14pt bold). At Level AAA, the requirement increases to 7:1 for normal text and 4.5:1 for large text.

These ratios exist because people with low vision, aging eyes, or color vision deficiencies need sufficient contrast to distinguish text from its background. Light gray text on a white background may look elegant in a design mockup but becomes unreadable for a significant percentage of users.

Non-text elements also have contrast requirements. User interface components — buttons, form fields, icons, focus indicators — and meaningful graphical objects must maintain at least a 3:1 contrast ratio against adjacent colors. This ensures that users can identify interactive elements and understand informational graphics.

Use contrast checking tools throughout your design process, not just at the end. Tools like the WebAIM Contrast Checker or the Colour Contrast Analyser let you verify ratios before committing to a color palette.

Color as Information

Color must never be the only visual means of conveying information. If you use red to indicate errors and green to indicate success, users who are color blind may not be able to distinguish between the two states. Always supplement color with additional indicators — icons, text labels, patterns, or underlines.

This applies to links as well. If links within a block of text are distinguished only by color, they must meet a 3:1 contrast ratio against surrounding text or be supplemented with another visual indicator such as an underline.

Typography and Text Sizing

All text on your website must be able to be resized up to 200% without any loss of content or functionality. This means designing with flexible, relative units rather than fixed pixel sizes, and ensuring that your layouts adapt gracefully when text is enlarged.

WCAG 2.2 also includes requirements for text spacing. Users must be able to adjust line height to at least 1.5 times the font size, paragraph spacing to at least 2 times the font size, letter spacing to 0.12 times the font size, and word spacing to 0.16 times the font size — without any loss of content or functionality.

Link Design

Links must be visually distinct from surrounding text. They should be descriptive and concise, telling users what they will find when they follow the link. Never use "click here" or "read more" as link text without additional context, as these phrases are meaningless to screen reader users who navigate by link lists.

Navigation and Consistency

Navigation must be consistent across all pages of your site. Users who rely on keyboard navigation or screen readers build a mental model of your site's structure, and unexpected changes disrupt that model. WCAG requires that navigation mechanisms appearing on multiple pages occur in the same relative order each time, and that components with the same functionality are identified consistently.

Focus Indicators

When a user navigates your site with a keyboard, there must be a visible indicator showing which element currently has focus. This focus indicator must be clearly visible — WCAG 2.2 requires that it not be obscured by other content (SC 2.4.11) and, at Level AAA, that the entire focus indicator and the focused component be fully visible (SC 2.4.12).

Design focus indicators intentionally. The default browser outline is often insufficient or is removed by CSS resets. Design a custom focus style that has sufficient contrast and is visually prominent.

Touch Target Sizes

Interactive elements must be large enough to be activated without difficulty. WCAG 2.2 requires that interactive targets be at least 24×24 CSS pixels (SC 2.5.8), including any whitespace surrounding the target. At Level AAA, the requirement increases to 44×44 pixels (SC 2.5.5). This benefits users with motor disabilities, tremors, or limited dexterity, as well as anyone using a mobile device in a bumpy environment.

Form Design

Forms are one of the most critical areas for accessible design. Every form control needs a clearly visible label that tells the user what information to provide. Error messages must be specific, visible, and positioned near the field they refer to. Provide instructions where needed, and avoid relying solely on placeholder text as a label — placeholder text disappears when the user begins typing and often has insufficient contrast.

Design for error prevention. Allow users to review and correct input before submission, especially for actions with significant consequences such as financial transactions or legal agreements. When errors are detected, provide clear suggestions for how to fix them.

Motion and Animation

Some users experience seizures, migraines, or vertigo from animated or flashing content. Nothing on your website should flash more than three times per second. Provide controls to pause, stop, or hide any content that moves, blinks, or scrolls for more than five seconds. Respect the operating system's "prefers-reduced-motion" setting and provide reduced-motion alternatives for animations.

Images of Text

Avoid using images of text on your website. Real text can be resized, reformatted, and read by assistive technologies. Images of text cannot. The only exceptions are logos and situations where a particular visual presentation of text is essential to the information being conveyed.

Designer's Accessibility Checklist

Before handing off any design to development, verify: contrast ratios meet requirements for all text and interactive elements; color is never the sole indicator of information; focus states are designed for all interactive elements; touch targets meet minimum size requirements; navigation is consistent across all pages; error states and messaging are clearly designed; text can resize without breaking layouts; animations respect user preferences; and all non-text content has planned text alternatives.