WordPress.org

Make WordPress Core

#51013 closed feature request (wontfix)

Low contrast ratios with some Admin Color Scheme choices

Reported by: Ate Up With Motor Owned by:
Milestone: Priority: normal
Severity: normal Version: 5.5
Component: Administration Keywords:
Focuses: ui, accessibility, css Cc:

Description (last modified by SergeyBiryukov)

This is a followup to ticket #48585 regarding the issue of color contrast with the various color scheme options provided for administrative users.

The good news is that the default scheme currently appears to fare well in this regard, as does the Modern scheme. However, some of the others color schemes still have issues of insufficient contrast with colored button text, and in some cases with colored buttons with white text.

For example, the Generate Password and Log Out Everywhere Else buttons on the user Profile screen use colored text against a light gray background (f3f5f6). With the default color scheme, which uses blue text (0071a1), the contrast ratio is 4.95, which is adequate at this size. However, some of the other schemes don't do nearly so well. For example, with the Light scheme, the button text color (04a4cc) gives a contrast ratio of 2.67. Switching to the Ectoplasm scheme, the text of those buttons is light green (a3b745), giving a contrast ratio of only 2.03:1. (See the attached screenshot for illustration.)

To use another example on that Profile page, there are some similar contrast issues with the Update Profile button in some of the schemes. With the Coffee scheme, for example (which looks pretty good otherwise), the button uses white (ffffff) text on a brown (c7a589) button, giving a contrast ratio of 2.28:1. In the Ectoplasm scheme, the button is green (a3b745), giving a contrast ratio of only 2.23:1.

(This isn't an exhaustive list of contrast ratio issues with the various schemes, but is hopefully enough to convey the idea.)

I recognize that the other schemes are user-selectable options, but I wonder if it would be possible to further tinker with the button-color selection in the other schemes to make them more accessible while keeping their distinct look-and-feel.

For example, I would use the Ectoplasm scheme (I like the purple and green, and personally find the menu color scheme easy to use), but the green-on-gray text on buttons like Generate Password makes them too hard for me to read. Some minor changes to the color choices for the text (and perhaps using a darker green background for buttons like Update Profile) would usefully enhance the scheme's accessibility while preserving its distinctive eggplant palette. Some of the other color schemes could profit from similar adjustments.

Attachments (1)

scheme-ecto.jpg (24.1 KB) - added by Ate Up With Motor 15 months ago.
A screenshot of dashboard buttons in the Ectoplasm color scheme, illustrating the color contrast ratio issue

Download all attachments as: .zip

Change History (4)

@Ate Up With Motor
15 months ago

A screenshot of dashboard buttons in the Ectoplasm color scheme, illustrating the color contrast ratio issue

#1 @SergeyBiryukov
15 months ago

  • Component changed from General to Administration
  • Description modified (diff)
  • Focuses ui css added

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


14 months ago

#3 @ryokuhi
14 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to wontfix
  • Status changed from new to closed

Hello @ate-up-with-motor and thank you again for opening this ticket!
It was discussed durign last week's accessibility bug scrub.
While it would be nice if all color schemes were accessible (the summary of the ticket points in that direction), revising all of them to make them accessible would be very time consuming, also given that there are explorations to reconsider some color schemes and possibly retire some of them (see #50575).
Also, the accessibility team made the choice log ago not to require alternate schemes to meet high contrast guidelines (given that there are populations that require low contrast for better access, and that this isn't captured by accessibility guidelines).
As such, the team opted for closing this issue. If there are specific problematic colors in a certain color scheme, they can be changed in a specific ticket.
Also, this ticket started a discussion on how to better highlight which color schemes are accessible and which are not (discussion will happen in a new ticket), so it was still worth opening.

Note: See TracTickets for help on using tickets.