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

[WordPress Trac]

#47150: Insufficient contrast on empty field borders
-------------------------------------------------+-------------------------
 Reporter:  anevins                              |       Owner:  audrasjb
     Type:  defect (bug)                         |      Status:  assigned
 Priority:  normal                               |   Milestone:  5.3
Component:  Media                                |     Version:
 Severity:  minor                                |  Resolution:
 Keywords:  has-screenshots wpcampus-report      |     Focuses:  ui,
  color-contrast form-controls has-patch         |  accessibility
-------------------------------------------------+-------------------------
Description changed by afercia:

Old description:

> 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.''

New description:

 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 `#f1f1f1` 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#comment:18>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform