Repository navigation
Fix: meet AA contrast on filled controls and badges - #136
Merged
Merged
Conversation
Split --on-accent into --on-fill and --on-tint. --on-fill is the ink on a control filled with a role colour and moves with the theme; --on-tint is the white ink on a fill the project does not choose, such as a user's app colour. White on the dark hues measured 1.86 on the accent, 2.02 on the success green and 3.43 on the danger red, all under the 4.5 of WCAG 1.4.3. Add an --info role token so the blue badge takes the accessible blue in the light theme, where --sy-blue measured 4.02. Lower the light --sy-green-hi to #238539, which measured 4.40 as a fill behind white. Point the light tile placeholder at the -hi grey, which measured 2.21 behind a white icon against the 3.0 of 1.4.11. badge-logic.js chose badge ink by comparing against hexes that do not match the stylesheet's fills. Ink a user-chosen badge colour explicitly in both directions and leave a named badge to --on-fill.
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
--on-accentwith--on-fill(ink on a control filled with a role colour, dark in the dark theme and white in the light one) and--on-tint(white in both, for a fill the stylesheet does not choose).--on-fill; leave the user-coloured app icons and previews on--on-tint.--inforole token and give the app badges--badge-green, so all three badge fills resolve per theme and take--on-fill.--sy-green-hito#238539and point the light--tile-placeholderat--sy-gray2-hi.computeBadgeVisual, in both directions, instead of falling through to the stylesheet against aNAMEDtable that does not hold the fill values.Testing
All green, including the Docker build. Added a contrast test that reads the filled-control rules off the stylesheets and measures every pair in both themes and both contrast modes, and 1 test for the badge ink.
Checklist