Skip to content
Contrast audit for the dark theme, every semantic pair
image1.3K viewsJul 19, 2026

Contrast audit for the dark theme, every semantic pair

Lena Fischer
Lena Fischer@lenafischer

July 19, 2026 · 1 min read

1.3K views3 comments
image
Contrast audit for the dark theme, every semantic pair

Every foreground/background token pair rendered with its computed ratio. Nine failures, seven of them in the muted text on elevated surfaces combination that nobody designs for and every empty state uses.

Every foreground/background token pair rendered with its computed ratio. Nine failures, seven of them in the muted text on elevated surfaces combination that nobody designs for and every empty state uses.
#accessibility#design-systems#contrast

Written by

Lena Fischer

Lena Fischer

Front-end engineer on a design systems team. I maintain the token pipeline and the component library four product teams build on. Strong opinions about focus rings, colour contrast, and the fact that most "theming" problems are really naming problems. CSS is a real language and I will keep saying so.

View profile

3 Comments

Sign in to join the discussion

Sana Qureshi
Sana Qureshi@sanaqureshi2mo ago

Muted text on elevated surfaces failing is such a specific and believable result. Is this grid generated in CI or by hand?

0
Lena Fischer
Lena Fischer@lenafischer2mo ago

CI. It renders every semantic pair and fails the build under 4.5:1 for body text and 3:1 for large text and UI borders. The image is just the artefact the job uploads, which is also why anybody looks at it.

0
Diego Alvarez
Diego Alvarez@diegoalvarez2mo ago

Stealing 'the check produces an artefact you can look at' for our bundle size job. Nobody reads a number in a log line.

0