Raise the contrast of the labels, digits and delay readout

F-Droid's reviewer measured the score and move lines at 2.1:1 against the
4.5:1 normal text needs. Raising them past 14pt bold puts them under the 3:1
large-text bar instead, which is the only way ink still readable as "muted"
can be conformant on a mid-tone accent: reaching 4.5:1 at the old size would
have taken near-black labels on plum and slate, out-shouting the clock digits
above them. Hence the 19px floor, with a comment saying so — lowering it
breaks the contrast claim silently.

Measuring turned up a second failure nobody had flagged: the active player's
clock digits are white on the accent, and brass sat at 2.46:1 against the same
3:1 bar. Sage and brass are darkened just far enough to clear it, scaled in
linear light so only lightness moves. Slate, teal and plum already passed and
are untouched. Darkening further was tempting and wrong — it would have taken
the headroom the muted labels need.

--accent-mute was doing double duty as the delay bar's background, where it
only ever agreed with the bar by accident. Splitting off --track keeps the bar
pixel-identical: 234px wide, fill and unfilled segments unchanged.

The delay number is right-aligned in a box exactly two digits wide. The bar and
the number together now sit within a pixel of the panel's centre rather than
10px left of it, and the digit that changes every second stays put instead of
sliding when the count drops out of double figures; the gap absorbs it.

The settings sheet's Done button and preset chips are still white on accent at
15px, which needs 4.5:1 and gets 3.2:1. Known, and left alone: fixing them
means 19px floors and visibly taller buttons.

Screenshots come from tools/screenshots.py now instead of being made by hand.
It seeds localStorage and lets the app render its own saved state, so scenes
are reproducible. The traps are in its docstring and RELEASING.md — including
one that cost an afternoon today: snap-confined Chromium cannot write into any
hidden directory, and says only "Permission denied".

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

public_html/index.html

@@ -14,16 +14,18 @@
 <link rel="apple-touch-icon" href="icon-192.png">
 <style>
   :root{
-    --accent:#7E9A79;
+    --accent:#7C9777;
     --accent-ink:#FFFFFF;
-    --accent-mute:rgba(0,0,0,.34);
+    --accent-mute:rgba(0,0,0,.66);   /* replaced per theme by applyTheme() */
+    --track:rgba(0,0,0,.34);         /* the delay bar, not text — see .track */
     --idle:#9A9A9A;
     --idle-ink:#2E2E2E;
-    --idle-mute:rgba(0,0,0,.36);
+    --idle-mute:rgba(0,0,0,.63);
     --bar:#332E2B;
     --icon:#8E8880;
     --icon-hot:#DFD9D1;
     --flag:#A6564E;
+    --flag-mute:rgba(255,255,255,.82);
     --sheet:#232120;
     --sheet-line:rgba(255,255,255,.09);
     --sheet-ink:#EDE9E4;
@@ -90,7 +92,11 @@
                                lines up while both measure exactly the same */
     gap:3px 8px;
     order:-1;
-    font-size:clamp(13px,3.7vw,20px);
+    /* the 19px floor is load-bearing, not taste: WCAG's large-text threshold is
+       14pt bold = 18.66px, and below it these labels need 4.5:1 rather than 3:1
+       — which no ink still readable as "muted" can reach on a mid-tone accent.
+       Lower this and the contrast stops being conformant, silently. */
+    font-size:clamp(19px,3.9vw,24px);
     font-weight:700;
     letter-spacing:.01em;
     color:var(--idle-mute);
@@ -103,9 +109,8 @@
      The guard drops the space when there's no score line above to separate from. */
   .line:not([hidden]) + .line--moves > *{margin-top:7px}
 
-  .panel[data-state="active"] .head,
-  .panel[data-state="flagged"] .head{color:var(--accent-mute)}
-  .panel[data-state="flagged"] .head{color:rgba(255,255,255,.55)}
+  .panel[data-state="active"]  .head{color:var(--accent-mute)}
+  .panel[data-state="flagged"] .head{color:var(--flag-mute)}
 
   .stack{
     flex:1;
@@ -151,7 +156,9 @@
     width:clamp(72px,20vw,140px);
     height:clamp(4px,1.1vw,7px);
     border-radius:99px;
-    background:var(--accent-mute);
+    /* its own token: --accent-mute is text ink now and far darker than this bar
+       wants, and the two only ever agreed by accident */
+    background:var(--track);
     opacity:.45;
     overflow:hidden;
   }
@@ -162,9 +169,17 @@
     transform-origin:left center;
   }
   .dnum{
-    font-size:clamp(15px,4.4vw,26px);
+    font-size:clamp(19px,4.4vw,26px);   /* 19px for the same reason as .head */
     font-weight:700;
-    min-width:1.6em;
+    /* Exactly two digits — the delay caps at 60s, so it never needs a third —
+       and right-aligned, which does two things at once: the bar and the number
+       together sit dead centre of the panel whatever the count, and the digit
+       that changes every second stays put instead of sliding left when the
+       count drops out of double figures. The gap to the bar opens up by one
+       digit instead. 2ch is the digit advance, so with tabular figures this is
+       the exact width and not an approximation of it. */
+    min-width:2ch;
+    text-align:right;
   }
 
   /* ---------- control bar ---------- */
@@ -584,12 +599,17 @@
   // ask the browser not to evict us when the device is low on space
   try{ if(navigator.storage && navigator.storage.persist) navigator.storage.persist(); }catch(e){}
 
+  /* mute is the alpha the head labels need over that accent to clear 4:1. It
+     can't be one shared value: the accents differ in lightness by more than the
+     muting does, and a single alpha either fails on plum or blackens brass.
+     sage and brass are a touch darker than they look elsewhere — white on them
+     has to clear 3:1 for the clock digits, and the old brass managed 2.46. */
   var THEMES = [
-    { id:"sage",   accent:"#7E9A79", ink:"#FFFFFF" },
-    { id:"brass",  accent:"#C3A153", ink:"#FFFFFF" },
-    { id:"slate",  accent:"#6E8598", ink:"#FFFFFF" },
-    { id:"teal",   accent:"#5E8D87", ink:"#FFFFFF" },
-    { id:"plum",   accent:"#8A7396", ink:"#FFFFFF" }
+    { id:"sage",   accent:"#7C9777", ink:"#FFFFFF", mute:.66 },
+    { id:"brass",  accent:"#AA8C47", ink:"#FFFFFF", mute:.66 },
+    { id:"slate",  accent:"#6E8598", ink:"#FFFFFF", mute:.72 },
+    { id:"teal",   accent:"#5E8D87", ink:"#FFFFFF", mute:.71 },
+    { id:"plum",   accent:"#8A7396", ink:"#FFFFFF", mute:.77 }
   ];
 
   var cfg = {
@@ -988,6 +1008,7 @@
     var t = THEMES.filter(function(x){ return x.id === cfg.theme; })[0] || THEMES[0];
     document.documentElement.style.setProperty("--accent", t.accent);
     document.documentElement.style.setProperty("--accent-ink", t.ink);
+    document.documentElement.style.setProperty("--accent-mute", "rgba(0,0,0," + t.mute + ")");
     [].forEach.call(document.querySelectorAll(".sw"), function(s){
       s.setAttribute("aria-checked", s.dataset.id === cfg.theme ? "true" : "false");
     });

public_html/sw.js

@@ -1,5 +1,5 @@
 /* Cache-first: once installed the clock never touches the network again. */
-const CACHE = "bgclock-v17";
+const CACHE = "bgclock-v18";
 const FILES = [
   "./",
   "./index.html",