SStretchLearn
Sign inMembershipStart learning
Catalog / Design / Accessibility in Design
DesignBeginnerPreview

Accessibility in Design

A practical beginner course in accessible visual design for designers who own the look of a product. You learn the WCAG 2.1 and 2.2 rules that apply to design decisions - contrast ratios, text sizing, target sizes, focus visibility, and non-text cues - and how to audit your own Figma or PDF files against them with named tools before a single line of code is written.

For graphic, web, and UI designers and content creators who set the visual look of a product and want to make their designs usable by people with low vision, colour blindness, and motor and cognitive differences.

Course content

Who Gets Locked Out, and How Often45m
The WCAG Framework and POUR45m
Conformance Levels and Setting Your Target45m
The Contrast Ratios That Matter45m
Measuring Contrast With Real Tools45m
Fixing Failing Colours Without Losing the Brand45m
Type That Stays Legible45m
Never Rely on Colour Alone45m
Designing for Colour Vision and Light Sensitivity45m

Workbook & downloads

Put the course into practice — a printable workbook plus editable templates you can fill in and reuse.

Download workbook (PDF)17 KBDownload (XLSX)9 KBDownload (CSV)1 KBDownload (DOCX)8 KB
Preview the workbook
This workbook turns the course into a working accessibility practice. As you progress, you will set a conformance target, measure and fix the contrast in your own palette, make your type readable and your visuals colour-blind-safe, design honest interaction states, and run a repeatable audit that ends in a developer-ready spec. Keep every decision in the worksheets, logs, and templates so any future file can be checked the same way - and so accessibility becomes a property of your system, not something you remember to do.

Why Accessibility Is a Design Decision

Set who you are designing for, learn the WCAG framework, and commit to a conformance target before you design.
Worksheet: Conformance Target Brief
Decide and record the accessibility target for this project before designing. Keep this brief visible; every later contrast, type, and state decision is checked against it.
  • Product / screen this brief covers
  • WCAG version targeted (2.1 or 2.2)
  • Conformance level targeted (almost always AA)
  • Any AAA criteria you will also adopt (e.g., 7:1 contrast for long reading)
  • Legal driver, if any (Section 508 / European Accessibility Act / AODA / none stated)
  • Dark theme in scope? (Y/N - if Y, contrast is re-checked separately)
  • One sentence you can put in the project brief stating the target
Exercise: Map Your Users to Barriers
List the kinds of people who will use this design and the specific visual or motor barrier each could hit. Include situational and temporary cases, not just permanent disability.
  1. Which visual barriers apply here (low vision, colour-vision deficiency, light sensitivity)?
  2. Which motor or input barriers apply (keyboard-only, tremor, one-handed, touch)?
  3. Which cognitive or reading barriers apply (dyslexia, attention, processing load)?
  4. Which situational cases will be common (glare, small screens, distraction, ageing eyesight)?
  5. Which single barrier, if unaddressed, would lock the most people out of this product?
Checklist: POUR Orientation
  • I can name the four POUR principles: Perceivable, Operable, Understandable, Robust
  • I know contrast, text alternatives, and colour-meaning sit under Perceivable
  • I know focus, target size, and keyboard use sit under Operable
  • I have identified which criteria I, as the visual designer, directly own
  • The conformance target is written into the project brief, not assumed

Colour Contrast You Can Measure

Turn contrast into measured numbers, check every pairing with named tools, and fix failures into reusable tokens.
Worksheet: Contrast Threshold Reference
Fill in the required ratio beside each content type so you have a one-page reference while auditing. Confirm you understand what each one applies to.
  • Normal body text - required ratio (AA)
  • Large text (18.66px bold / 24px regular and up) - required ratio (AA)
  • Meaningful non-text: icons, input borders, focus rings, chart parts - required ratio (1.4.11)
  • Normal text at enhanced level - required ratio (AAA)
  • What is exempt (decoration / logo text / disabled controls?)
  • Tool you will use for in-file checks
  • Tool you will use for sampled or PDF colours
