The Brand Color Change That Broke Contrast
A client rebrands and changes the primary brand color from a mid-blue (#2B5D9E) to a lighter sky blue (#7FB2E5). The color is defined once in a Site Studio base style / theme variable and is used across buttons, links, and headings. After the change, accessibility audits flag multiple failures: white text on the new blue buttons fails WCAG AA contrast, and link text on white backgrounds also fails. The client insists on the exact new color and does not want to change the palette. Editors have already built dozens of pages using the button and link components.
1. How do you resolve the contrast failures while honoring the client's exact brand color?
Read the worked answer
The brand color can stay as the brand color without being the text-on-color or text-on-white color. Resolve by separating roles:
- Buttons: keep #7FB2E5 as the button background, but switch the label to a dark neutral (e.g., near-black or a dark brand tint) that meets 4.5:1 against #7FB2E5. White text on light blue is the failure; the fix is the foreground, not the background.
- Links on white: #7FB2E5 on white fails AA for body text. Use a darker accessible variant of the brand hue for link text (same hue family, lower lightness) so it reads as on-brand while meeting contrast. Reserve the light brand color for large decorative elements and non-text accents.
- Headings: large text has a lower contrast threshold (3:1 for large text), so verify each use case against its actual size and weight rather than applying one rule everywhere.
The judgement: treat color as a system of roles (brand, surface, on-surface text, link) rather than a single global value, so the brand color is honored where it is decorative and a compliant variant is used where it carries text.
2. Because the color lives in a shared base style, what is the change-management risk and how do you mitigate it?
Read the worked answer
A single global variable means one edit propagates everywhere - powerful but dangerous: you cannot see the blast radius before saving, and dozens of existing pages will change at once.
Mitigation:
- Inventory usage first: search the codebase/styles for the variable and the literal hex to find every consumer before changing it.
- Introduce semantic tokens (e.g.,
--button-bg,--button-text,--link-color) that reference the brand value, so future brand changes touch tokens, not components. - Stage and review: apply the change on a lower environment, run an automated contrast/accessibility check across representative pages, and get sign-off before production.
- Communicate to editors that the visual change is global, so they don't "fix" individual pages.
The tested judgement is recognizing that centralized styling trades local control for global blast radius, and managing that trade-off deliberately.