WordPress.org

Make WordPress Core

Opened 6 years ago

Closed 5 years ago

#31548 closed defect (bug) (fixed)

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

Reported by: scarinessreported Owned by: rianrietveld
Milestone: 4.5 Priority: normal
Severity: normal Version: 3.8
Component: Login and Registration Keywords: has-patch color-contrast has-screenshots commit
Focuses: ui, accessibility Cc:

Description (last modified by rianrietveld)

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

Attachments (6)

login.css.diff (502 bytes) - added by scarinessreported 6 years ago.
diff file for /wp-admin/css/login.css
login.css.2.diff (587 bytes) - added by scarinessreported 6 years ago.
add focus color change
login.css.3.diff (677 bytes) - added by scarinessreported 6 years ago.
added text underline to hover and hover style to forgetmenot label
31548.patch (346 bytes) - added by afercia 5 years ago.
31548.2.patch (646 bytes) - added by afercia 5 years ago.
31548.3.patch (643 bytes) - added by afercia 5 years ago.

Download all attachments as: .zip

Change History (25)

@scarinessreported
6 years ago

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

This ticket was mentioned in Slack in #accessibility by scarinessreported. View the logs.


6 years ago

@scarinessreported
6 years ago

add focus color change

#2 @DrewAPicture
6 years ago

  • Focuses ui added
  • Keywords has-patch added

@scarinessreported
6 years ago

added text underline to hover and hover style to forgetmenot label

#3 @scarinessreported
6 years ago

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.

This ticket was mentioned in Slack in #accessibility by cheffheid. View the logs.


6 years ago

#5 follow-ups: @helen
6 years ago

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.

#6 in reply to: ↑ 5 ; follow-up: @scarinessreported
6 years ago

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

#7 in reply to: ↑ 6 @afercia
6 years ago

Replying to scarinessreported:

Yes agreed the whole admin needs updating

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

#8 @DrewAPicture
6 years ago

  • Version changed from trunk to 3.8

#9 in reply to: ↑ 5 @afercia
5 years ago

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.

https://cldup.com/xaAcJM-cB1.png

@afercia
5 years ago

#10 @afercia
5 years ago

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

#11 @rianrietveld
5 years ago

  • Owner set to rianrietveld
  • Status changed from new to assigned

#12 @rianrietveld
5 years ago

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.

#13 @rianrietveld
5 years ago

  • Milestone changed from Awaiting Review to Future Release

#14 @rianrietveld
5 years ago

  • Description modified (diff)

#15 @afercia
5 years ago

  • Keywords color-contrast added
  • Milestone changed from Future Release to 4.5

@afercia
5 years ago

#16 @afercia
5 years ago

  • Keywords has-screenshots commit added

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

https://cldup.com/7KQ63GhS-u.png

@afercia
5 years ago

#18 @afercia
5 years ago

Updated screenshot:

https://cldup.com/ow3MM_dDcS.png

#19 @afercia
5 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 36395:

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

Props scarinessreported for the initial patch.
Fixes #31548.

Note: See TracTickets for help on using tickets.