[wp-trac] [WordPress Trac] #47157: Insufficient contrast on link text on 'Media Dialog' and 'Block Types'

[WordPress Trac]

#47157: Insufficient contrast on link text on 'Media Dialog' and 'Block Types'
---------------------------+-----------------------------------------
 Reporter:  nrqsnchz       |      Owner:  (none)
     Type:  defect (bug)   |     Status:  new
 Priority:  normal         |  Milestone:  Awaiting Review
Component:  Media          |    Version:
 Severity:  normal         |   Keywords:  needs-patch wpcampus-report
  Focuses:  accessibility  |
---------------------------+-----------------------------------------
 Moved from the
 [https://github.com/WordPress/gutenberg/issues/created_by/karlgroves
 WPCampus accessibility report issues on GitHub].


 Severity: Medium
 Affected Populations:
 - Low-Vision
 - Cognitively Impaired
 Platform(s):
 - All / Universal
 Components affected:
 - Block Types
 - Media Dialog

 == Issue description

 When the "Featured Image" modal is open, there are two controls coded
 as links which have insufficient color contrast, below the minimum
 threshold of 4.5:1 for text:

 "Upload Files" and "Media Library" blue hover color: blue (#00a0d2) on
 white (#fff): 3.01:1

 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**


 {{{
 .media-frame a:active, .media-frame a:hover {
   color: #00a0d2;
 }
 }}}


 == Remediation Guidance

 Darken the hover color to match the focus color, or otherwise to provide
 a contrast ratio of 4.5:1 or greater.

 **Recommended Code**


 {{{
 .media-frame a:active, .media-frame a:hover {
   color: #124964;
 }
 }}}


 **Relevant standards**


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

 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 and funded by WP Campus. This
 issue is GUT-43 in Tenon's report

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