From 19277d8812065149435b6294714d165c5b5ebd57 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 20 Jul 2026 12:01:05 +0000
Subject: [PATCH] Improve dark-mode text readability (WCAG AA)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 styles.css | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/styles.css b/styles.css
index a0e0447..90f7af2 100644
--- a/styles.css
+++ b/styles.css
@@ -42,7 +42,12 @@
   --surface-2: #1e2433;
   --border: #2c3040;
   --text: #e8e5df;
-  --text-dim: #9e9b95;
+  /* Lifted from #9e9b95 for dark-mode readability (secondary/muted text).
+     #9e9b95 passed AA only marginally on --surface-2 (5.59:1); #b4b0a8
+     reads 7.2–8.7:1 across bg/surface/surface-2 and stays clearly dimmer
+     than --text so the hierarchy holds. Dark-only: the light-mode media
+     query below overrides --text-dim to #5c5850. */
+  --text-dim: #b4b0a8;
   --accent: #74a8cf;
   /* Text/iconography that sits ON an --accent fill (#fff light, navy
      #0e1117 dark). Theme-aware so it clears
@@ -181,7 +186,7 @@ html[data-theme="dark"] {
   --surface-2: #1e2433;
   --border: #2c3040;
   --text: #e8e5df;
-  --text-dim: #9e9b95;
+  --text-dim: #b4b0a8;
 }
 html[data-theme="light"] {
   --bg: #f8f6f2;
@@ -701,7 +706,9 @@ html[data-motion="reduced"] .card.card-fresh { animation: none; }
 .card-meta .tag.tag-source-id { display: none; }
 .card-meta .tag.repeats {
   background: var(--bad);
-  color: #fff;
+  /* Was #fff on --bad = 2.77:1 (failed AA — the tag text "blocked out").
+     #000 on --bad reads 7.6:1 and matches the .tag.pbq/.tag.edited pattern. */
+  color: #000;
   font-weight: 700;
 }
 
@@ -1338,7 +1345,10 @@ html[data-motion="reduced"] #main.mode-entering { animation: none; }
 .q-option.wrong .q-letter {
   background: var(--bad);
   border-color: var(--bad);
-  color: #fff;
+  /* Was #fff on --bad = 2.77:1 (failed AA — the letter badge was unreadable).
+     Dark red #2a0808 reads 6.7:1 and mirrors the .correct badge's dark-tint
+     (#08210f on --good) for a consistent, calm look. */
+  color: #2a0808;
 }
 .q-option.wrong .q-status { opacity: 1; color: var(--bad); }
 .q-option.wrong .q-status::before { content: '✕'; }