[wp-trac] [WordPress Trac] #47153: Field boundaries have insufficient color contrast

WordPress Trac noreply at wordpress.org
Sat Sep 28 13:09:20 UTC 2019


#47153: Field boundaries have insufficient color contrast
-------------------------------------------------+-------------------------
 Reporter:  anevins                              |       Owner:  audrasjb
     Type:  task (blessed)                       |      Status:  reopened
 Priority:  normal                               |   Milestone:  5.3
Component:  Administration                       |     Version:
 Severity:  minor                                |  Resolution:
 Keywords:  has-screenshots wpcampus-report      |     Focuses:  ui,
  color-contrast form-controls has-patch 5-3     |  accessibility
  -admin-css-changes                             |
-------------------------------------------------+-------------------------
Description changed by afercia:

Old description:

> Moved from the WPCampus accessibility report issues on GitHub, see :
> https://github.com/WordPress/gutenberg/issues/15272
>
> * **Severity**:
>  * Low
> * **Affected Populations**:
>  * Low-Vision
>  * Cognitively Impaired
> * **Platform(s)**:
>  * All / Universal
> * **Components affected**:
>  * Edit Media
>
> **Issue description**
> On the Edit Media page, several interactive components have insufficient
> color contrast for their borders or backgrounds, below the minimum 3:1
> for interface components:
>
> Text input borders: `#ddd` (light-grey) against `#fff` (white): 1.35.
> Checkbox and radio borders: `#b4b9be` (light grey) against `#fff`
> (white): 1.97.
> Focus shadow for fields and buttons: `#5b9dd9` (light blue) on `#fff`
> (white): 2.88.
> 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**
> {{{
> input[type=checkbox], input[type=color], input[type=date], input[type
> =datetime-local], input[type=datetime], input[type=email],
> input[type=month], input[type=number], input[type=password],
> input[type=radio], input[type=search], input[type=tel], input[type=text],
> input[type=time], input[type=url], input[type=week], select, textarea {
>         border: 1px solid #ddd;
>         box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
>         background-color: #fff;
>         ...
>     }
>
>     /* radio buttons, checkmarks */
>     input[type=checkbox], input[type=radio] {
>         border: 1px solid #b4b9be;
>         ...
>     }
>
>     /* focus state */
> input[type=checkbox]:focus, input[type=color]:focus,
> input[type=date]:focus, input[type=datetime-local]:focus,
> input[type=datetime]:focus, input[type=email]:focus,
> input[type=month]:focus, input[type=number]:focus,
> input[type=password]:focus, input[type=radio]:focus,
> input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus,
> input[type=time]:focus, input[type=url]:focus, input[type=week]:focus,
> select:focus, textarea:focus {
>         border-color: #5b9dd9;
>         box-shadow: 0 0 2px rgba(30,140,190,.8);
>     }
>
>     /* buttons at top */
>     .wp-core-ui .button-secondary:focus, .wp-core-ui .button.focus, .wp-
> core-ui .button:focus {
>         box-shadow: 0 0 3px rgba(0,115,170,.8);
>     }
>
>     #screen-meta-links .show-settings {
>         border: 0;
>         ...
>     }
> }}}
>
> **Remediation Guidance**
> Darken the gray borders and the focus shadow color to provide a minimum
> contrast ratio of 3:1 relative to the white background.
>
> Since box-shadow is not shown in High Contrast themes, this should
> also be supplemented with a transparent outline (or replaced with a
> visible outline).
>
> **Recommended Code**
> {{{
> input[type=checkbox], input[type=color], input[type=date], input[type
> =datetime-local], input[type=datetime], input[type=email],
> input[type=month], input[type=number], input[type=password],
> input[type=radio], input[type=search], input[type=tel], input[type=text],
> input[type=time], input[type=url], input[type=week], select, textarea {
>         border: 1px solid #949494;
>         box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
>         background-color: #fff;
>         ...
>     }
>
>     /* radio buttons, checkmarks */
>     input[type=checkbox], input[type=radio] {
>         border: 1px solid #949494;
>         ...
>     }
>
>     /* focus state */
> input[type=checkbox]:focus, input[type=color]:focus,
> input[type=date]:focus, input[type=datetime-local]:focus,
> input[type=datetime]:focus, input[type=email]:focus,
> input[type=month]:focus, input[type=number]:focus,
> input[type=password]:focus, input[type=radio]:focus,
> input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus,
> input[type=time]:focus, input[type=url]:focus, input[type=week]:focus,
> select:focus, textarea:focus {
>         border-color: #5999d4;
>         box-shadow: 0 0 2px rgba(30,140,190,.8);
>         outline: 1px solid transparent;
>     }
>
>     /* buttons at top */
>     #screen-meta-links .show-settings:focus {
>         border: 1px solid #0073aa;
>         ...
>     }
> }}}
>
> **Relevant standards**
> * 1.4.11 Non-text Contrast (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-76 in Tenon's report
>
> ''**Note**: Partly covered also in #15275''.
>
> ''**Note**: The media modals aren't part of Gutenberg. This issue should
> be moved to the core Trac under the Media component.''
>
> ''**Note**: There are also a few related core Trac tickets, see:''
> * https://core.trac.wordpress.org/ticket/44749
> * https://core.trac.wordpress.org/ticket/44606
> * https://core.trac.wordpress.org/ticket/38150
> * https://core.trac.wordpress.org/ticket/35596

New description:

 Moved from the WPCampus accessibility report issues on GitHub, see :
 https://github.com/WordPress/gutenberg/issues/15272

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

 **Issue description**
 On the Edit Media page, several interactive components have insufficient
 color contrast for their borders or backgrounds, below the minimum 3:1
 for interface components:

 Text input borders: `#ddd` (light-grey) against `#fff` (white): 1.35.
 Checkbox and radio borders: `#b4b9be` (light grey) against `#fff` (white):
 1.97.
 Focus shadow for fields and buttons: `#5b9dd9` (light blue) on `#fff`
 (white): 2.88.
 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**
 {{{
 input[type=checkbox], input[type=color], input[type=date], input[type
 =datetime-local], input[type=datetime], input[type=email],
 input[type=month], input[type=number], input[type=password],
 input[type=radio], input[type=search], input[type=tel], input[type=text],
 input[type=time], input[type=url], input[type=week], select, textarea {
         border: 1px solid #ddd;
         box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
         background-color: #fff;
         ...
     }

     /* radio buttons, checkmarks */
     input[type=checkbox], input[type=radio] {
         border: 1px solid #b4b9be;
         ...
     }

     /* focus state */
 input[type=checkbox]:focus, input[type=color]:focus,
 input[type=date]:focus, input[type=datetime-local]:focus,
 input[type=datetime]:focus, input[type=email]:focus,
 input[type=month]:focus, input[type=number]:focus,
 input[type=password]:focus, input[type=radio]:focus,
 input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus,
 input[type=time]:focus, input[type=url]:focus, input[type=week]:focus,
 select:focus, textarea:focus {
         border-color: #5b9dd9;
         box-shadow: 0 0 2px rgba(30,140,190,.8);
     }

     /* buttons at top */
     .wp-core-ui .button-secondary:focus, .wp-core-ui .button.focus, .wp-
 core-ui .button:focus {
         box-shadow: 0 0 3px rgba(0,115,170,.8);
     }

     #screen-meta-links .show-settings {
         border: 0;
         ...
     }
 }}}

 **Remediation Guidance**
 Darken the gray borders and the focus shadow color to provide a minimum
 contrast ratio of 3:1 relative to the white background.

 Since box-shadow is not shown in High Contrast themes, this should
 also be supplemented with a transparent outline (or replaced with a
 visible outline).

 **Recommended Code**
 {{{
 input[type=checkbox], input[type=color], input[type=date], input[type
 =datetime-local], input[type=datetime], input[type=email],
 input[type=month], input[type=number], input[type=password],
 input[type=radio], input[type=search], input[type=tel], input[type=text],
 input[type=time], input[type=url], input[type=week], select, textarea {
         border: 1px solid #949494;
         box-shadow: inset 0 1px 2px rgba(0,0,0,.07);
         background-color: #fff;
         ...
     }

     /* radio buttons, checkmarks */
     input[type=checkbox], input[type=radio] {
         border: 1px solid #949494;
         ...
     }

     /* focus state */
 input[type=checkbox]:focus, input[type=color]:focus,
 input[type=date]:focus, input[type=datetime-local]:focus,
 input[type=datetime]:focus, input[type=email]:focus,
 input[type=month]:focus, input[type=number]:focus,
 input[type=password]:focus, input[type=radio]:focus,
 input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus,
 input[type=time]:focus, input[type=url]:focus, input[type=week]:focus,
 select:focus, textarea:focus {
         border-color: #5999d4;
         box-shadow: 0 0 2px rgba(30,140,190,.8);
         outline: 1px solid transparent;
     }

     /* buttons at top */
     #screen-meta-links .show-settings:focus {
         border: 1px solid #0073aa;
         ...
     }
 }}}

 **Relevant standards**
 * 1.4.11 Non-text Contrast (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-76 in Tenon's report

 ''**Note**: Partly covered also in #15275''.

 ''**Note**: The media modals aren't part of Gutenberg. This issue should
 be moved to the core Trac under the Media component.''

 ''**Note**: There are also a few related core Trac tickets, see:''
 * #44749
 * #44606
 * #38150
 * #35596

--

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/47153#comment:53>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform


More information about the wp-trac mailing list