Skip to content

Preferences: the accent picker puts light text on mid-luminance accents where dark text has more contrast #996

Closed

Description

@juanlentino

What happens

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

  1. OpenStation Preferences, Appearance, Accent: pick Custom and enter #ff0000.
  2. 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions