Roughly one in twelve men has some form of color vision deficiency. Many people use phones with larger text, with a screen reader, with one shaky thumb on a bus, or in bright sunlight. None of them are edge cases; together they are a large share of Steady’s users, and most of what helps them makes the app better for everyone.
\nAccessibility is cheapest at design time. A contrast failure costs a color change in Figma, and much more once it ships across a dozen screens. This lesson walks Steady through the checks Sofia runs before any handoff.
\nYou learned the numbers in Lesson 1.3 and re-checked them in dark mode in Lesson 3.4. Now apply them to the things that are easy to forget:
\nFigma’s contrast checker in the color picker covers individual pairs as you work. On Organization and Enterprise plans, at the time of writing, Check designs can also flag contrast issues across a selection.
\nSteady’s first design showed a missed habit with a red check circle and nothing else. To someone who cannot distinguish red from teal, every habit looks the same. WCAG’s Use of Color criterion requires that color is never the only way meaning is conveyed.
\nThe fix is a second cue: the Missed variant gets an x icon inside the circle and a “Missed yesterday” caption under the name; Done gets a check mark and the name in the secondary text color. Color still helps, but shape and words carry the meaning. Test it by viewing the screen in grayscale: if you can still tell the states apart, you have passed.
\nWCAG 2.2 sets a minimum at level AA: interactive targets of at least 24 × 24 CSS pixels, or enough spacing around smaller ones. Platform guidelines go further for comfort: Apple recommends 44 × 44 points, and Material Design recommends 48 × 48 dp. For a phone app, design to the platform guideline.
\nThe visible shape and the tappable area do not have to match. Steady’s check circle stays a 32 px circle visually, but the Check button component is a 44 × 44 frame with the circle centered in it. The frame’s bounds tell developers the real hit area.
\nPeople using a keyboard, switch control or a screen reader move through a screen one element at a time. Two design decisions affect them directly.
\nFocus states. Every interactive component needs a visible focus style, usually a 2 px ring in a color that meets 3:1. Add Focused to the State property of Button, Chip, Text field and Check button, so it exists in the kit, not as an afterthought.
Focus order. The order should follow the visual reading order: on the New habit sheet, that is close, name field, icon picker, frequency chips, reminder toggle, Save habit. Usually developers get this right by default if the layout is logical; when your layout is unusual, annotate the order with numbered markers. Figma’s annotations include an Accessibility category at the time of writing, which keeps these notes separate from spacing specs (Lesson 4.3).
\nScreen readers announce elements by name. An icon-only add button would be read as “button” unless someone gives it a name, so annotate it: accessible name: “Add habit”. The text field needs a visible label, “Habit name”, not just hint text that vanishes when typing starts.
\nFinally, remember the 30% larger text test from Lesson 2.4. iOS and Android both let people enlarge text system-wide. Rows built with Hug height and Auto height text grow gracefully; anything with a fixed height clips. Respecting reduced-motion settings belongs here too: annotate a simpler fade as the alternative to your streak celebration.
\n\nWith the screens checked and annotated, they are nearly ready for developers. Next you hand them off in Dev Mode.
\n","toc":[{"id":"sec-1","text":"Contrast, again, everywhere","level":2},{"id":"sec-2","text":"Never color alone","level":2},{"id":"sec-3","text":"Targets big enough for thumbs","level":2},{"id":"sec-4","text":"Focus order and focus states","level":2},{"id":"sec-5","text":"Names, labels and text size","level":2}],"takeaways":["Meaning must never rely on color alone; pair color with an icon, text or shape change.","WCAG 2.2 AA asks for touch targets of at least 24 by 24 CSS pixels, while Apple and Google recommend 44 points and 48 dp, so design to the platform guideline.","A target’s tappable area can be larger than its visible shape, which lets a 32 px check circle sit inside a 44 px hit area.","Every interactive element needs a visible focus state, and the focus order should follow the reading order you annotate.","Icon-only buttons need an accessible name and inputs need visible labels, and both belong in your handoff annotations."],"further":[{"title":"Understanding SC 1.4.1 Use of Color","url":"https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html"},{"title":"Understanding SC 2.5.8 Target Size (Minimum)","url":"https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html"},{"title":"Accessibility (Apple Human Interface Guidelines)","url":"https://developer.apple.com/design/human-interface-guidelines/accessibility"},{"title":"Accessibility designing (Material Design 3)","url":"https://m3.material.io/foundations/designing/structure"}],"quiz":[{"q":"Steady marks a missed habit by turning the row’s check circle red. Nothing else changes. What does WCAG’s Use of Color criterion ask you to add?
","options":[{"text":"A brighter red so it stands out more.","why":"Any red, however bright, is still color alone. People with color vision deficiencies may not tell it from teal or gray."},{"text":"A tooltip that appears on hover.","why":"Phones have no hover, and the meaning should be visible without extra steps."},{"text":"A second cue that does not depend on color, such as an x icon in the circle and the word “Missed” under the name.","why":"Correct. Color can support the meaning, but a shape or text must carry it too."},{"text":"Nothing, because red is universally understood as a warning.","why":"The meaning of red is cultural, and many people cannot reliably see it. The criterion asks for a non-color cue."}],"answer":2},{"q":"The check circle is drawn at 32 × 32 px. How do you meet Apple’s 44 pt recommendation without making it look bigger?
","options":[{"text":"Make the Check button component a 44 × 44 frame with the 32 px circle centered inside it.","why":"Correct. The component’s bounds become the tappable area, and developers implement the larger hit area from it."},{"text":"Scale the circle up to 44 px.","why":"That meets the size but changes the visual design. You can have both with a larger invisible frame."},{"text":"Leave it, because 32 px already passes WCAG’s 24 px minimum.","why":"It passes the AA minimum, but the platform guideline for comfortable tapping is larger, and Steady is a phone app."},{"text":"Add a note asking developers to make it easier to tap.","why":"A vague note leaves the size to guesswork. Building the hit area into the component makes it exact."}],"answer":0},{"q":"A keyboard or switch-control user moves through the New habit sheet. Which design deliverable helps developers get the order right?
","options":[{"text":"A larger font size for the sheet title.","why":"Size affects visual hierarchy, not the order focus moves in."},{"text":"A dark-mode version of the sheet.","why":"Modes change colors, not navigation order."},{"text":"A smart animate transition between fields.","why":"Animation does not tell anyone which element receives focus next."},{"text":"Numbered focus-order annotations on the sheet, plus a designed focus state for each control.","why":"Correct. Developers see the intended order and know exactly what focus looks like."}],"answer":3},{"q":"Why should the New habit text field have a visible label above it, not only hint text inside it?
","options":[{"text":"Hint text is not allowed in Figma text fields.","why":"Figma lets you design hint text freely. The issue is how people use the field."},{"text":"Hint text disappears as soon as someone types, so the field loses its instructions, and light hint colors often fail contrast.","why":"Correct. A persistent label keeps the purpose visible and gives screen readers a reliable name."},{"text":"Labels make the field taller, which improves the layout.","why":"Height is a side effect, not the reason. The reason is that hints vanish and are often too faint."}],"answer":1}],"exercise":{"kind":"fill","language":"text","template":"Steady accessibility checklist, New habit sheet\n\nTargets\n WCAG 2.2 AA minimum target size {{0}} CSS px (each side)\n Apple recommendation (iOS build) {{1}} pt (each side)\n Material recommendation (Android) {{2}} dp (each side)\n\nContrast\n \"Habit name\" label, 15 px {{3}}:1\n Focus ring against the sheet {{4}}:1\n\nMeaning\n Missed state = red circle + x icon + the word \"Missed\"\n (never {{5}} alone)","blanks":[{"answers":["24"]},{"answers":["44"]},{"answers":["48"]},{"answers":["4.5"]},{"answers":["3","3.0"]},{"answers":["color","colour"]}],"title":"Complete the accessibility checklist","prompt":"Before handing off the New habit sheet, Sofia fills in this checklist. Complete it with the numbers from WCAG 2.2 and the platform guidelines, and the one word that finishes the last rule. Numbers only for the numeric blanks.
\n","hints":["WCAG’s AA target minimum is smaller than either platform’s recommendation.","A 15 px label is normal text. A focus ring is a non-text visual indicator.","Targets: 24, 44, 48. Contrast: 4.5 and 3. The rule is about color."],"explanation":"WCAG 2.2 SC 2.5.8 sets the AA minimum at 24 × 24 CSS px (or enough spacing around smaller targets). Apple recommends 44 × 44 pt and Material recommends 48 × 48 dp; for a phone app, design to the platform number. A 15 px label is normal text, so it needs 4.5:1. A focus ring is a non-text indicator and needs 3:1 against its surroundings. And SC 1.4.1 says meaning is never conveyed by color alone, which is why the Missed state also has an icon and a word.
\n","checkLabels":{}},"words":828,"readMinutes":4}