Designing with Empathy: Practical UI Accessibility Guidelines
Why Accessibility Matters in UI/UX
Accessibility is not just a checklist of technical requirements; it is a fundamental part of high-quality product design. As designers, our goal is to build interfaces that are welcoming and usable for all people, including those with visual, cognitive, motor, or auditory impairments.
Designing with accessibility in mind—often referred to as inclusive design—actually improves the experience for everyone. For instance, clear contrast ratios don't just help users with visual deficits; they also help a user trying to read their screen under direct sunlight.
1. Contrast Ratios are Non-Negotiable
The Web Content Accessibility Guidelines (WCAG 2.1) state that regular text must have a contrast ratio of at least 4.5:1 against its background, and large text (18pt or 14pt bold) must have at least 3:1.
In my daily workflow, I use Figma plugins like Contrast or Stark to check this before finalizing any design tokens.
A Quick Tip for Soft/Dark Themes:
Avoid using pure black (#000000) on pure white (#FFFFFF) or vice versa. Pure black text on a pure white screen causes high-contrast eye fatigue. Instead, use a very dark grey or navy (e.g., #111827) on an off-white background (e.g., #F9FAFB). This maintains a high contrast ratio while being far gentler on the eyes.
2. Don't Rely on Color Alone to Convey Information
Color is a powerful tool to evoke emotion and group elements, but about 1 in 12 men and 1 in 200 women experience some form of color vision deficiency (color blindness).
If you use green for "Success" and red for "Error", a colorblind user might not be able to tell them apart.
The Solution:
Always pair color with text, icons, or patterns.
- In error states, add a warning icon next to the error text.
- Underline links within paragraphs of text, so they are distinguishable from normal text even if color is ignored.
- Use explicit labels rather than color tags alone.
3. Establish a Logical Focus & Reading Order
When design layouts are implemented by developers, the screen reader and keyboard tab focus should move in a predictable, logical manner—usually from top-to-bottom and left-to-right (in Western cultures).
How Designers Can Help:
- Design in clean rows and columns: Avoid overlapping text boxes or floating visual elements that make it hard for developers to define a tab index.
- Document state layouts: Provide design specs for the
Focusstate of every button, text input, and link, so keyboard-only users can navigate with a clear visual cursor.