Exercise: Audit Your Palette Pairings
Run every foreground-on-background pairing your design uses through a contrast checker (WebAIM, Stark, or the TPGi CCA). Record the measured ratio and the pass/fail for each, then flag the failures to fix.
  1. Which text-on-background pairings did you measure, and what ratio did each score?
  2. Which pairings fail 4.5:1 for body text or 3:1 for large text?
  3. Which non-text elements (borders, icons, focus rings) fail 3:1?
  4. Where does text sit on a photo, gradient, or overlay - and does it hold at the busiest pixel?
  5. Which is your lightest still-passing grey on white (benchmark near 767676)?
Worksheet: Failing-Colour Fix Log
For each failing pair, adjust lightness in HSL or LCH while keeping the hue, re-check, and record the fixed value and its new ratio. Promote each fix into a named token.
  • Element and original hex
  • Background hex
  • Original measured ratio
  • Adjusted hex (hue kept, lightness changed)
  • New measured ratio (must pass)
  • Tonal ramp step it maps to (e.g., 700 on white)
  • Token name assigned (e.g., text-primary)
Checklist: Contrast Pass Complete
  • All body text measured at 4.5:1 or higher
  • All large text measured at 3:1 or higher
  • All meaningful icons, borders, and focus rings at 3:1 or higher
  • Text over images checked at the lightest/darkest background pixel
  • Long-form reading text considered for 7:1 (AAA)
  • Fixes stored as design tokens with documented approved pairings
  • Dark theme (if any) re-checked separately - white-on-white assumptions removed

Readable Type and Inclusive Visuals

Set type that stays legible and resizable, then make every piece of colour-carried meaning survive without colour.
Worksheet: Type Legibility Specification
Record your text settings against the legibility targets from the course. Confirm type is sized in relative units so it can resize to 200 percent.
  • Body font size (px and rem) - 16px / 1rem or larger
  • Body line height - target about 1.5
  • Line length / max-width - target 45-75 characters (~65ch)
  • Paragraph spacing - at least 1.5-2x the font size
  • Smallest text size used anywhere (and is it justified?)
  • Units used for type (rem/em so 200% zoom works?)
  • Typeface legibility check: I, l, and 1 distinguishable? (Y/N)
Exercise: The Greyscale Survival Test
Convert each key screen to greyscale and check that every piece of meaning currently carried by colour still survives. List what breaks and the second cue you will add.
  1. Which statuses, errors, or categories rely on colour alone and vanish in greyscale?
  2. What second channel will you add to each (icon, shape, label, underline, pattern)?
  3. Are in-text links distinguishable without colour (e.g., underlined)?
  4. Do charts stay readable with markers, line styles, or direct labels?
  5. Are required fields marked with text or an asterisk, not just a coloured outline?
Exercise: Colour-Vision Simulation Pass
Run your signalling colours and charts through deuteranopia and protanopia simulation (Stark, Sim Daltonism, or Color Oracle). Note any pairings that collapse and choose safer ones.
  1. Which colour pairs become hard to tell apart under deuteranopia/protanopia?
  2. Where are you using red and green as the only distinction between opposite meanings?
  3. Which signalling colours differ by lightness as well as hue (and which do not)?
  4. For any data visualisation, will you switch to Okabe-Ito, Viridis, or ColorBrewer safe sets?
Checklist: Readable & Inclusive Pass Complete
  • Body text 16px+ and sized in rem/em for 200% resize (WCAG 1.4.4)
  • Line height ~1.5 and line length within 45-75 characters
  • No information conveyed by colour alone (WCAG 1.4.1) - greyscale test passed
  • Errors and statuses use icon + text alongside colour
  • Deuteranopia and protanopia simulations run on key screens
  • No rapid flashing above three flashes per second (WCAG 2.3.1)
  • Reduced-motion respected for non-essential animation (WCAG 2.3.3)

Interaction States and Auditing Your Work

