How does colour contrast work and what ratios are required?
Assesses fundamental understanding of Web Accessibility conventions, runtime behavior, and memory/performance considerations.
Hiring managers look for precision, avoidance of ambiguous jargon, and ability to explain trade-offs under real production conditions.
WCAG contrast is measured as a ratio between the relative luminance of text and its background, ranging from 1:1 to 21:1. At level AA, normal text needs at least 4.5:1 and large text, meaning 18pt or 24px, or 14pt bold, needs 3:1. At AAA the thresholds are 7:1 and 4.5:1. Non-text content such as form borders, meaningful icons and focus indicators needs 3:1 against adjacent colours under the non-text contrast criterion.
Important nuances: colour alone must never convey information, so pair colour with text, an icon or a pattern. Links inside body text need to be distinguishable by more than colour. Ratios apply to solid backgrounds; text over images needs a scrim or solid backing.
Check with browser DevTools' contrast checker or tools like axe and the Colour Contrast Analyser, and test both light and dark themes. A passing ratio does not guarantee readability for people with low vision, but it is the enforceable baseline.
Candidate Response Strategy & Interview Tips
- Start with a concise one-sentence summary: Deliver a direct, confident answer first before expanding into nuances.
- Demonstrate real-world trade-offs: Discuss where this approach excels and when you would avoid it in production systems.
- Discuss complexity & edge cases: Proactively explain time/space complexity or boundary conditions (null values, scale limits).
- Prepare for interviewer follow-ups: Technical hiring panels frequently probe deeper into concurrency, backward compatibility, or alternative libraries.