tezvyn:

Fixing brand color contrast at the system level

AI-drafted, machine-checkedSource: interviewintermediate
WHAT IT TESTS

systemic accessibility thinking.

OUTLINE

build a tonal palette with known contrast steps, define semantic text-on-surface token pairs that pass AA, and enforce with automated contrast checks.

WHAT THIS TESTS The interviewer wants systemic reasoning: turning a recurring accessibility failure into a structural guarantee instead of a backlog of one-off fixes.

A GOOD ANSWER COVERS Root-cause the problem in the palette. Build colors as tonal scales with controlled lightness steps, so you know which steps meet a target contrast ratio against light or dark surfaces. Then encode accessibility into semantic tokens: define pairs like text-on-primary, text-on-surface, and text-on-error whose values are chosen to clear WCAG AA, which is 4.5:1 for normal text and 3:1 for large text and UI components. Consumers reference the semantic pair, not raw brand hexes, so they cannot accidentally place failing text on a background. Finally, enforce it: add automated contrast checks in CI that fail the build when a token pair regresses, and lint or restrict the design tooling so only valid combinations are selectable.

COMMON WRONG ANSWERS Manually darkening text on the few screens flagged by QA, which leaves the systemic gap open. Lowering the standard or claiming brand color is fixed and untouchable; you adjust usage and add accessible tints rather than abandoning AA. Relying solely on a manual checklist, which humans forget under deadline.

LIKELY FOLLOW-UPS What if the brand color itself cannot pass on white? Provide an accessible darker tint for text use and reserve the vivid brand color for large surfaces or decoration. WCAG versus APCA? APCA, the perceptual model proposed for WCAG 3, often better reflects real legibility, so some systems test against both. How do you handle disabled states? They are exempt from the contrast requirement but should still be perceivable.

ONE CONCRETE EXAMPLE Brand blue #0052CC has roughly 7:1 contrast with white, so white text on it passes; but a light brand tint #4C9AFF fails for body text. Instead of fixing each card, you define a token text-on-brand that always resolves to white for the strong blue, expose a separate brand-subtle surface paired with a dark text token, and add a CI test asserting every text-on-surface pair stays above 4.5:1, so any future palette tweak that breaks contrast fails the build before release.

Read the original → stripe.com

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.