fix(a11y): Resolve WCAG AA contrast failures across UI#1128
Merged
Conversation
Audited text/background color pairings sitewide against WCAG AA (4.5:1 normal text, 3:1 UI components / large text). Replaced failing combinations with brand tokens from docs/brand-style-guide.md. Palette - Extend gray scale with 500/600/700/800/900 aliased to existing brand neutrals (Slate, Charcoal, Dark Gray, Charcoal-dark, Ink). Resolves ~96 cascading text occurrences using undefined classes. - Fix typo tokens (gray-550, gray-750, dark-50, warning-100, secondary-200) at the call site using valid brand tokens. Contrast fixes - Gold-deep/rich/bright text on gold-light, white, cream, gray-50 backgrounds (1.4 to 2.4:1) replaced with ink, navy-deep, or red-dark per semantic intent. Affected: status badges, score gradients, success indicators, resume scorer chips, challenge test results, admin role pills, order/submission state pills. - Decorative gold icons on light surfaces swapped to navy-deep or ink so non-text UI elements meet 3:1. - Score color gradients (Resume Scorer, Mock Interview, Troop Dashboard) now ink to navy-deep to red-dark instead of the failing gold-deep to gold-rich to red-dark trio. Out of scope - Gold accents on navy/red backgrounds (stat-belt, donate-form, profile header) — already pass AA, left unchanged. - Red text on light backgrounds — already brand-compliant.
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
User feedback: high-contrast readable text on dark beats the muted Obama-axis aesthetic when the two conflict. Swept every `color: rgba(185, 214, 242, 0.X)` text rule on dark sections (briefBar, eyebrows, body, leads, captions, footer microcopy, stat-belt sublabels, software-factory hero/cta/team) to the brand-spec `#F8F9FA` off-white — the canonical dark-mode text token from docs/brand-style-guide.md. Off-white on navy reads ~15.5:1 (AAA), and the brand guide explicitly warns pure white is too harsh. Updated the unused `--muted-on-dark` CSS var to off-white so future usages inherit the readable default. Code-comment colors in hero-code-snippet bumped from 0.55 to 0.85 alpha — still distinct from active code (white identifiers, gold keywords) but no longer washed out. Borders, dividers, and very-low-alpha decorative backgrounds (0.08-0.4 alpha) left alone — they are structural, not text.
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
1 participant
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.
Summary
tailwind.config.jswith the 500/600/700/800/900 stops aliased to existing brand neutrals so the ~96 occurrences oftw-text-gray-{500..900}(previously undefined → cascading) resolve to valid brand colors.ink,navy-deep, orred-darkper semantic intent. Gold backgrounds preserved per brand guide; only the text/icon color shifted.gray-550,gray-750,dark-50,warning-100,secondary-200.Scope
docs/brand-style-guide.md. All replacements use canonical brand tokens.Out of scope (verified passing as-is)
Test plan
npm run typecheck— passes for changed files (pre-existing j0di3 / swagger errors are unrelated to this branch).npm run lint— passes for changed files (pre-existing test-file lint errors unrelated)./admin,/admin/users,/admin/courses,/challenges,/challenges/[id],/orders,/submissions,/jobs,/resume-translator,/assessment,/profile,/store/products/[handle],/404— confirm status pills, score gradients, success icons render with the new colors.npx playwright testif visual specs are in place — screenshots may shift.