[wp-trac] [WordPress Trac] #64313: Color Contrast below WCAG standards for WordPress Dashboard

[WordPress Trac]

#64313: Color Contrast below WCAG standards for WordPress Dashboard
----------------------------+-----------------------------
 Reporter:  bobbingwide     |      Owner:  (none)
     Type:  defect (bug)    |     Status:  new
 Priority:  normal          |  Milestone:  Awaiting Review
Component:  Administration  |    Version:  6.8.3
 Severity:  normal          |   Keywords:
  Focuses:  accessibility   |
----------------------------+-----------------------------
 On the WordPress Dashboard ( wp-admin.php ) the WAVE evaluation tool
 reported 32 Color Contrast failures when using the Default Administration
 Color Scheme in my local development environment.

 In my opinion, WordPress should be setting an example with regards to
 accessibility, addressing both the front-end and administration areas of
 WordPress core.
 I believe that WordPress core should be updated such that WAVE will not
 produce Contrast Errors on the dashboard.

 In my local development I was able to eliminate these errors with some
 custom CSS that addressed several different problems.

 - problems with hidden screen reader text for Move up, Move down and
 Toggle panel buttons on postboxes
 - problems with hidden screen reader text for Community events
 - problems with low contrast on vertical bar separators in
 Community events and Recent comments


 I developed the following CSS which reduced the Color Contrast errors to
 0.

 {{{
 button.handlediv span.screen-reader-text,
 button.handle-order-lower span.screen-reader-text,
 button.handle-order-higher span.screen-reader-text,
 .community-events-footer .screen-reader-text {
     color: #000000;
     background-color: #ffffff;
 }

 .community-events-footer {
     color: #74747b;
 }
 .row-actions {
     color: #6e7177;
 }

 .activity-block .subsubsub li {
     color: #74747b;
 }
 }}}

 This custom CSS implements the recommendation from a member of the WebAIM
 team who, in response to my question "Should I attempt to deal with Color
 Contrast messages related to screen-reader-text by, for example, setting
 foreground and background colors? OR will that hide a problem waiting in
 the wings." replied...

 "Our approach is to test hidden content because most often hidden content
 might later be presented to users. The best solution to these contrast
 errors is to define foreground and background colors that meet the WCAG
 requirements. At a technical level WCAG requires this even for elements
 that are not made visible."

 Details of the problems, incl. screen captures, and the solutions I chose
 to implement can be found in GitHub comments from
 https://github.com/bobbingwide/oik/issues/79#issuecomment-3568176108 to
 https://github.com/bobbingwide/oik/issues/79#issuecomment-3582610716


 Note: In my initial investigation I was using the default Adminstration
 Color Scheme.
 I have since switched to the Light color scheme, for which I received 10
 further Contrast errors
 I have not yet tried the 6 other core admin color schemes.
 I suspect these additional problems would be better addressed in follow up
 TRACs.

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