UX Fundamentals16% of the exam
Accessible design: contrast, forms, focus and structure
The accessibility rules a UX designer must design in: WCAG contrast ratios and their exemptions, never relying on color or sensory cues, visible labels and helpful errors, visible focus and keyboard paths, safe animation, headings, landmarks, link text and affordance.
Describe key design principles and tools that define an accessible and engaging experience.
~8 min read · 13 practice questions ·
What the exam expects
- Apply WCAG contrast ratios to text, large text, component boundaries and focus, and know the exemptions.
- Replace color-only meaning and sensory or directional instructions with labels, icons and control names.
- Design accessible forms: visible labels, error text that explains the fix, step indicators and safeguards, no time pressure.
- Specify visible focus and complete keyboard and touch interaction models.
- Keep animation safe; specify headings, landmarks, alt text and descriptive links; reuse controls with clear affordance.
Key terms: contrast ratio (relative luminance of foreground against background, such as 4.5:1); sighted keyboard user (can see but navigates with Tab and arrow keys); landmark (semantic page region such as header, navigation, main, footer); affordance (part of an element people recognize and associate with an action).
Key facts
Text contrast
- Detail
- 4.5:1; large-scale text 3:1 (Level AA)
Exempt from text contrast
- Detail
- Logos and brand names, inactive components, decoration
UI components and states
- Detail
- 3:1, except inactive components
Large text (Salesforce)
- Detail
- 24 px or 19 px bold (Trailhead); 24 px or 18 px bold (SLDS)
Color-only meaning
- Detail
- Not allowed (1.4.1, Level A)
Focus visible
- Detail
- Required (2.4.7, Level AA); custom indicator at least 3:1
Flashing
- Detail
- No more than three flashes in one second (2.3.2 is Level AAA; Trailhead calls it a crucial requirement)
Moving content
- Detail
- Over five seconds needs pause, stop or hide
Sources for this section (9)
- Understanding SC 1.4.3: Contrast (Minimum)www.w3.org (opens in a new tab)
- Understanding SC 1.4.11: Non-text Contrastwww.w3.org (opens in a new tab)
- Integrate Accessibility into Your Designtrailhead.salesforce.com (opens in a new tab)
- Accessible Web Design Guidelines (SLDS)v1.lightningdesignsystem.com (opens in a new tab)
- Understanding SC 1.4.1: Use of Colorwww.w3.org (opens in a new tab)
- Understanding SC 2.4.7: Focus Visiblewww.w3.org (opens in a new tab)
- Learn About Visual State Indicatorstrailhead.salesforce.com (opens in a new tab)
- Understanding SC 2.3.2: Three Flasheswww.w3.org (opens in a new tab)
- Understanding SC 2.2.2: Pause, Stop, Hidewww.w3.org (opens in a new tab)
- Why must placeholder text never replace a visible label?
- When may a UI element skip the 3:1 non-text contrast requirement?
- Why should a "Learn more" link label be rewritten?
- Why reuse the design system button instead of a one-off style?
The questions are free to read. Answers with their sources and self-grading are included with the pack.
Keep reading with the Platform User Experience Designer pack
- Core concepts
- Exam traps
- Worked scenario
The pack includes:
- All 22 lessons of the Platform User Experience Designer guide, with reading progress
- Interactive decision walks and step-by-step sequence steppers
- Inline practice questions and one-click topic practice (13 questions for this lesson)
- An official source cited for every claim
- An AI tutor that answers from the guide
- Unlimited timed practice exams