Assess WCAG AA contrast for light grey text on off-white

WHAT THIS TESTS: This question tests whether you can move beyond visual intuition and apply the precise WCAG 2.1 relative luminance calculation to a real design scenario. Interviewers want to see that you understand sRGB color space normalization, the distinction between normal and large text thresholds, and how to advocate for accessibility without overriding the designer's intent. It also surfaces your ability to automate or script the check rather than relying on manual guesswork.

A GOOD ANSWER COVERS: First, programmatic extraction of the foreground and background colors from the mockup, either by reading Figma's API, parsing CSS, or sampling hex values. Second, converting each sRGB channel from gamma-compressed values to linear light using the piecewise formula where values below 0.03928 are divided by 12.92 and others are raised to the power of 2.4. Third, computing relative luminance with the weighted sum 0.2126 times the red channel plus 0.7152 times the green channel plus 0.0722 times the blue channel. Fourth, calculating the contrast ratio as the lighter luminance plus 0.05 divided by the darker luminance plus 0.05. Fifth, comparing the result to the correct threshold, which is 4.5 to 1 for normal text and 3 to 1 for large text defined as at least 18.5 pixels or 14 point bold. Sixth, if the ratio fails, generating an accessible alternative by darkening the original grey while preserving its hue and saturation, presenting the designer with a side-by-side comparison and the exact ratio gained.

COMMON WRONG ANSWERS: A major red flag is saying you can eyeball contrast or trust your monitor's brightness settings. Another is rounding a computed ratio like 4.499 to 1 up to 4.5 to 1, because WCAG explicitly treats these as strict thresholds without rounding. Some candidates suggest switching to pure black text, which ignores the design intent and signals an adversarial rather than collaborative relationship with design. Failing to mention the large text exception or misstating the 18 pixel versus 18.5 pixel cutoff also weakens the answer.

LIKELY FOLLOW-UPS: The interviewer might ask how you would integrate this into a CI pipeline, such as writing a script that parses design tokens or CSS custom properties and fails the build on contrast violations. They might also probe how you handle gradients, transparency, or text overlaid on images where the background is not a single solid color. Another follow-up is how you would balance brand color requirements when the brand palette itself fails contrast, which tests your ability to negotiate between accessibility and marketing constraints.

ONE CONCRETE EXAMPLE: Suppose the mockup uses a foreground of hex C0C0C0 and a background of hex FAFAFA. Converting C0C0C0 gives a relative luminance of roughly 0.527, while FAFAFA gives roughly 0.98. The contrast ratio is approximately 1.85 to 1, which fails both thresholds. To fix it while keeping the cool grey feel, you might darken the foreground to hex 767676, which yields a relative luminance of about 0.183 and a contrast ratio of roughly 4.54 to 1 against the same background, just clearing the 4.5 to 1 bar for normal text. You would present this to the designer as a one-percent shade shift that maintains the original aesthetic.