Repository navigation
Fix: color app titles from the background behind them - #134
Merged
Merged
Conversation
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
ui/js/label-contrast.js: WCAG relative luminance and contrast,coversource mapping, per-cell luminance from sampled pixels, and the rect-to-cell lookup that picks a label tone.crossOriginimage into a 32x18 grid, with the rendered--bg-brightnessfolded into each channel; a tainted or unreachable read leaves the labels untoned.coverre-maps the image to the new viewport.[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