Tone down the awake pill

Reported as too yellow and hard to read, and both were fair. The pill measured
4.71:1, which clears the bar on paper but only just, and the pair it clears it
with — dark yellow on light yellow — differ almost only in lightness, so there
is no hue separation doing any of the work. The purple it replaced measured
worse at 3.46 and still read more easily, which is the tell that the number was
not the whole story. Treating 4.71 as sufficient rather than as barely-passing
was the mistake.

Two changes, one per complaint. The pill's tint drops from 18% to 12%, where
asleep keeps 18%: equal percentages of these two hues are not equally strong,
and the yellow shouted at a share the blue carries quietly. And --wake-ink goes
from #8f6400 to #6f4d00, which the labels in the list and on the big card take
along with the pill — they were light by the same reasoning, just against
paler grounds that hid it.

The pill now measures 7.10 in the light theme and 7.98 in the dark, against the
asleep pill's 5.01, and all sixteen text sites the two states cover still clear
4.5:1, worst 5.01.
This commit is contained in:
Alexander Heldt
2026-09-01 06:43:23 +00:00
parent 0ea9374b46
commit 3baff5f6dc
2 changed files with 6 additions and 3 deletions
+5 -3
View File
@@ -18,7 +18,7 @@
jobs and failing the second — 2.6:1 on the timer pill it painted. */
--sleep-ink: #4258cc;
--wake: #f2b705;
--wake-ink: #8f6400;
--wake-ink: #6f4d00;
--note: #6f7a90;
--danger: #d64545;
--gain: #2e9e5b;
@@ -228,8 +228,10 @@ body::before {
.bar-clock.standby { visibility: hidden; }
.bar-clock.asleep { background: color-mix(in srgb, var(--sleep) 18%, var(--surface)); color: var(--sleep-ink); }
/* Dark text on the yellow, the way the pee button already does it: a gold
light enough to read as sunshine is never legible as text on a pale ground. */
.bar-clock.awake { background: color-mix(in srgb, var(--wake) 18%, var(--surface)); color: var(--wake-ink); }
light enough to read as sunshine is never legible as text on a pale ground.
12% where asleep takes 18% — equal percentages of these two hues are not
equally strong, and yellow at 18% shouted while the blue did not. */
.bar-clock.awake { background: color-mix(in srgb, var(--wake) 12%, var(--surface)); color: var(--wake-ink); }
.big-clock {
text-align: center;