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.
Olivero's primary button on hover doesn't pass a11y color contrast test.
Adding screenshots for reference.
Tugboat at https://3211616-button-hover-2-5bosyggdwlylc4ej0ez5dnxekmphlqoz.tugboat....
Before:
After:
Comment | File | Size | Author |
---|---|---|---|
#14 | Screen Shot 2021-09-07 at 16.32.22.png | 2.97 KB | lauriii |
#14 | Screen Shot 2021-09-07 at 16.32.13.png | 3.12 KB | lauriii |
#13 | Captura de Pantalla 2021-09-07 a les 14.44.34.png | 109.52 KB | ckrina |
#9 | 3211616-9.patch | 1.49 KB | mherchel |
#8 | 3211616.patch | 1.42 KB | mherchel |
Comments
Comment #3
mherchelThe current contrast ratio on hover is 4.15. This is less than the 4.5 that WCAG mandates. But, I'm not sure if that applies on hover. I'd love for someone with more knowledge on this to jump in.
Comment #4
bnjmnmIt is necessary to adhere to contrast requirements on hover, but there's a potential simple solution as what you have is absurdly close to meeting the specification already.
If the button font size was bumped from font-size:
1.125rem
to1.167rem
, this can unambiguously pass requirements as it would make the font 14pt, which at bold qualifies as large scale. That means it would only need the 3:1 minimum contrast requirement. This is basically bumping it from 18px to 18.667 px.As you can see it's not a particularly noticeable change, but one that contrast checking tools will certainly notice. Tweaking the padding could even keep the button at the same size if that's a priority.
If this sounds like an acceptable solution, cool! If there are concerns we can explore other stuff.
Comment #5
xjmDefinitely major as this is explicitly part of the core gate.
Comment #6
xjmThis is a stable blocker.
Comment #7
mherchelDiscussed this at last night's core accessibility meeting.
@andrewmacpherson said he would prefer to keep the contrast above 4.5 (as opposed to adjusting the font-size, which would be technically compliant). He said the easiest solution is simply to remove the hover state.
Comment #8
mherchelWent over this with @jwitkowski79. We agreed that we should have a hover state. However the
--color--blue-20
was the darkest shade of blue that we have defined and the only that passes the 4.5 contrast ratio.So, we created a new variable:
--color--blue-10: #0f6292;
, and use that.Comment #9
mherchelThis patch also updates the border color on hover so it corresponds with the background color.
Tugboat preview at https://3211616-button-hover-2-5bosyggdwlylc4ej0ez5dnxekmphlqoz.tugboat.qa/
Comment #10
mherchelAccidentally attached the same patch twice.
Comment #11
rikki_iki CreditAttribution: rikki_iki at PreviousNext commentedNew colour has contrast of 6.59 and shows a visible hover effect. Marking RTBC.
Comment #12
jwitkowski79 CreditAttribution: jwitkowski79 as a volunteer commented@mherchel: The button hover looks good and is implemented correctly based on our discussion
Comment #13
ckrinaI've just reviewed and it's working as expected:
The colors are applied as expected with the desired contrast, and the code looks fine too.
Comment #14
lauriiiPosted before and after screenshots.
Comment #15
mherchelOpened followup issue #3231744: Replace Olivero usage of --color--blue-50 in text
Comment #17
lauriiiCommitted 5683c33 and pushed to 9.3.x. Also cherry-picked to 9.2.x because Olivero is experimental. Thanks!