Problem/Motivation
When a toolbar tray is open, the currently active tray is indicated as the "'odd one out". The current design uses a mild background gradient on the active button.
Here the shortcuts tray is open, and is visually indicated as the active tray using a slightly different background colour. People who have difficulty perceiving this colour difference may not know which top-level item the current tray belongs to.
Some scenarios where this can have a negative impact:
- People with visual impairments (various kinds).
- Using your device in an environment with bright ambient lighting (near a window on a sunny day, for example).
- Devices with a limited or adjusted colour space (e.g. using Windows high-colour themes, or macOS greyscale, or some other colour adjustment).
This doesn't satisfy two WCAG success criteria:
SC 1.4.1 Use of Color (level A).
SC 1.4.11 Non-text contrast (level AA). If we regard the current background gradient as indicating a state of a UI control (in this case "open" vs. "closed") then the colour difference doesn't have enough contrast.
Proposed resolution
Add a new signifier to the active toolbar tray, which doesn't rely on colour differences alone. Make more effective use of shape signifiers too.
A couple of ideas:
- #7 adds a thick white border to the active toolbar button
- #22 inverts the contrast of the active toolbar button
After much back and forth, there's now consensus that the approach proposed in #22 is the most accessible solution, and the design has been okayed.
Remaining tasks
Design.Update CSS.- Decide if we need any tests for this CSS-only fix.
- Front end framework manager review:
- Is
filter: invert(100%);legit CSS for core? We no longer support IE11, right? - Should we touch stable* or leave them unfixed?
- Is
- RTBC
- Commit
User interface changes
Improve the way the active toolbar tray is conveyed, for better visual accessibility.
Seven
Before
After
Claro
Before
After
API changes
None.
Data model changes
None.
