Repository navigation
fix(a11y): bring light-mode text colours up to WCAG AA - #704
Open
Alicepoltora wants to merge 1 commit into
Open
Alicepoltora wants to merge 1 commit into
Alicepoltora wants to merge 1 commit into
Conversation
--secondary (#808080) is the colour of every sidebar link, nav link, TOC link and search excerpt in light mode, and on --background it measured 3.95:1 — below the 4.5:1 required for body text. #666666 measures 5.74:1 on --background, 5.13:1 on --container and 4.73:1 on --container-2. --positive (#4bbc2d) is the 'Network added' success text in AddNetworkButton and the CopyToast check icon; 2.46:1 on white fails both the 4.5:1 text threshold and the 3:1 non-text one. #2e7d1f measures 5.16:1. ::selection used white text on --ink-light (3.38:1); --ink is 6.04:1. Dark-mode tokens already pass (secondary 7.11:1, ink-light 6.03:1) and are unchanged, as are the brand ink colours.
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.
Three measured contrast failures in light mode. All numbers from the WCAG 2.x relative-luminance formula on the token values in
src/globals.css.--secondary(every sidebar link, nav link, TOC link, search excerpt) on--background#666666→ 5.74:1--container/--container-2--positive("Network added." in AddNetworkButton, CopyToast icon) on--background#2e7d1f→ 5.16:1::selectionwhite text on--ink-light--ink→ 6.04:1#666666was chosen as the darkest-neutral step that still reads as the same grey while clearing 4.5:1 on all three light surfaces (a lighter#767676clears white but drops to 4.06:1 on--container).Dark-mode tokens already pass (
--secondary7.11:1,--ink-light6.03:1) and are untouched, as are the brandinkcolours themselves — only the neutral grey, the feedback green, and the selection background move.Verified with a full
pnpm buildon the resulting tree: exit 0, and the emitted CSS contains--secondary:102 102 102/--positive:46 125 31with the.darkoverrides unchanged.prettier --checkclean.