Button has insufficient color contrast

[karlgroves]

Button has insufficient color contrast

• 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]

Worth noting the media modals aren't part of Gutenberg. This issue should be moved to the core Trac under the Media component.

[melchoyce]

Full report screenshot:

This is an issue with all Primary buttons in WordPress. See #15278.

[anevins12]

Moved to Trac: https://core.trac.wordpress.org/ticket/47151

[afercia]

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

Relevant core Trac tickets:

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]

Closing as moved to Trac.