[wp-trac] [WordPress Trac] #47682: The links "hover" color has insufficient color contrast

[WordPress Trac]

#47682: The links "hover" color has insufficient color contrast
-------------------------+-------------------------------------------------
 Reporter:  afercia      |      Owner:  (none)
     Type:  defect       |     Status:  new
  (bug)                  |
 Priority:  normal       |  Milestone:  Awaiting Review
Component:               |    Version:
  Administration         |   Keywords:  wpcampus-report color-contrast has-
 Severity:  normal       |  screenshots needs-design
  Focuses:  ui,          |
  accessibility          |
-------------------------+-------------------------------------------------
 Supersedes #35622 and #47157.

 During the contributor day at WCEU 2019, it was proposed to merge #35622
 and #47157. They're strictly related and the root issue needs to be
 tackled holistically across the whole WordPress admin.

 == Problem
 Default links (and "button-links") in WordPress are blue. The ones for
 destructive actions are red.

 Generally, the default colors for their normal state do have a sufficient
 color contrast ratio of 4.5:1 with the background. However, the colors
 used for the "hover" (and "active") state don't.

 == Relevant standard
 W3C Web Content Accessibility Guidelines (WCAG)
 [https://www.w3.org/TR/WCAG21/#contrast-minimum 1.4.3 Contrast (Minimum)
 (Level AA)]

 == Details
 #35622 dived into the red links issue and after some exploration it became
 clear that finding a color **pair** (one color for the normal state and
 one for the hover/active state) that always works across the admin, is
 nearly impossible given the several, different, background colors used in
 the admin pages.

 Part of the problem is that the hover color is "lighter" than the default
 one. Worth noting the color used for the "focus" state is darker instead.

 More importantly, there are several different background colors, including
 [https://core.trac.wordpress.org/ticket/35783 an arguable amount of grey
 shades].

 Trying to summarise the reason why #35622 didn't progress:
 - darkening the "hover" red forced to darken also the default red
 - once a new color pair was identified, it worked well on ''some''
 backgrounds
 - however, it didn't work on other darker backgrounds
 - started from scratch and further darkened the color pair
 - it worked on more backgrounds
 - found edge cases
 - darkened the color pair again
 - at some point the normal red was so dark to look almost "brownish"
 - failure

 The same problem applies to the blue links, as reported in the WPCampus
 accessibility report. See #47157.

 == Some examples

 **The "hover" blue `#00a0d2`:**
 3.02 contrast ratio on white background
 2.67 contrast ratio on the admin default grey background `#f1f1f1`
 2.87 contrast ratio on the tables zebra-stripe grey `#f9f9f9`

 **The "hover" red `#dc3232`:**
 4.62 contrast ratio on white background (which is OK)
 4:39 contrast ratio on the tables zebra-stripe grey `#f9f9f9`
 4.09 contrast ratio on the default grey `#f1f1f1`
 4.16 contrast ratio on media views grey `#f3f3f3`
 3.98 contrast ratio on customizer grey `#eee`

 Note: these are just a few examples. There are more background colors to
 take into consideration and also edge cases, e.g. the yellow background
 for unapproved comments.

 == Some screenshots

 [[Image(http://cldup.com/q5MYm6DKL1.png)]]

 [[Image(http://cldup.com/rawfy7Eth9.png)]]

 [[Image(http://cldup.com/IoW1cBF-Pl.png)]]

 [[Image(http://cldup.com/PGDfF4zXTZ.png)]]

 [[Image(http://cldup.com/PMx2qmF8zQ.png)]]

 [[Image(http://cldup.com/Kgp8htI4g5.png)]]

 [[Image(http://cldup.com/vdAtUeFEyZ.png)]]

 == Questions and possible options
 - Does the hover state needs to be communicated with a color change in the
 first place?
 - If so, does the hover color needs to be "lighter"? Using the darker
 color already used for the "focus" state may help. Generally, the color
 used for the hover state shouldn't be "lighter", as that reduces contrast
 right in the moment when users need it the most.
 - Are there better ways other than a color change? For example: toggling
 the link underline, or using a border, or an additional shape, would allow
 to use just one color and greatly simplify things.

 == Background colors
 Background colors are an important part of this problem. I do realise
 design considerations led to use different background colors in different
 parts of the WordPress admin. For example, the media views and the
 customizer made some autonomous design choices for their background
 colors. There are historical reasons for that. However, this led over time
 to a great inconsistency across the admin.

 For the greater good of maintenance, consistency, and simplification, I'd
 strongly suggest to start by exploring a way to drastically standardise
 the shades of grey used as background in WordPress. Ideally, there
 shouldn't be more than 3-4 shades of "light" grey used for the background.
 Some work in this regard was done in #35783 but there's still a lot of
 work to be done.

 == Note on accessibility standards for links
 According to [https://make.wordpress.org/core/handbook/best-practices
 /coding-standards/accessibility-coding-standards/#links-underline-or-no-
 underline the WordPress accessibility coding standards]:
 > When links can be identified as such by the context, for example because
 they're part of a menu, or a set of links clearly identified as user
 interface controls, they don't necessarily need to be underlined. In all
 the other cases, especially for links surrounded by other text (in a line
 or block of text), links need to be always underlined.

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