tezvyn:

What is the accessibility problem with color-only status and two fixes?

AI-drafted, machine-checkedSource: w3.orgbeginner

This tests WCAG 1.4.1 Use of Color: red-green status is invisible to many colorblind users. A strong answer names two non-color cues like icons or text labels. A red flag is claiming high contrast alone fixes the problem without a secondary visual indicator.

WHAT THIS TESTS: This question evaluates your knowledge of WCAG 2.1 Success Criterion 1.4.1 Use of Color at Level A. The interviewer wants to know whether you recognize that color alone is an unreliable channel for conveying critical information. They are looking for awareness that a significant portion of the population has color vision deficiencies, and that devices or settings may render colors in grayscale. The core concept is that visual communication must have a redundant channel so that no single point of failure such as hue perception blocks comprehension.

A GOOD ANSWER COVERS: A strong response names the problem precisely: when a component relies exclusively on red for error and green for success, users with deuteranopia or protanopia may see both states as indistinguishable tones. Then it offers two distinct remediation strategies. First, add meaningful icons or shapes, such as a triangle with an exclamation mark for errors and a circle with a checkmark for successes, so the status is readable by shape rather than hue. Second, include explicit text labels like Error or Success directly adjacent to or within the component, ensuring the meaning is conveyed through language. Mentioning that these cues must be visible without hovering or interacting shows interface-level thinking.

COMMON WRONG ANSWERS: A major red flag is claiming that increasing the contrast ratio or choosing darker shades of red and green solves the problem. While WCAG notes that a 3 to 1 contrast ratio between two hues can serve as an additional visual distinction, it explicitly states that if the user must accurately perceive a specific color meaning such as valid versus invalid, an additional indicator is still required regardless of contrast. Another wrong answer is suggesting that screen reader support alone fixes the issue; SC 1.4.1 targets sighted users who do not use assistive technology but still cannot distinguish certain colors. Proposing tooltips as the only alternative is also weak because it hides the information behind an interaction.

LIKELY FOLLOW-UPS: An interviewer may ask how you would handle this in a design system at scale, which tests whether you can codify accessibility into reusable components. They might also ask how you would validate the fix, probing for knowledge of color blindness simulators in Figma or browser dev tools. A third follow-up could involve asking what you would do if the brand palette is strictly red and green, which tests your ability to advocate for accessible design within brand constraints.

ONE CONCRETE EXAMPLE: Imagine a form submission button that turns green on success and red on failure. A passing design pairs the color with a status banner: on failure, the banner shows a red alert triangle and the text Submission failed, please try again; on success, it shows a green checkmark circle and the text Saved successfully. The icon shapes differ, the text differs, and the color reinforces rather than carries the message.

Read the original → w3.org

Get five bites like this every day.

Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.