diff --git a/traces/src/components/player/replay-stage.tsx b/traces/src/components/player/replay-stage.tsx index b6ac074..b5ded9d 100644 --- a/traces/src/components/player/replay-stage.tsx +++ b/traces/src/components/player/replay-stage.tsx @@ -159,10 +159,12 @@ export function ReplayStage() { {recording && viewport ? ( /* 10px, and allowed to be: an instrument readout in the corner of the frame, not text to read. - `muted` rather than `faint`, though — measured at 3.09:1 against `bg-base`, which is below the - 4.5:1 this size needs, and this is the one readout that sits alone on the frame a recording - spends its whole runtime pointed at. `muted` is 6.07:1. Same size, same swap, same reason as the - ruler's tick labels in `timeline.tsx`, which is the precedent rather than a new judgement. + `muted` rather than `faint`, though — this is the one readout that sits alone on the frame a + recording spends its whole runtime pointed at, and it is read against replayed page content as + often as against `bg-base`. Both tones clear the 4.5:1 this size needs now that `faint` has been + raised for AA (`muted` 6.07:1, `faint` 5.26:1 against `bg-base`), so what picks `muted` here is + the margin over an unknown ground rather than the threshold. Same size, same swap, same reason as + the ruler's tick labels in `timeline.tsx`, which is the precedent rather than a new judgement. */

{viewport.width}×{viewport.height} · {Math.round(scale * 100)}% diff --git a/traces/tailwind.config.ts b/traces/tailwind.config.ts index e761cf2..3e7b800 100644 --- a/traces/tailwind.config.ts +++ b/traces/tailwind.config.ts @@ -57,10 +57,19 @@ const config: Config = { strong: '#343b45', }, - // Text. + // Text. `faint` is pinned by contrast rather than by taste: it is used on eleven different + // grounds, and at this value it clears WCAG AA (4.5:1) on all of them. `raised` is the binding + // one, being the lightest, at 4.51:1 — anything dimmer fails there. The 3:1 large-text + // allowance is no help, because `fontSize` below tops out at 15px and nothing here is bold. + // The cost is that it now sits 11 per channel from `muted` instead of 48, so the two read as + // one tone in places; that is the most separation the pair can have with both passing. + // + // One site is still short of AA, and no value here can fix it: the rejected hypothesis card in + // `hypothesis-cards.tsx` carries `opacity-60`, which veils text and ground together, so no + // foreground can outrun it — 2.61:1 for `faint`, and 2.90:1 for `muted` in the same card. ink: '#e6e8eb', muted: '#8b929c', - faint: '#5b626c', + faint: '#808791', // Authorship. These two carry meaning, not decoration: every marker, hypothesis and // activity entry is tinted by who created it. Do not reuse them for anything else.