[wp-trac] [WordPress Trac] #47150: Insufficient contrast on empty field borders

[WordPress Trac]

#47150: Insufficient contrast on empty field borders
-------------------------+-------------------------------------------------
 Reporter:  anevins      |      Owner:  (none)
     Type:  defect       |     Status:  new
  (bug)                  |
 Priority:  normal       |  Milestone:  Awaiting Review
Component:  Media        |    Version:
 Severity:  minor        |   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/15275

 * **Severity**:
  * Low
 * **Affected Populations**:
  * Low-Vision
  * Cognitively
 * **Platform(s)**:
  * All / Universal
 * **Components affected**:
  * Media Dialog

 **Issue description**
 Some interface components in the "Featured Image" modal have
 insufficient color contrast for their borders when empty, below the
 minimum threshold of 3:1 for interface components:

 Caption, Alt Text and Description field borders: light-grey (#ddd) on
 lighter grey (#f3f3f3): 1.35:1
 Sufficient color contrast is important for users who have low-vision or
 are color-blind, because content with a low contrast ratio may be
 difficult or impossible for such users to see.

 **Issue Code**
 {{{
     .media-frame input[type=email], .media-frame input[type=number],
 .media-frame input[type=password], .media-frame input[type=search],
 .media-frame input[type=text], .media-frame input[type=url], .media-frame
 select, .media-frame textarea {
         ...
         border-width: 1px;
         border-style: solid;
         border-color: #ddd;
     }
 }}}
 **Remediation Guidance**
 Darken the border-color to create a minimum contrast ratio of 3:1.

 **Recommended Code**
 {{{
     .media-frame input[type=email], .media-frame input[type=number],
 .media-frame input[type=password], .media-frame input[type=search],
 .media-frame input[type=text], .media-frame input[type=url], .media-frame
 select, .media-frame textarea {
         ...
         border-width: 1px;
         border-style: solid;
         border-color: #8f8f8f;
     }
 }}}

 **Relevant standards**
 * 1.4.11 Non-text Contrast (Level AA) https://www.w3.org/TR/WCAG20
 /#visual-audio-contrast-without-color

 **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-44 in Tenon's report

 ''**Note**: The grey backgrounds `#f3f3f3` or `#f3f3f3 `are used in many
 other places in WordPress (e.g. Setting Pages, etc.) so I guess it would
 need some more exploration.''

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