fix(a11y): fix color contrast in OlToggle sublabel and nav-bar work-menu (WCAG 1.4.3) - #13027
Merged
Conversation
…G 1.4.3) Two WCAG 1.4.3 (Contrast Minimum) violations fixed: OlToggle.js: sublabel used hardcoded #777 (contrast 4.47:1, fails AA). Changed to var(--accessible-grey) which is already defined in tokens as the minimum accessible grey (hsl 0, 0%, 46.3% = 4.54:1 against white). nav-bar.css (work-menu): selected tab used --blue-5e88B9 background (hsl 212, 39%, 55%) with white text — contrast only 3.4:1. Changed to --primary-blue (hsl 202, 96%, 37%, 4.82:1) for selected state and --header-nav-hover-color (hsl 207, 83%, 33%, 6.56:1) for hover. Note: .star.star--small gold color contrast (pa11y-only, not axe) is a design decision tracked separately in #13009. Playwright regression tests staged in #12998 (tests/e2e/a11y/color-contrast.spec.ts). Fixes: color-contrast axe rule / WCAG 1.4.3
mekarpeles
added
the
Theme: Accessibility
lokesh
approved these changes
Jul 3, 2026
lokesh
left a comment
lokesh
left a comment
Collaborator
There was a problem hiding this comment.
LGTM
This change will not be discernible, but it will put us into compliance.
50 tasks
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
2 participants
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
Two WCAG 1.4.3 (Contrast Minimum) violations fixed, both caught by axe-core in our Playwright a11y scans.
1.
OlToggle.js— sublabel textThe
toggle__sublabel(shows result count like "68" on search filters) used hardcoded#777which computes to 4.47:1 against a white background — just below the 4.5:1 AA threshold.Fix:
--_toggle-sublabel-fg: #777→--_toggle-sublabel-fg: var(--accessible-grey)--accessible-grey(hsl(0, 0%, 46.3%)) is already defined intokens/colors.csswith a comment noting it's the minimum grey for white-background accessibility. CSS custom properties inherit through Shadow DOM, so this works correctly inside the Lit component.2.
nav-bar.css— work-menu selected tabThe selected book page nav tab (Overview, Editions, Details, etc.) used
--blue-5e88B9(hsl(212, 39%, 55%)) as background with white text — contrast 3.4:1, well below 4.5:1.--blue-5e88B9hsl(212,39%,55%)--primary-bluehsl(202,96%,37%)hsl(212, 39%, 45%)(hardcoded)--header-nav-hover-colorhsl(207,83%,33%)Known pa11y-only issue (not in this PR)
.star.star--smallgold (hsl(50, 100%, 50%)) on white = ~1.4:1. This is not caught by axe-core (axe skips the gradient/text-fill technique). The stars are decorative — the rating value is always conveyed in adjacent text. Fixing this requires a design decision (darken gold token or explicit pa11y exclusion for decorative elements). Tracked separately in #13009.Test plan
Playwright regression tests (
color-contrast.spec.ts) staged on branch12885/playwright-e2e-tests(PR #12998). Both tests currently fail against openlibrary.org (confirming the violations exist); will pass once this PR deploys.Related
color-contrast/ WCAG 1.4.3