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

WordPress Trac noreply at wordpress.org
Mon Jul 6 20:35:51 UTC 2020


#47682: The links "hover" color has insufficient color contrast
-------------------------------------------------+-------------------------
 Reporter:  afercia                              |       Owner:  ryokuhi
     Type:  defect (bug)                         |      Status:  assigned
 Priority:  normal                               |   Milestone:  5.5
Component:  Administration                       |     Version:
 Severity:  normal                               |  Resolution:
 Keywords:  wpcampus-report color-contrast has-  |     Focuses:  ui,
  screenshots has-patch                          |  accessibility
-------------------------------------------------+-------------------------

Comment (by ryokuhi):

 Sorry, I added the patch with no comment and no explanation, so that it
 could be reviewed today during the Accessibility Team bug scrub. Below are
 a list of the points that guided me in the choice of the color outside of
 the standard WordPress palette.

 The shade of blue I used for `:hover` links is built with accessibility in
 mind, but it was chosen so that it could fit into a replicable color
 scheme. Here is the logic behind my choices.
 * I checked all existing color schemes for the difference between the
 anchor element color and the `a:hover` one. In almost every admin color
 scheme, the `:hover` color is a tint of the standard link color, obtained
 using the SASS `lighten($link, 10%)` function. There are two exceptions:
 the default color scheme, where the `:hover` color is not a tint of the
 "normal" link color, but it's a lighter variant, and the new Modern color
 scheme, where the `:hover` link color is a tone of the "normal" link
 color, built using the SASS `darken($link, 10%)` function. Because of
 that, I decided to look for two colors for standard and hover links
 respectively: these colors have the same hue, the same saturation, but
 their lightness is different and the difference is 10%.
 * When selecting the hue, I checked for links color in the default theme:
 the "normal" link hue is 194°, the `:hover` hue is 199° and the `:focus`
 hue is 200°. Old colors for "normal" and `:hover` links used hues of 197°
 and 196°, respectively. On average, the hue is 197°, so I decided to use
 this hue for links.
 * Most of link colors had a saturation of 100%, so I stayed with that.
 * When choosing the lightness, it was important that the contast between
 all link colors (whether "normal" or `:hover`) had a contrast of at least
 4.5 against all possible backgrounds. The darkest light background in the
 WordPress admin dashboard is the Customizer one, which is #eee. The color
 with hue 197°, saturation 100%, minimum lightness and a contrast of at
 least 4.5 against #eee background is HSL(197°, 100%, 31%), or HTML color
 00719e. The tone of this shade of blue with lightness reduced by 10% is
 HSL(197°, 100%, 21%) or HTML color 004d6b (which is exactly the shade I
 used for `:hover` links).
 * Most WordPress admin color schemes (apart from the new Modern one) use
 the lighter shade for `:hover` and the darker for standard links. Anyway,
 the lightness of the darker shade of blue is 21%, which means this blue is
 very dark. If we use the same approach for other link colors of the
 interface (the red for spam/delete/trash buttons/links, and the green and
 yellow/orange links for approving/unapproving comments), and we decide to
 use the darker shade for "normal" links, all standard link colors would be
 very dark and very difficult to distinguish from one another. Also, the
 description of this issue suggested to use a darker shade for :hover
 instead of a lighter one. This is the reason why I used a lighter color
 for standard links and a darker color for `:hover` links.

 All of the above shows the reason for the new shade of blue. As this
 ticket addresses only :hover colors, I decided not to edit other colors
 (apart from the ones strictly related to the changed ones), but, once all
 :hover link colors are fixed, discussion can continue in issue #49999, in
 order to uniform all colors of the admin interface.
 In my opinion, the modern color scheme should be a completely independent
 color scheme and should overwrite all default colors according to its own
 rules, without affecting the standard color scheme.

 In any case, during the meeting, it was pointed out that all new colors
 added to the palette should be discussed with the design team, which I
 didn't know. As Beta 1 for WordPress 5.5 is planned for tomorrow, there is
 no time to discuss this ticket with the Design Team, so I'll refresh the
 patch later using a tone of blue that is already part of the palette.

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


More information about the wp-trac mailing list