Button has insufficient color contrast

[anevins]

Moved from the WPCampus accessibility report issues on GitHub, see: ​https://github.com/WordPress/gutenberg/issues/15273

• Severity:
  • Low
• Affected Populations:
  • Low-Vision
• Platform(s):
  • All / Universal
• Components affected:
  • Edit Media

Issue description
On the Edit Media page, the "Scale" button has insufficient color
contrast, below the minimum threshold of 4.5:1 for text:

Scale button: #fff (white) on #0085ba (light blue): 4.14.
Sufficient color contrast is important for users who have low-vision or
are color-blind, because text with a low contrast ratio may be difficult
or impossible for such users to see.

Issue Code

    .wp-core-ui .button-primary {
        ...
        background: #0085ba;
        color: #fff;
        ...
    }

Remediation Guidance
Darken the blue background to match the other blues on the page, which
have sufficient contrast relative to their white text.

Recommended Code

.wp-core-ui .button-primary {
    ...
    background: #0074a2;
    color: #fff;
    ...
}

Relevant standards

• 1.4.3 Contrast (Minimum) (Level AA) ​https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast

Note: This issue may be a duplicate with other existing accessibility-related bugs in this project. This issue comes from the Gutenberg accessibility audit, performed by [Tenon](​https://www.tenon.io) and funded by [WP Campus](​https://wpcampus.org/). This issue is GUT-75 in Tenon's report

[afercia]

Basically, this relates to all the blue button in the admin.

See also ​https://github.com/WordPress/gutenberg/issues/15432

Previously on Trac:

The design of the focus outline on buttons/elements could be improved
https://core.trac.wordpress.org/ticket/34904
With some design proposals from @MichaelArestad

a11y-focus: Standardizing the handling of :focus and :hover
https://core.trac.wordpress.org/ticket/34957

[afercia]

Related: #45095

[karmatosed]

I am adding needs design as whilst this has some ideas, let's also get a decision on this. I agree 100% it should be worked on for 5.3.

[chetan200891]

Patch created.

[melchoyce]

Going to close this in favor of #34904, which has some mockups we should implement to cover both button color and better focus styles.

@chetan200891 Thanks for your patch here — do you have the time to look at patching 34904?