A designer marks required form fields with red text and optional fields with green text. A user with red-green color blindness cannot distinguish them. What is the correct fix?
ASwitch to a color pair with higher contrast ratio, such as blue and orange
BUse a different color combination that all users can distinguish, ensuring color alone still conveys the distinction
CAdd a redundant encoding — an icon, asterisk, or text label — so the required/optional distinction is conveyed through a channel beyond color
DRemove the color coding and rely solely on placement and layout to communicate field status
The core principle is redundant encoding: critical information should never depend on color alone. The fix is not to find a 'better' color pair (option B merely perpetuates reliance on color), nor to remove color entirely (option D discards a useful channel). The accessible solution adds a second channel — an asterisk, the word 'required,' a border change, or an icon — so that someone who cannot distinguish the colors still gets the same information. Color can still be used for enhancement; it just cannot be the sole carrier of critical meaning.
Question 2 Multiple Choice
A designer creates text that just barely meets the WCAG AA 4.5:1 contrast requirement on their calibrated monitor. Why might this still be insufficient in practice?
AWCAG AA is outdated — the current standard requires 7:1 for all text
BA ratio that barely passes on a calibrated monitor may fall below threshold on sun-washed phone screens, older displays, or for users with mild visual impairment
CThe 4.5:1 ratio applies only to body text; headings and UI labels require higher ratios
DContrast ratios are calculated differently across browsers, so a passing ratio may fail on some devices
Contrast requirements represent minimum thresholds under ideal conditions, but real-world viewing varies dramatically: bright sunlight on a phone screen can wash out contrast, older or cheaper displays may render colors less accurately, and mild visual impairment (more common than full color blindness) reduces perceived contrast. Designing with generous margins — aiming for 7:1 where practical — builds resilience across these conditions. The Explainer describes contrast as 'a continuum, not a binary,' emphasizing that barely passing is a fragile outcome.
Question 3 True / False
Redundant encoding in accessible design means every critical piece of information should be conveyed through at least two independent visual pathways, so that removing color as a channel leaves the information still fully accessible.
TTrue
FFalse
Answer: True
This is the principle's exact definition and purpose. Redundant encoding ensures that when any single channel (color, shape, position, text) is unavailable to a user — due to color vision deficiency, screen conditions, or other factors — another channel still carries the message. A well-designed error state uses color AND an icon AND a text label; a well-designed chart uses color AND different line styles AND direct labels. No single piece of critical information should require a specific perceptual ability to receive.
Question 4 True / False
Creating an accessible color palette requires using desaturated or muted colors, which limits the vibrancy and visual expressiveness available to the designer.
TTrue
FFalse
Answer: False
This is the most common misconception the topic explicitly addresses. The constraint in accessible design is on the luminance relationship between foreground and background — not on hue or saturation. A vivid, saturated color can still meet contrast requirements if its luminance differs sufficiently from the background. Many striking design systems use bold, highly saturated palettes that fully comply with WCAG. The Explainer states: 'An accessible palette can be vibrant and distinctive; the constraint is not on hue or saturation but on the luminance relationship between foreground and background.'
Question 5 Short Answer
A designer argues that using light gray text for placeholder labels and timestamps creates useful visual hierarchy that helps users focus on primary content. What is wrong with this approach, and how should visual hierarchy be created instead?
Think about your answer, then reveal below.
Model answer: Making text harder to read is not a valid way to create hierarchy — it sacrifices the accessibility of secondary content rather than elevating primary content. Visual hierarchy should come from typographic choices (size, weight, typeface) and layout (spacing, position) that make important elements stand out without making less-important elements illegible. Light gray text on white backgrounds commonly fails contrast requirements and becomes unreadable for users with visual impairments or on poor-quality screens.
The Explainer identifies this as 'the most common design failure': designers reach for low contrast to signal secondary status, but the result is that secondary information becomes inaccessible rather than de-emphasized. The accessible approach is to use size (larger = more important), weight (bold = primary), and spacing (isolation = significance) to build hierarchy — then apply color as enhancement on top of a structure that already communicates priority without requiring any specific color perception.