StretchLearn Course

Design So Nobody Gets Locked Out

The WCAG rules a designer actually owns - contrast, readable type, inclusive colour, visible focus - taught as numbers you can check and an audit you can repeat.

Preview Curriculum Back to Catalog

Beginner9 hrSelf PacedRegistered

Course Overview

What this course is designed to develop

Roughly one in six people lives with a disability that can affect how they perceive or use a design, and the visual choices a designer makes - colour, type size, spacing, the use of colour to carry meaning, the visibility of focus and state - decide whether those people can use the product or are quietly locked out. This course teaches the parts of the Web Content Accessibility Guidelines (WCAG 2.1 and the 2.2 update) that a visual or UI designer is directly responsible for, expressed as concrete numbers you can check: a 4.5:1 contrast ratio for body text, 3:1 for large text and UI components, a minimum 24-by-24 CSS pixel target, never using colour alone to signal meaning, and visible focus and error states. You will run real audits using the WebAIM Contrast Checker, the Stark and Able Figma plugins, the WAVE tool, and a colour-blindness simulator, and you will finish with an annotated accessibility specification a developer can build from and an audit you can repeat on any future file.

Learning Outcomes

What the learner should be able to understand, build, or execute.

Explain the four POUR principles of WCAG and which success criteria a visual designer is responsible for

Check and fix colour contrast to the 4.5:1, 3:1, and 7:1 thresholds using WebAIM, Stark, and TPGi tools

Set readable type by sizing, line length, line height, and spacing so text stays legible and resizable

Design inclusive visuals that never rely on colour alone and that simulate common colour-vision deficiencies

Specify visible focus indicators, accessible target sizes, and clear error and state cues for interactive elements

Run a repeatable accessibility audit on a design file and hand off an annotated, developer-ready accessibility spec

Curriculum Preview

Inside the curriculum: a structured path from fundamentals to execution.

Preview the course structure, see how the modules build on one another, and understand the path this program is designed to take you through.

Module 1

Module 1: Why Accessibility Is a Design Decision

Reframe accessibility from a late compliance chore to a set of visual choices you own. Learn who is affected, the WCAG framework, and the conformance levels you are designing to.

3 lessons

Who Gets Locked Out, and How OftenContent · 45 min

Preview Enabled

The WCAG Framework and POURContent · 45 min

LMS Access

Conformance Levels and Setting Your TargetContent · 45 min

LMS Access

Module 2

Module 2: Colour Contrast You Can Measure

Turn contrast from a feeling into a number. Learn the ratios, how to measure them with named tools, and how to fix failing colours without abandoning your palette.

3 lessons

The Contrast Ratios That MatterContent · 45 min

LMS Access

Measuring Contrast With Real ToolsContent · 45 min

LMS Access

Fixing Failing Colours Without Losing the BrandContent · 45 min

LMS Access

Module 3

Module 3: Readable Type and Inclusive Visuals

Make text effortless to read and make meaning survive without colour. Cover sizing, spacing, and line length, then colour-blindness and non-colour cues.

3 lessons

Type That Stays LegibleContent · 45 min

LMS Access

Never Rely on Colour AloneContent · 45 min

LMS Access

Designing for Colour Vision and Light SensitivityContent · 45 min

LMS Access

Module 4

Module 4: Interaction States and Auditing Your Work

Make interactive elements visibly usable, then build a repeatable audit that turns any design file into an accessibility-ready handoff.

3 lessons

Visible Focus and Honest StatesContent · 45 min

LMS Access

Running a Design Accessibility AuditContent · 45 min

LMS Access

Handing Off an Accessible SpecContent · 45 min

LMS Access

Built for Application

A complete learning path, not a one-off inspiration hit.

This program is designed around progression: focused lessons, structured modules, applied resources, assessments, and a course rhythm that turns information into usable capability.

accessibilityWCAGcolour contrastinclusive designreadable typographycolour blindnessfocus indicatorsdesign audit