The Brand Blue That Failed Contrast on the Dark Section

When we shipped the homepage redesign, one section went dark: the process band ("Scope it. Build it. Run it.") sits on a near-black background. Every other section is light. The split is intentional, a visual anchor that breaks the scroll rhythm.

The problem showed up as soon as we tried to use the accent color there. Our brand blue is #0B5CAB. On the off-white background (#F7F7F5) it clears 5.1:1 against normal text, which is fine. On #111, the same color measures 2.82:1. WCAG AA requires 4.5:1 for normal text. We were almost half a point under the floor.

The obvious move is to just use white on dark sections. White works. But it breaks the signal. The accent color on light sections means something: it marks the step numbers, the service labels, the things worth noticing. If dark sections use a completely different color without a reason, that signal loses its meaning.

The right fix is a second token. We added --color-accent-on-dark: #7FB2FF to the CSS variables. That is a lighter tint of the same hue, pushed up the lightness scale until the contrast was adequate. On #111 it measures 8.74:1, which clears both AA and AAA. On the off-white background it would be 2.8:1, which fails, but it never appears there.

The name carries the constraint. --color-accent means the accent for light surfaces. --color-accent-on-dark means the accent for dark surfaces. The naming makes the intent impossible to miss and the mistake harder to make. If someone copies a component from a light section and drops it onto the dark band, the token name tells them something is different about this context. You cannot accidentally paste --color-accent onto a dark background and have it blend in.

We also checked the body copy on the same dark band. The off-white background color at 70% opacity (text-background/70) measures 8.90:1 on #111, which is solid. That means we only needed a second token for the accent, not for body text.

The implementation lives in studio.css under the .studio-home scope, next to the rest of the tokens for that redesign. The dark band is the only place --color-accent-on-dark appears today. If we add another dark section later, the token and its rationale are already documented.

One thing worth noting: contrast ratios are a function of resolved hex values, not CSS variable names. A checker that reads --color-accent cannot tell you the ratio without resolving the token first. We checked the actual rendered values against #111, not the variable names. That step is easy to skip when you are working quickly. It is also the step that determines whether the page passes or fails.

The dark section shipped. The brand blue is still the brand blue. The math holds.