UX/UI Designer Accessibility Checklist

Based on WCAG 2.2 AA - Updated and Enhanced for Visual and UX Design

Color and Contrast

Text contrast meets minimum 4.5:1 ratio for normal text, 3:1 for large text. Interactive elements (buttons, links) have sufficient contrast from background. Color alone is not used to convey meaning.

Typography and Text

Fonts are easy to read (no overly decorative fonts for body text). Line height is at least 1.5 times the font size (for easier readability). Paragraph spacing is at least 1.5 times greater than line spacing. Avoid full justification (left-align text for better readability). Maximum of 80 characters per line (or 40 in CJK languages).

Layout and Structure

Clear visual hierarchy with consistent heading styles (h1, h2, h3). Related elements are visually grouped together logically (e.g., related form fields). Use sufficient white space to separate different content areas. Important information placed near the top when possible.

Navigation Design

Navigation menus are consistent across all pages/screens. Provide space for a "Skip to main content" link in design mockups.

Form Design

Each field has a clearly associated visible label. Group related fields visually and structurally (e.g., address fields grouped together). Error messages appear close to the corresponding field and are noticeable without relying on color only.

Touch Target Size

Touch targets are at least 44x44px on mobile designs. Adequate spacing between interactive elements to avoid accidental taps.

Visual Focus States

Custom visual focus states are clearly visible (not hidden or faint). Focus indicators use more than just color (e.g., borders, underlines).

Responsive Design and Reflow

Layout adapts well across different screen sizes without losing content or functionality. No need for horizontal scrolling at 320px screen width (unless unavoidable).

Mobile and Touch UX

Designs favor simple, single-finger gestures over complex interactions. Critical buttons and actions positioned within natural thumb reach zones.

Motion and Animation

Auto-playing animations are avoidable or pausable by users. Respect user's "Reduce Motion" system settings where applicable.

Iconography and Symbols

Icons conveying critical meaning have text labels nearby. Do not rely on icon color alone to convey status (e.g., success, error).

Error Messages and Notifications

Error notifications appear next to the relevant field. Error states do not rely solely on color (also use text, icons, etc.).

Reading and Focus Order

Visual reading order matches expected logical and tab order. Important navigation items placed first or consistently ordered visually.

Consistent Component Usage

Components (buttons, links, modals, tabs) behave consistently across designs. Standard accessible patterns reused where possible.