Improve a11y of Drupal CMS installer - focus clarity

Not sure how to fix this one?

I believe we're looking at:

.cms-installer .button:focus {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

Which is:
--color-focus: var(--gin-color-focus);

Which is:
--gin-color-focus: rgba(0, 125, 250, .6);

rgba(0, 125, 250, .6) converts to #007dfa99

Opacity is a problem for this. Many tools don't support it. For instance:

https://contrast-finder.tanaguru.com/result.html?foreground#007DFA&backg...

The report was for:
2.2:1 (#7EB2FD/#FFFFFF)

This should work:
--gin-color-focus: rgba(8, 113, 243, 1);

But someone could just provide something with opacity that is better.

Taking off the NeedsMoreInfo tag as I think I've dealt with that.

I've updated the focus colour.

I haven't addressed the comment about the blue focus on blue buttons/links being a usability issue. Claro and Gin would both have this issue.

Updating credit. Code looks fine to me, just needs someone to confirm that this looks fixed in manual testing.

I have manually checked color contrast for accessibility using wave tools (https://webaim.org/resources/contrastchecker/) current patch is not passing
WCAG AAA. I have attached screen herewith.
Reference : https://www.w3.org/WAI/WCAG21/Understanding/contrast-enhanced.html

It should be like this : gin-color-focus: rgb(8, 86, 176).

I don't think we're aiming for WCAG AAA? That it passes AA should be sufficient, though I'd defer to @mgifford.

I did take before/after screens, just forgot to attach them.

Before:

After:

Yep, we're aiming for AA. Thanks!

Oops I meant to link to https://www.drupal.org/about/features/accessibility →

Yes, it Passed Color Contrast for WCAG AA

Merged into 1.x and cherry-picked to 1.0.x. Thanks!

Automatically closed - issue fixed for 2 weeks with no activity.