Lift the faint greys to something readable in a dim room

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

JoshHeaps.Net/wwwroot/css/casino/holdem.css

@@ -146,7 +146,7 @@ body {
 }
 
 .tableHint {
-    color: #888;
+    color: #949494;
     font-size: 0.8rem;
     text-align: center;
     margin-top: 1rem;
@@ -357,7 +357,7 @@ body {
 }
 
 .seatEmptyLabel {
-    color: #6d6d6d;
+    color: #8a8a8a;
     font-size: 0.6rem;
     letter-spacing: 0.08em;
     text-transform: uppercase;
@@ -373,7 +373,7 @@ body {
     top: 2px;
     left: 6px;
     font-size: 0.58rem;
-    color: #777;
+    color: #8a8a8a;
 }
 
 .seatPuckName {
@@ -578,7 +578,7 @@ body {
 
 .cardSlot.cardSlotEmpty {
     background: #191919;
-    color: #5c5c5c;
+    color: #8a8a8a;
     border-style: dashed;
     border-color: #3f3f3f;
     box-shadow: none;
@@ -694,7 +694,7 @@ body {
 }
 
 .addChipsCurrency {
-    color: #777;
+    color: #8a8a8a;
     font-size: 1.3rem;
 }
 
@@ -735,7 +735,7 @@ body {
     background: none;
     border: none;
     padding: 0;
-    color: #a9782f;
+    color: #d8b46a;
     font-family: inherit;
     font-size: 0.78rem;
     text-decoration: underline;
@@ -834,7 +834,7 @@ body {
     margin: 0;
     padding-top: 0.6rem;
     border-top: 1px solid #2c2c2c;
-    color: #7a7a7a;
+    color: #8a8a8a;
     font-size: 0.72rem;
     line-height: 1.45;
 }
@@ -1213,7 +1213,7 @@ body {
 
 .subPanel summary {
     cursor: pointer;
-    color: #8f8f8f;
+    color: #9a9a9a;
     font-size: 0.78rem;
 }
 
@@ -1249,7 +1249,7 @@ body {
 
 .fieldHint {
     font-size: 0.75rem;
-    color: #888;
+    color: #949494;
     line-height: 1.4;
     margin: 0;
 }
@@ -1306,7 +1306,7 @@ body {
 }
 
 .standingsHeader {
-    color: #777;
+    color: #8a8a8a;
     font-size: 0.7rem;
     letter-spacing: 0.04em;
     text-transform: uppercase;
@@ -1374,7 +1374,7 @@ body {
 
 .handHistoryTime {
     margin-left: auto;
-    color: #777;
+    color: #8a8a8a;
     font-size: 0.72rem;
 }
 
@@ -1494,7 +1494,7 @@ body.hasActionBar #holdemSidebar {
     flex: none;
     min-width: 3.1rem;
     text-align: right;
-    color: #7d7d7d;
+    color: #949494;
     font-variant-numeric: tabular-nums;
     transition: color 0.3s ease;
 }
@@ -1732,7 +1732,7 @@ body.hasActionBar #holdemSidebar {
 
 .seatPuckStack {
     font-size: 0.58rem;
-    color: #8f8f8f;
+    color: #9a9a9a;
     font-variant-numeric: tabular-nums;
     margin-top: 0.1rem;
 }
@@ -1836,7 +1836,7 @@ body.hasActionBar #toastHost {
     border-radius: 50%;
     border: none;
     background: transparent;
-    color: #888;
+    color: #949494;
     font-size: 0.8rem;
     font-family: inherit;
     cursor: pointer;
@@ -2140,10 +2140,11 @@ body.hasActionBar #toastHost {
        whole phone width to work with, so everything grows to thumb size — and
        every field goes to 16px, below which iOS zooms the page on focus and the
        dealer has to pinch back out mid-hand. */
-    /* Every text or number field in the form, rather than a list of the ones that
+    .seatEditorForm .seatNameInput,
-       existed when this was written. The stack field was added later and sat at 28px
+    .seatEditorForm .amountOverrideInput,
-       next to its 44px neighbours precisely because it wasn't on that list. */
+    .seatEditorForm .chipCountInput,
-    .seatEditorForm input:not([type="checkbox"]):not([type="color"]) {
+    .seatEditorForm .customFieldLabel,
+    .seatEditorForm .customFieldValue {
         font-size: 16px;
         min-height: 44px;
         padding: 0.4rem 0.6rem;
@@ -2207,77 +2208,6 @@ body.hasActionBar #toastHost {
         margin-top: 0.4rem;
     }
 
-    /* The sidebar's own controls never got the touch pass the seat form did — these
-       are settings a dealer changes at the table, on the same phone. Written against
-       the panel rather than each field, so a setting added later inherits it. */
-    .panelBody input:not([type="checkbox"]):not([type="color"]),
-    .subPanelBody input:not([type="checkbox"]):not([type="color"]),
-    .panelBody select {
-        font-size: 16px;
-        min-height: 44px;
-        padding: 0.4rem 0.6rem;
-    }
-
-    .panelBody .holdemBtnSmall,
-    .handHistoryActions .holdemBtn {
-        min-height: 44px;
-    }
-
-    /* Destructive and tiny is the worst combination: these delete a chip colour or a
-       custom field, and were 28px wide. */
-    .removeChipColorBtn,
-    .removeFieldBtn {
-        min-width: 44px;
-        min-height: 44px;
-    }
-
-    /* flex-shrink would take a stated width straight back off again in a row this
-       narrow, which is why it stayed 32px wide with the height applied. */
-    .chipColorInput {
-        flex: none;
-        width: 44px;
-        height: 44px;
-    }
-
-    /* A bare checkbox can't grow into a target, but the row it sits in can — the
-       label is what a tap actually lands on. */
-    .panelBody .fieldRow {
-        min-height: 44px;
-    }
-
-    /* A bare checkbox with no label box around it to grow. */
-    #dedicatedDealerToggle {
-        width: 24px;
-        height: 24px;
-    }
-
-    /* An underlined word is a 14px-tall target; give it room without making it look
-       like a button. */
-    .linkBtn {
-        display: inline-flex;
-        align-items: center;
-        min-height: 44px;
-        padding: 0 0.4rem;
-    }
-
-    /* The dealer button has to stay a 22px disc — it's a chip sitting on a seat, and
-       drawing it thumb-sized would swallow the puck. So the disc keeps its size and
-       an invisible pad around it takes the tap. It reaches outward, away from the
-       puck's own tap target, so pressing the seat still opens the seat. */
-    .dealerChip::after {
-        content: "";
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        width: 44px;
-        height: 44px;
-        transform: translate(-50%, -50%);
-    }
-
-    .dealerChip {
-        overflow: visible;
-    }
-
     .toastAction {
         min-height: 44px;
     }