Design visible focus and honest states, run a repeatable audit, and hand off an annotated accessibility spec.
Worksheet: Interactive State & Target Specification
For each interactive component, specify every state and confirm focus visibility and target size. Repeat this for buttons, links, inputs, and custom controls.
  • Component name
  • Default appearance
  • Hover appearance (not the only cue, since touch has no hover)
  • Focus indicator (2px+ ring, 3:1 contrast, with offset?)
  • Active / pressed appearance
  • Disabled appearance (clearly non-interactive but not invisible)
  • Error / selected appearance (icon + text, not colour alone)
  • Target size in CSS px (>= 24 for AA, >= 44 for AAA) and spacing to neighbours
Exercise: Annotate the Handoff Frame
On your handoff frame, add the accessibility notes a developer cannot see in a static mockup. Use Stark annotations, A11y - Focus Order, or Axe for Designers to place them.
  1. What is the intended heading structure and logical reading order?
  2. What is the focus order through every interactive element (numbered)?
  3. What alt text does each meaningful image need, and which images are decorative (skip)?
  4. What accessible name, role, and state does each custom control need?
  5. Are the approved colour tokens and all interaction states included in the handoff?
Checklist: Repeatable Audit Run
  • Contrast checked on all text and meaningful non-text (Stark / CCA)
  • Type size, line height, line length, and resizability confirmed
  • Greyscale pass and deuteranopia/protanopia simulation completed
  • Focus visible and hover/active/disabled/error states designed
  • Target sizes meet 24px (AA) or 44px (AAA) with adequate spacing
  • Built page scanned with WAVE or axe DevTools to catch the automated 30-40%
  • Every finding logged with screen, element, WCAG criterion, values, and severity
Worksheet: Alt-Text Decision Sheet
Decide the alt text or decorative status for each image. Describe purpose in context, keep functional alt short, and never start with Image of.
  • Image / element
  • Decorative or meaningful?
  • If meaningful, alt text (purpose in context, not literal description)
  • If an icon button, the action it names (e.g., Search)
  • If a chart, the takeaway stated in the alt text
  • If decorative, marked to be skipped by screen readers (Y/N)

Your Action Plan

  1. Write the Conformance Target Brief (WCAG 2.2 AA by default) and put it in the project brief.
  2. List your users and the specific visual, motor, and cognitive barriers each could hit.
  3. Audit every foreground-on-background pairing for contrast with WebAIM, Stark, or the TPGi CCA.
  4. Fix each failing colour by changing lightness in HSL/LCH, then store it as a named token.
  5. Set readable type: 16px+ body, ~1.5 line height, 45-75 character lines, sized in rem for 200% resize.
  6. Run the greyscale test and add a second cue (icon, shape, label, underline) wherever colour carried meaning.
  7. Simulate deuteranopia and protanopia, and swap any red/green-only signalling for lightness-distinct or safe palettes.
  8. Design every state - default, hover, focus, active, disabled, error - with a visible 2px+ focus ring at 3:1.
  9. Confirm target sizes (24px AA / 44px AAA) and adequate spacing on all interactive elements.
  10. Run the repeatable audit, log each issue with its WCAG criterion and severity, and fix blockers and majors.
  11. Annotate the handoff frame with reading order, focus order, alt text, and control roles.
  12. Fold accessible tokens, components with built-in states, and the audit checklist into your design system.

Pairs well with

Courses members commonly take alongside this one.

Flagship CoursePreview

Freelance Business Foundations: Position, Price, Sell, and Deliver High-Value Services

Freelancing · Beginner · 16h

Build a freelance business clients understand, trust, and pay for—without vague positioning, random referrals, or underpriced custom work.

Self-pacedPreview
Client GrowthPreview

Freelance Client Acquisition: Outreach, Leads, Referrals, and Deal Flow

Freelancing · Beginner · 15h 30m

Build a repeatable acquisition system that turns targeting, outreach, referrals, and follow-up into a stable freelance opportunity pipeline.

Self-pacedPreview
Sales SystemPreview

Freelance Sales & Proposals: Discovery Calls, Scoping, Objections, and Closing

Freelancing · Intermediate · 16h

Run better discovery calls, scope work properly, write proposals clients can decide on, and close without discounting your value into the floor.

Self-pacedPreview