Skip to content

Fix: color app titles from the background behind them - #134

Merged
SandObserver merged 1 commit into
mainfrom
fix/label-contrast-on-background
Aug 20, 2026
Merged

SandObserver merged 1 commit into
mainfrom
fix/label-contrast-on-background

Conversation

@SandObserver

Copy link
Copy Markdown
Owner

Summary

  • Add ui/js/label-contrast.js: WCAG relative luminance and contrast, cover source mapping, per-cell luminance from sampled pixels, and the rect-to-cell lookup that picks a label tone.
  • Pick the tone by worst-case contrast across the cells a label covers, so a label spanning light and dark takes the colour that holds up on both.
  • Sample the wallpaper through a separate crossOrigin image into a 32x18 grid, with the rendered --bg-brightness folded into each channel; a tainted or unreachable read leaves the labels untoned.
  • Tone solid-colour backgrounds from the parsed colour, resolved through a two-seed canvas so an unparseable value is not read back as the seed.
  • Re-tone on layout build, page rebuild and orientation change, and re-sample on resize, since cover re-maps the image to the new viewport.
  • Measure each label against its own page's origin rather than the viewport, so the pages waiting off-screen are toned for where they will land.
  • Skip labels inside a folder overlay: that scrim replaces the background.
  • Add [data-tone="dark"] label colours in both the default and increased-contrast themes, with a hairline shadow instead of the heavy one.

Testing
All green, including the Docker build. Added 12 frontend tests for luminance, contrast, cover mapping, brightness, cell lookup and the mixed-patch tone choice.

Checklist

  • Stays within the project constraints: one container, no runtime dependencies, no build step (see CONTRIBUTING.md).
  • Tests added or updated for new logic, and the full suite, lint, and typechecks pass.
  • Docs updated if behavior or configuration changed.
  • CHANGELOG.md updated under Unreleased if the change is user-visible.

Icon labels were always white with a heavy shadow. On a light solid background
they fell below the WCAG 1.4.3 minimum, and a bright wallpaper washed them out.

Measure the background and pick the label tone from it: one tone for a solid
color, and a per-label tone over a wallpaper, sampled from a 32x18 luminance
grid of the image as it is shown, brightness included. The tone that keeps the
best worst-case contrast across the patch a label covers wins, so a label
straddling light and dark stays readable.

Sampling reads a second, cross-origin copy of the wallpaper, so an image host
that refuses the read leaves the labels as they were rather than failing the
wallpaper itself.
@SandObserver SandObserver added the ui/ux UI, UX, and accessibility only fix label Aug 20, 2026
@SandObserver
SandObserver merged commit f55e30d into main Aug 20, 2026
4 checks passed
@SandObserver
SandObserver deleted the fix/label-contrast-on-background branch August 20, 2026 22:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ui/ux UI, UX, and accessibility only fix

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant