Lift the faint greys to something readable in a dim room #36

Closed
jheaps wants to merge 0 commits from feature/casino-holdem-contrast into master
Owner

This is a dark interface used in poker rooms and kitchens with the lights down, and I had been generous with grey-on-black. So I measured every piece of text against what is actually painted behind it. Thirteen declarations came in under 4.5:1.

what was now
Empty card slot + 2.63:1 5.4
Rulings source line 3.62 4.8
Standings header, hand time, add-chips $ 3.85–4.11 4.8+
Rulings link 4.39 9.4
Field hints, stack under a name, think timer 4.32–4.38 5.5+

The worst was the empty card slots + at 2.63:1 — an affordance whose whole job is to say "this is tappable", and the least legible thing on the screen.

Everything moves up just far enough to clear 4.5, not flattened to white, so the hierarchy between a heading, a value and a hint survives.

What the measurement cant see — stated rather than glossed

My first pass read background-color only. That has two blind spots, and I found both by checking the instrument instead of trusting it:

  1. Gradients. Every bottom sheet uses one, so the first pass silently skipped all their text. It also reported the dealer buttons dark "D" as 1.2:1 — a false positive, since the D sits on a light gold gradient.
  2. Ancestor opacity, which fades text against whatever is behind it.

I rewrote it to composite gradient stops and inherited opacity — and it then over-reported, treating the pot badges 8%-alpha highlight stop as an opaque background and scoring white-on-dark as 1.0:1. So the fixes here are limited to text on solid backgrounds, where the number means something; the gradient cases (pot badge, dealer button, blind badges, key hints) were checked by eye and are fine. The felt watermark is deliberately 6% and stays that way.

Validation (Playwright, headed)

  • Before: 13 failing. After: 0, re-scanned across the table, sidebar, seat editor, rulings sheet, add-chips sheet and pot wizard — including states only visible when set up, like an empty chair.
  • Checked at 390px and 1280px; the changes are global, since contrast matters at both. No console errors.

Branched from master; touches only holdem.css. Overlaps #34 and #35 in that file but in different declarations.

This is a dark interface used in poker rooms and kitchens with the lights down, and I had been generous with grey-on-black. So I measured every piece of text against what is actually painted behind it. **Thirteen declarations came in under 4.5:1.** | what | was | now | |---|---|---| | Empty card slot `+` | **2.63:1** | 5.4 | | Rulings source line | 3.62 | 4.8 | | Standings header, hand time, add-chips `$` | 3.85–4.11 | 4.8+ | | Rulings link | 4.39 | 9.4 | | Field hints, stack under a name, think timer | 4.32–4.38 | 5.5+ | The worst was the **empty card slots `+` at 2.63:1** — an affordance whose whole job is to say "this is tappable", and the least legible thing on the screen. Everything moves up **just far enough to clear 4.5**, not flattened to white, so the hierarchy between a heading, a value and a hint survives. ## What the measurement cant see — stated rather than glossed My first pass read `background-color` only. That has two blind spots, and I found both by checking the instrument instead of trusting it: 1. **Gradients.** Every bottom sheet uses one, so the first pass silently skipped all their text. It also reported the dealer buttons dark "D" as 1.2:1 — a **false positive**, since the D sits on a light gold gradient. 2. **Ancestor opacity**, which fades text against whatever is behind it. I rewrote it to composite gradient stops and inherited opacity — and it then **over**-reported, treating the pot badges 8%-alpha highlight stop as an opaque background and scoring white-on-dark as 1.0:1. So the fixes here are limited to text on **solid** backgrounds, where the number means something; the gradient cases (pot badge, dealer button, blind badges, key hints) were checked by eye and are fine. The felt watermark is deliberately 6% and stays that way. ## Validation (Playwright, headed) - **Before: 13 failing. After: 0**, re-scanned across the table, sidebar, seat editor, rulings sheet, add-chips sheet and pot wizard — including states only visible when set up, like an empty chair. - Checked at 390px and 1280px; the changes are global, since contrast matters at both. No console errors. Branched from `master`; touches only `holdem.css`. Overlaps #34 and #35 in that file but in different declarations.
jheaps added 1 commit 2026-09-01 01:06:45 -06:00
This is a dark interface used in poker rooms and kitchens with the lights down,
and I'd been generous with grey-on-black. Measured every piece of text against
what's actually painted behind it: thirteen declarations came in under 4.5:1.

The worst was the empty card slot's "+" at 2.63:1 — an affordance telling the
dealer the slot is tappable, and the least legible thing on the screen. Then a
run of #777 labels around 3.9 to 4.1: the standings header, the time on a logged
hand, the currency mark in the add-chips field. The rulings source line sat at
3.62 and the rulings link itself at 4.39.

All of them move up just far enough to clear 4.5 rather than being flattened to
white, so the hierarchy between a heading, a value and a hint survives.

Worth recording what the measurement can't see: it reads background-color, so
text on a gradient — the pot badge, the dealer button, the blind badges — comes
back as a false result in both directions, and those were checked by eye
instead. The felt watermark is deliberately at 6% and stays that way.

Co-Authored-By: Claude Sonnet 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_015bnp7xKUPFFSpwkYNFaPgb
jheaps closed this pull request 2026-09-01 02:42:16 -06:00

Pull request closed

Please reopen this pull request to perform a merge.
Sign in to join this conversation.
No Reviewers
No labels
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: jheaps/JoshHeaps.Net#36