Repository navigation
fix(a11y): lift footer text and card captions to WCAG AA contrast - #126
Merged
jm-rivera merged 1 commit intoNov 5, 2026
Merged
Conversation
Footer titles and links use net-light #ececdb, 7.71:1 on the charcoal face and 5.50:1 over the world-map lines axe measures them against. deriveTheme now floors caption and muted at 4.5:1 against the card face, darkening within the colour's own hue, so the default caption stays a cool grey (#727779 on white). ShowcaseCards derives its theme against its own cream face instead of overriding --th-card afterwards. axe reports no colour-contrast violations on the home page. Closes #35
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.
Axe on staging reported 18 colour-contrast failures on the home page, all in the footer. Axe measures the footer text against the world-map lines (#5e5e52) that run under it, where the links (#b4b4a6) read 3.13:1 and the column titles (#cdcdb6) 4.07:1. Titles, column links and policy links now use
--color-net-light#ececdb: 7.71:1 on the charcoal face and 5.50:1 over the map lines. Hover adds an underline, since the hover colour is now close to the resting one.Card captions in the default theme were #abb4b7, 2.11:1 on a white card, and the mono theme's muted text and the dark theme's caption also fell short.
deriveThemeinsrc/lib/studio/theme.tsnow floors caption and muted at 4.5:1 against the card face in every theme, preset or custom, by mixing the colour toward black or white within its own hue. The default caption stays a cool grey: #727779 on white.ShowcaseCards.tsxderives its theme against its cream face (#f6f6e8, caption #6c7173) instead of overriding--th-cardafterwards. The hidden-focus and reduced-motion items of #35 shipped in #106.Closes #35
Testing:
pnpm lint,pnpm lint:css,pnpm typecheck,pnpm test(2284 pass),pnpm build. Axe-core 4.14 on a local build of the home page at 1440 by 900, with reduced motion and default: 0 colour-contrast violations. A new theme test checks every preset and three custom faces with its own WCAG contrast function.