[wp-trac] [WordPress Trac] #51013: Low contrast ratios with some Admin Color Scheme choices

[WordPress Trac]

#51013: Low contrast ratios with some Admin Color Scheme choices
-------------------------------+-------------------------------------
 Reporter:  Ate Up With Motor  |       Owner:  (none)
     Type:  feature request    |      Status:  new
 Priority:  normal             |   Milestone:  Awaiting Review
Component:  Administration     |     Version:  5.5
 Severity:  normal             |  Resolution:
 Keywords:                     |     Focuses:  ui, accessibility, css
-------------------------------+-------------------------------------
Changes (by SergeyBiryukov):

 * focuses:  accessibility => ui, accessibility, css
 * component:  General => Administration


Old description:

> This is a followup to ticket
> (<https://core.trac.wordpress.org/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.

New description:

 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.

--

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