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

[WordPress Trac]

#47153: Field boundaries have insufficient color contrast
-------------------------+-------------------------------------------------
 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/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

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