Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions traces/src/components/player/replay-stage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
<p className="absolute bottom-1 right-2 font-mono text-micro tabular-nums text-muted">
{viewport.width}×{viewport.height} · {Math.round(scale * 100)}%
Expand Down
13 changes: 11 additions & 2 deletions traces/tailwind.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down