Visual design decisions that feel purely aesthetic — a brand color, a light gray caption, a thin typeface, a removed focus outline — can quietly make an interface unusable for people with low vision, color vision deficiency, or age-related sight changes. This topic looks at the visual layer of accessibility: how much contrast text and UI components need, why color alone cannot carry meaning, how typography choices affect readability, and how users who navigate by keyboard need to see where they are on the page.
These concerns are codified in the WCAG 2.1 success criteria you are studying in this module, most notably the contrast ratio thresholds for text and non-text content, the "use of color" criterion, and the requirements for visible focus. Knowing the numbers matters, but so does knowing how to measure them with real tools and how to fix a design without throwing away its visual identity.
As you watch, pay attention to three things: the specific ratio targets and what counts as large text, the workflow each presenter uses to test an existing screen, and the design moves they make when a color fails — adjusting lightness, adding an icon or text label, or changing the element rather than the palette. Try the same steps on an interface you use daily, or on your own prototype.
A short, practical walkthrough of checking color contrast against WCAG 2.1 AA requirements using common tools such as the TPGI Colour Contrast Analyser and the WebAIM contrast checker. Expect to see colors sampled from a real interface, ratios reported, and pass/fail results interpreted against the standard.
It is the most direct, hands-on treatment of the contrast ratio subtopic, and The Accessibility Guy frames everything explicitly in terms of WCAG criteria, which connects the measurement step to the standards you need to cite.
A designer-oriented look at contrast failures and how to repair them, covering what the requirements actually ask for and how to adjust colors so a palette still works visually while passing. Given the channel's focus on type, expect discussion of text legibility, size and weight alongside the color values themselves, plus an accompanying cheat sheet.
Pimp my Type bridges the contrast and typography subtopics, showing not just that a color fails but how to fix it — which supports the prototype-revision work in this module.
A beginner-friendly tutorial that builds accessible UI choices into a Figma design workflow, discussing why accessible interfaces matter and demonstrating several techniques for achieving them. Likely topics include color and contrast checks, legible text sizing, and designing states and indicators so meaning does not depend on color alone.
It places accessibility inside a design tool students are likely to use for prototypes, making it a good complement to the testing-focused videos and a natural lead-in to avoiding color as the sole indicator and designing visible visual states.
Together these videos move from standard to inspection to repair. The TPGI/WebAIM walkthrough grounds you in WCAG 2.1 AA contrast criteria and the tools that verify them (MO1), and both testing-oriented videos model how to audit an existing screen for visual barriers such as low-contrast text or invisible focus states (MO2). The Pimp my Type and Figma tutorials then show how to change a design — colors, type, labels, indicators — so it meets those thresholds without losing its character (MO3). The recurring argument in all three, that these are requirements rather than preferences because real users are excluded when they are ignored, supports the ethical and legal reflection asked for in MO4.
These videos were chosen from YouTube on October 3, 2026. Each has captions; the player turns them on. Videos on YouTube can be changed or removed — if one no longer plays, tell your instructor. If a player does not appear, use its Watch on YouTube link.