Make every text colour legible on the surface it is drawn on - #192
Merged
Merged
Conversation
--text-2 is the second most used colour in the application, 129 declarations across 45 files, and it reached 4.5:1 on none of the four surfaces: 2.92 at worst in dark, 3.48 in light. Seventy-six of those declarations pair it with a font-size under 12px, which is exactly where AA asks for 4.5. Four other values were under on at least one surface: light --amber, light --green and dark --red. Five hexes and three rgb triplets change, no call site does. The test lives in scripts/ rather than beside the stylesheet: it reads the shipped file, and the Angular builder compiles its specs for a browser, where node:fs is absent and ?raw has no loader. Both were tried. It also fails on a colour it cannot classify, so the next one added has to say whether it is text. Deliberately out of scope, and filed as #191: tint-badge draws a hue on a tint of itself, which costs about a point of contrast the plain-surface figures do not see. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
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.
Closes #175.
--text-2is the second most used colour in the application — 129 declarations across 45 files — and it cleared AA on none of the four surfaces. 76 of those declarations pair it with afont-sizebelow 12px, which is precisely where 4.5:1 applies.What changed
Five hexes and three rgb triplets in
styles.scss. No call site.--text-2#6e7488#9298ac--text-2#767d90#636a7c--amber#9c6410#8f5b0d--red#d1706f#dc8281--green#2c7a4b#297044--greenwas not in the ticket. I had called it "borderline" in the audit and only listed amber and red; it is 4.44 on--bg-3and it is text — highlight.js colours strings with it, and--folder-hueis drawn as text in a board zone. Leaving it would have made the test below fail on the first run.The darker light amber also improves the label drawn on it:
--amber-inkgoes from 4.69 to 5.42.The test
scripts/palette.test.mjs, parsing the shipped stylesheet. Three things it holds per theme: every text colour on every plain surface, the ink on solid amber, and — the one that stops the file rotting — a verdict on every colour declared, so a colour added to the palette fails until somebody says whether it is text.node --testfile and not a*.spec.ts. It reads a file off disk, and the Angular builder compiles its specs for a browser:node:fsis not typed there (tsconfig.spec.jsonsetstypes: []and@types/nodeis not a dependency) and?rawhas no esbuild loader. Both were tried and both fail;scripts/is the escape hatch the repository already documents for exactly this. It had to be added to thetest:scriptscommand by name — Node 24 does not expand a bare directory.I checked it fails on the old palette, or it would prove nothing:
Looked at, not only computed
Built the e2e flavour and photographed the canvas and the editor in both themes. The secondary text is legible where it was ghostly, the three-level hierarchy still reads, and nothing looks washed out — which was the risk in raising a dim grey.
What this does not fix, and why
tint-badgedraws a hue as text on a tint of itself, which moves the background toward the text and costs about a point. Light amber at 12% is still 4.20:1 after this change — it is the "N'expire jamais" badge, the faintest text on the light editor. Fixing it is a design choice (lower the alpha / darken the hue again / stop drawing the hue as its own text), not arithmetic, so it is #191 with the measurements rather than a silent extra commit here. The test's comment says plainly that it does not cover the composite.🤖 Generated with Claude Code