Fix AA contrast on the vertical bands, not in the palette (4.9.0) - #105
Merged
Merged
Conversation
Three verticals placed light text on a brand-coloured band too light to carry it: Nail Salon's stats bar and CTA at 3.30:1, Home Improvement's stats bar, top bar and header pill at 2.85:1, and the Spa booking CTA at 2.19:1. WCAG 2.1 AA asks 4.5:1. They now reach 4.93:1, 6.36:1 and 9.54:1. Every fix uses a colour already in that variation's palette. Nail Salon's band steps down to primary-alt and its gradient to primary-alt -> primary-alt-accent. Home Improvement keeps its signature orange and switches the label to main. The Spa CTA moves onto main, the deep teal its palette already defines. Also fixes the contact-form submit buttons in both variation stylesheets (white labels at 3.40:1 and 2.85:1) and Home Improvement's focus ring, which at 2.85:1 sat under the 3:1 WCAG 1.4.11 wants of a control boundary. The palettes are deliberately untouched. Darkening `primary` fixes text on a primary background and breaks primary as text on the dark surfaces, which is where these sites use it most — Home Improvement would go from 6.36:1 to 3.41:1 on its navy. No single value satisfies both: each variation's `base` and `main` are 15.49:1, 15.39:1 and 9.54:1 apart, capping any one colour at 3.94:1, 3.92:1 and 3.09:1 against both. One token cannot serve a light and a dark surface, so the fix belongs where light text meets the brand colour. Only the plumbing header's two orange regions are retargeted; its navigation bar sits on `secondary` navy, where the white site title is correct.
Checking the rendered pages turned up the same failure in the buttons, which the band fix did not reach: the filled button paired a light `primary` background with light text at 3.30:1, 2.85:1 and 2.19:1. Fixed per variation in styles.elements.button, and in the patterns that set the colours explicitly and so override it. Nail Salon's buttons move to primary-alt (4.93:1), Home Improvement keeps its orange and darkens the label to main (6.36:1), Spa moves to main (9.54:1). Home Improvement had no elements.button of its own and now gets one, keeping the change scoped to that variation rather than every theme sharing theme.json's default. The Spa booking CTA needed explicit button colours too: with the band on `main`, the shared button-light style put cyan on white at 2.19:1 and the filled button would have matched the band exactly. They are now white and primary-alt mint, both with a main label, at 9.54:1 and 6.03:1. Palettes remain untouched.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Replaces #104, which fixed the wrong half of the problem. Follow-on from Aludra #33.
Problem
Three verticals put light text on a brand colour too light to carry it — in their bands, their buttons, and their contact forms:
baseonprimary)whiteonprimary)baseonprimary)button-light/ fill)Why the bands and buttons, not the palette
#104 darkened
primaryin these three variations. That fixed text on a primary background and broke primary as text on the dark surfaces, which is where these sites use it most:basemainHome Improvement's site is overwhelmingly dark navy, so that was a net loss.
No single value can satisfy both. Each variation's
baseandmainsit 15.49:1, 15.39:1 and 9.54:1 apart, so the best any one colour can score against both is 3.94:1, 3.92:1 and 3.09:1 — all under 4.5:1. One token cannot serve a light surface and a dark one.The palettes are untouched here.
git diff main -- styles/shows onlystyles.elements.button; no palette entry moves.Approach
Every fix uses a colour that variation already defines:
primary-alt/primary-alt-accent.main. Only the two orange regions of the header are retargeted; the nav bar sits onsecondarynavy where the white site title is correct. It had noelements.buttonof its own and now gets one, so the fix stays scoped to this variation instead of theme.json's shared default.main, the deep teal its palette already defines. With the band onmain, the CTA's two buttons needed explicit colours: white andprimary-altmint, both with amainlabel, each distinct from the band.Verified on the demo
Synced to
demo.imagewize.test, global styles restored to the original palettes and updated with the new button element, all three subsites rebuilt from patterns, caches flushed. Computed styles read back off the rendered pages confirm every pairing above.Reading the rendered pages is what caught the buttons: they set their colours explicitly in the patterns and so override
elements.button, which the band fix alone did not reach.Known limitation
The shared
button-lightblock style still resolves totext: primary, unreadable onbaseunder a light-primaryvariation wherever it is used outside the patterns fixed here. Same for the 18 patterns that setbackgroundColor: primaryand are shared across all variations — correct under the six variations whoseprimaryis dark enough, and unused by these three verticals' pages. Solving that generally needs the palette to separate its light-surface and dark-surface roles, which is exactly what #104 showed cannot be done by moving one token.Version
4.8.1→4.9.0instyle.css,readme.txt(stable tag + entry),package.json,package-lock.json,CHANGELOG.md.