[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:  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. I'm
 describing the rationale of the patch in a few moments.

 In any case, during the meeting, it was pointed out that any new color
 added to the palette should be discussed with the design team, which I
 didn't know. In order to ship the patch with 5.5, I'll refresh it later
 using a tone of blue that is already part of the palette.

 Anyway, the shade of blue is built with accessibility in mind, but the
 specific tone of blue I selected was chosen so that it could fit into a
 color scheme. Here is the logic behind my thought.
 * I checked all existing color schemes for the difference between the
 "normal" link color and the :hover one. In almost all of them, 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 almost a tint of the "normal" link
 color, but it's not related to it, 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 to use for "normal" and "hover" links: they would have the same
 hue, the same saturation, but their lightness would be different and the
 difference would have been of 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°, rispectively. 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. As per comment

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