Olivero: a11y color contrast test fail for primary button on hover

The 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.

It 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 to 1.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.

Definitely major as this is explicitly part of the core gate.

This is a stable blocker.

Discussed 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.

Went 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.

This 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/

Accidentally attached the same patch twice.

New colour has contrast of 6.59 and shows a visible hover effect. Marking RTBC.

@mherchel: The button hover looks good and is implemented correctly based on our discussion

I'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.

Posted before and after screenshots.

Opened followup issue #3231744: Replace Olivero usage of --color--blue-50 in text

Committed 5683c33 and pushed to 9.3.x. Also cherry-picked to 9.2.x because Olivero is experimental. Thanks!