Fix color contrast on wp-login.php to meet minimum accessibility standards

[scarinessreported]

I would like to propose some style changes to the links so that they comply with the minimum requirements of WCAG AA.

At the moment the login page links do not meet the basic requirements of color contrast.

I am submitting some css changes so that it meets the requirements without moving away too much from the current color scheme

Tracking label: #a11y-color

[scarinessreported]

diff file for /wp-admin/css/login.css

[scarinessreported]

add focus color change

[scarinessreported]

added text underline to hover and hover style to forgetmenot label

[scarinessreported]

I have now tested the colors against WCAG AAA and color blindness simulators so that it meets with those standards.

For testing I used ​http://www.dasplankton.de/ContrastA/ wave toolbar and juicy studio.

[helen]

login.css appears to need some color updating in the first place - see #31234. I am all for contrast guidelines, but if we need to change some colors then they need to be considered holistically, not just on the login screen.

[scarinessreported]

Replying to helen:

login.css appears to need some color updating in the first place - see #31234. I am all for contrast guidelines, but if we need to change some colors then they need to be considered holistically, not just on the login screen.

Yes agreed the whole admin needs updating the colour scheme so the contrasts are accessible to all so lets merge or move this to the other ticket so i can offer fixes for some of the styles that aren't yet WCAG AA

[afercia]

Replying to scarinessreported:

Yes agreed the whole admin needs updating

Just created a new ticket for a more global approach, see #31713

[afercia]

Replying to helen:

login.css appears to need some color updating in the first place - see #31234. I am all for contrast guidelines, but if we need to change some colors then they need to be considered holistically, not just on the login screen.

Totally agree. So maybe it make sense to be consistent with the updated default admin colors. See ​the new colors announcement post in Make Design for reference.

Some background: as far as I know, the links color was #21759b in WordPress 3.7 than changed in #999 with the MP6 admin redesign.

I'd say we have two choices: use the new blue for links #0073aa or use one of the available new greys: #464b50. I'd rather the blue, it will also be consistent with the color of the links displayed in the error messages. Also, I'd say no underline and we should meet WCAG AA level so a contrast of 4.50:1 would be sufficient.
See screenshot: current, new blue, new grey. Any thoughts and UI feedback more than welcome.

[afercia]

New patch to propose a new approach: just change the links color and make it blue again, using the new #0073aa.

[rianrietveld]

Agree with

rather the blue, it will also be consistent with the color of the links displayed in the error messages. [...] and we should meet WCAG AA level so a contrast of 4.50:1 would be sufficient.

An underlining on hover would be nice, but that is never the case in the whole Admin, that's maybe another discussion.

[afercia]

Refreshed patch, using the new grey proposed in #35604. Screenshot before and after:

[afercia]

Updated patch with ​the new "dark medium gray" from Hugo Baeta.

[afercia]

Updated screenshot:

[afercia]

In 36395:

Accessibility: Fix the color contrast ratio in the login screen.

Props scarinessreported for the initial patch.
Fixes #31548.