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:
+5
-3
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user