[wp-trac] [WordPress Trac] #47151: Button has insufficient color contrast

[WordPress Trac]

#47151: Button has insufficient color contrast
-------------------------+-------------------------------------------------
 Reporter:  anevins      |      Owner:  (none)
     Type:  defect       |     Status:  new
  (bug)                  |
 Priority:  normal       |  Milestone:  Awaiting Review
Component:  Media        |    Version:
 Severity:  normal       |   Keywords:  needs-patch has-screenshots
  Focuses:  ui,          |  wpcampus-report
  accessibility          |
-------------------------+-------------------------------------------------
 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

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/47151>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform