Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.Problem/Motivation
Layout builder add section and add block section components fail to meet the WCAG 2.0 AA requirement for color contrast. Having sufficient color contrast is needed to comply with the Drupal core gates.
Proposed resolution
Change either the background color or the text color to comply with WCAG 2.0 AA. However, as we are making changes, we could try to comply with the WCAG 2.0 AAA, even though this is above the goals defined in Drupal core gate.
Remaining tasks
- Create design with new colors
- Implement the design change
- Confirm that the new colors meet at least WCAG 2.0 AA in Bartik and Umami
User interface changes
TBD
| Comment | File | Size | Author |
|---|---|---|---|
| #5 | 3040241-5-screenshot.png | 39.95 KB | bnjmnm |
| #5 | 3040241-5.patch | 1.45 KB | bnjmnm |
| Screen Shot 2019-03-14 at 20.05.33.png | 15.61 KB | lauriii | |
| Screen Shot 2019-03-14 at 20.05.28.png | 19.89 KB | lauriii | |
Comments
Comment #2
DyanneNovaUsing the text color #686868 for both links would meet WCAG 2.0 AA and stays generally true to the current design.
Comment #3
lauriiiWhat should we do with the icon color? Should we provide a new icon with the color #686868?
Comment #4
DyanneNovaYes, we should update the icon to match.
Comment #5
bnjmnmHere is the css change + icon
In case it's helpful, the contrast on "Add Block" is now 5.11:1, and the contrast on "Add Section" is 5.20:1 , which meets AA for small text.
This applies to both Bartik and Umami as the those elements have the same colors in both themes.
Screenshot attached of the changes in Chrome.
Comment #6
phenaproximaPatch looks good and it sounds like the contrast ratio has been verified.
Comment #9
xjmCommitted to 8.8.x and cherry-picked to 8.7.x. Thanks!
Comment #10
xjm