Fix dark-mode contrast on answer badges + muted text (WCAG AA)#10
Merged
Conversation
The owner reports that in dark mode text is hard to read and words "get
blocked out." Two concrete AA failures were the cause, both dark-only;
light mode is untouched.
- .card-meta .tag.repeats and .q-option.wrong .q-letter rendered white
text on the --bad (#f87171) fill = 2.77:1, failing AA for both normal
and large text — the badge/tag text was effectively unreadable ("blocked
out"). Switched to dark text (#000 = 7.6:1 on the tag, matching the
sibling .tag.pbq/.tag.edited pattern; #2a0808 = 6.7:1 on the wrong-answer
letter badge, mirroring the .correct badge's dark-tint look).
- Lifted --text-dim from #9e9b95 to #b4b0a8 in dark mode. The old value
passed AA only marginally on --surface-2 (5.59:1); the new value reads
7.2-8.7:1 across bg/surface/surface-2 while staying clearly dimmer than
--text, preserving the visual hierarchy. Applied to both the :root dark
default and the html[data-theme="dark"] override; the light-mode value
(#5c5850) is unchanged.
No contrast was reduced anywhere. 77/77 node tests pass; 30/30 browser
smoke scenarios pass with zero console errors.
Co-Authored-By: Claude Opus 4.8 <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
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.
Dark-mode readability fix. The wrong-answer letter badge and the "repeats" tag were white on saturated red (2.77:1) — unreadable when you pick a wrong answer; fixed to 6.7–7.6:1. Also raised marginal muted text to 7.2:1.
Light mode + semantic colors untouched; no contrast reduced. Verified: 77/77 tests, 30/30 smoke (0 console errors).
🤖 Generated with Claude Code
Generated by Claude Code