Raise dark-mode contrast to a legible floor - #22
Open
dgruhin-hrizn wants to merge 1 commit into
Open
Conversation
The dark neutrals fail WCAG against the background, badly enough that on a phone screen the completed column is close to invisible: --text-tertiary 2.97:1 --text-muted 1.89:1 --border 1.22:1 Completed cards then stack opacity 0.6 on top, so muted text on a done card lands at 1.78:1 -- that reads as missing rather than de-emphasised. Warms the ramp and lifts every step. #08090a was a blue-black, which sits oddly against the warm orange accent; the new base is a warm dark in the same family as the accent. --text-tertiary 2.97 -> 6.01:1 --text-muted 1.89 -> 3.90:1 --border 1.22 -> 1.54:1 muted on a completed card 1.78 -> 3.08:1 Completed-card opacity 0.6 -> 0.8 so the dimming no longer compounds with already-dim tokens. Light mode overrides all of these and is untouched. Screenshots are regenerated because the dark one no longer matched what the app renders. Both are recaptured together from the same synthetic demo dataset -- updating only the dark one would leave the pair showing different data. They are also now dimension-matched at 1772x1320; the light one had been 1781x1318.
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.
What
The dark neutrals fail WCAG contrast against the background — badly enough that on a phone in daylight the completed column is close to unreadable.
Measured against
--bg-deep:--text-tertiary--text-muted--borderCompleted cards then stack
opacity: 0.6on top, so muted text on a done card lands at 1.78:1 — that reads as missing, not de-emphasised.Change
Warmed the ramp and lifted every step.
#08090awas a blue-black, which sits oddly against the warm orange accent; the new base is a warm dark in the same family.--text-tertiary--text-muted--borderCompleted-card opacity
0.6 → 0.8so the dimming no longer compounds with already-dim tokens.Light mode overrides all of these and is untouched. The diff is 10 lines of
:rootplus one opacity value.Screenshots
Regenerated, because the dark one no longer matched what the app renders — it was effectively the "before" picture for this bug.
Both are recaptured together from a synthetic demo dataset (10 sessions, 35 tasks) generated into a throwaway
CLAUDE_DIR, so nothing from a real task directory is published. Updating only the dark one would have left the pair showing different data.They're also now dimension-matched at 1772×1320 — the light one had been 1781×1318.
If you'd rather keep your own screenshots, drop the two
.pngfiles from this PR; the CSS change stands alone.Note on the numbers
These are computed, not eyeballed — standard WCAG relative-luminance, with the completed-card figures taken after compositing the 0.8 alpha against the card background. Happy to adjust the exact hues if they don't match your taste; the point is the floor, not these specific values.
Independent of the other PR
I've opened a second PR for mobile responsiveness. They're independent and touch disjoint regions of the file — I verified both merge cleanly onto
mainin either order, and that merging both reproduces exactly the tree I tested. Take either, both, or neither.