You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Preferences: the accent picker puts light text on mid-luminance accents where dark text has more contrast #996
The accent picker chooses the ink on accent fills (--os-ui-accent-ink: a primary button's label, the tick in a checked box) with accentWantsDarkInk in src/settings/index.ts:80. It returns dark ink when the fill's WCAG relative luminance is above 0.35 (src/settings/index.ts:94 at 22dbd58).
The point where the two inks have equal contrast on a fill is lower than that. For Void (#0c0b0f) and Starlight (#fffbff) it is sqrt( ( 0.9747 + 0.05 ) * ( 0.0035 + 0.05 ) ) - 0.05, about 0.184 (0.1791 for pure black and white). For any fill between 0.184 and 0.35, the picker chooses Starlight although Void has more contrast.
Repro
OpenStation Preferences, Appearance, Accent: pick Custom and enter #ff0000.
Look at any primary <os-button>.
The label is Starlight on red: 3.90:1, below AA 4.5:1. Void on the same fill is 4.91:1. With pure white and black the numbers are 4.00:1 and 5.25:1.
Built-in swatches affected
Swatch
Luminance
Starlight
Void
Picked today
Teal #04a4cc
0.309
2.85
6.71
Starlight
Amber #d97706
0.280
3.11
6.16
Starlight
Emerald #059669
0.229
3.68
5.21
Starlight
Nebula, Sirius, Lagoon and Starlight already get Void. WordPress Blue (0.153), Indigo (0.137) and Rose (0.174) are below the crossover and correctly keep Starlight. Any custom colour with luminance between 0.184 and 0.35 is affected the same way as #ff0000.
A separate observation on Pulse
Pulse (#f252fc, luminance 0.319) also sits in that range. The docblock on accentWantsDarkInk says the threshold was placed so Pulse keeps the Starlight ink the brand pairs it with, and assets/css/variables.css:545 declares Starlight for it. For the record, Starlight on Pulse measures 2.77:1 and Void on Pulse 6.90:1. That pairing is a brand decision, so the fix below leaves it as it is.
Related, same kind
Two other places pick text colour from a luminance cutoff above the crossover:
src/release-card.ts:313: --accent-ink from a perceived-brightness value with a 0.6 cutoff.
src/ui/components/os-crumb-chain/os-crumb-chain.ts:461: WCAG relative luminance with a 0.55 cutoff.
They are separate code paths and are not part of this report's fix.
Context
Found while building a plugin whose source is public: Signal & Noise Tools. It decides the ink on accent fills inside its own windows at the same crossover, as a CSS rule (assets/os-app.css).
Activity