# Accessible design: contrast, forms, focus and structure

*Platform User Experience Designer Study Guide · UX Fundamentals · Last updated October 16, 2026 · https://www.certifyforce.com/study-guide/user-experience-designer/ux-fundamentals/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.

- Certification: Salesforce Platform User Experience Designer
- Exam section: UX Fundamentals
- Study guide: https://www.certifyforce.com/study-guide/user-experience-designer

**Official exam objective:**

> Describe key design principles and tools that define an accessible and engaging experience.

## 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

| Fact | Detail | Source |
|---|---|---|
| Text contrast | 4.5:1; large-scale text 3:1 (Level AA) | [Understanding SC 1.4.3: Contrast (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) |
| Exempt from text contrast | Logos and brand names, inactive components, decoration | [Understanding SC 1.4.3: Contrast (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) |
| UI components and states | 3:1, except inactive components | [Understanding SC 1.4.11: Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html) |
| Large text (Salesforce) | 24 px or 19 px bold (Trailhead); 24 px or 18 px bold (SLDS) | [Integrate Accessibility into Your Design](https://trailhead.salesforce.com/content/learn/modules/designing-for-web-accessibility/integrate-accessibility-into-your-design), [Accessible Web Design Guidelines (SLDS)](https://v1.lightningdesignsystem.com/accessibility/guidelines/web-design/) |
| Color-only meaning | Not allowed (1.4.1, Level A) | [Understanding SC 1.4.1: Use of Color](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html) |
| Focus visible | Required (2.4.7, Level AA); custom indicator at least 3:1 | [Understanding SC 2.4.7: Focus Visible](https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html), [Learn About Visual State Indicators](https://trailhead.salesforce.com/content/learn/modules/designing-for-web-accessibility/learn-about-visual-state-indicators) |
| Flashing | No more than three flashes in one second (2.3.2 is Level AAA; Trailhead calls it a crucial requirement) | [Understanding SC 2.3.2: Three Flashes](https://www.w3.org/WAI/WCAG22/Understanding/three-flashes.html) |
| Moving content | Over five seconds needs pause, stop or hide | [Understanding SC 2.2.2: Pause, Stop, Hide](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html) |

## Check yourself

- 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?

## Sources

- [Integrate Accessibility into Your Design](https://trailhead.salesforce.com/content/learn/modules/designing-for-web-accessibility/integrate-accessibility-into-your-design)
- [Learn About Visual State Indicators](https://trailhead.salesforce.com/content/learn/modules/designing-for-web-accessibility/learn-about-visual-state-indicators)
- [Learn the Elements of an Accessible Webpage](https://trailhead.salesforce.com/content/learn/modules/designing-for-web-accessibility/learn-the-elements-of-an-accessible-webpage)
- [Accessible Web Design Guidelines (SLDS)](https://v1.lightningdesignsystem.com/accessibility/guidelines/web-design/)
- [Keyboard Interaction Guidelines (SLDS)](https://v1.lightningdesignsystem.com/accessibility/guidelines/keyboard/)
- [Understanding SC 1.4.3: Contrast (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html)
- [Understanding SC 1.4.11: Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html)
- [Understanding SC 1.4.1: Use of Color](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html)
- [Understanding SC 1.3.3: Sensory Characteristics](https://www.w3.org/WAI/WCAG22/Understanding/sensory-characteristics.html)
- [Understanding SC 2.4.7: Focus Visible](https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html)
- [Understanding SC 2.2.2: Pause, Stop, Hide](https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html)
- [Understanding SC 2.3.2: Three Flashes](https://www.w3.org/WAI/WCAG22/Understanding/three-flashes.html)
- [Use Accessible Language](https://trailhead.salesforce.com/content/learn/modules/writing-for-web-accessibility/use-accessible-language1)
- [Use Meaningful Structure](https://trailhead.salesforce.com/content/learn/modules/writing-for-web-accessibility/use-meaningful-structure1)
- [Apply Systems Design Principles](https://trailhead.salesforce.com/content/learn/modules/systems-design-with-slds/apply-systems-design-principles)

## About the full unit

The "Core concepts", "Exam traps" and "Worked scenario" sections of this unit, its 13 linked practice questions, and unlimited timed mock exams are included with the Platform User Experience Designer pack (USD $19): https://www.certifyforce.com/practice-exams