WordPress.org

Make WordPress Core

Opened 11 months ago

Closed 10 months ago

Last modified 7 months ago

#48585 closed defect (bug) (fixed)

Color contrast changes impact color schemes negatively

Reported by: Ate Up With Motor Owned by: audrasjb
Milestone: 5.3.1 Priority: normal
Severity: normal Version: 5.3
Component: Administration Keywords: has-screenshots 5-3-admin-css-changes has-patch commit has-dev-note
Focuses: ui, accessibility Cc:

Description (last modified by joedolson)

Original Title: New button design makes dashboard button text hard to read with Classic Editor

The UI changes with the 5.3 update make many post-editing buttons and controls difficult to read with the Classic Editor: poor color contrast, jarring color selections. The color scheme I was using on one of my sites (Coffee) now makes post editing controls almost invisible, and the alternative color schemes aren't much better, as the attached screenshots should illustrate.

While the problem is most egregious with the editor, the Admin Color Scheme is now also applied to various plugin-specific buttons throughout the dashboard with similar effect. For example, in the Midnight scheme, the previous backups in the UpdraftPlus menu are now indicated by red rather than black buttons.

There is no evident way for me to have the buttons use black text, which now makes managing many site functions harder or painful -- a complete accessibility fail.

Attachments (14)

screenshot-default.jpg (96.7 KB) - added by Ate Up With Motor 11 months ago.
Classic Editor, default admin colors
screenshot-coffee.jpg (90.7 KB) - added by Ate Up With Motor 11 months ago.
Classic Editor, Coffee admin color scheme
screenshot-ectoplasm.jpg (89.5 KB) - added by Ate Up With Motor 11 months ago.
Classic Editor, Ectoplasm admin color scheme
screenshot-light.jpg (92.4 KB) - added by Ate Up With Motor 11 months ago.
Classic Editor, Light admin color scheme
screenshot-midnight.jpg (96.8 KB) - added by Ate Up With Motor 11 months ago.
Classic Editor, Midnight admin color scheme
screenshot-ocean.jpg (88.3 KB) - added by Ate Up With Motor 11 months ago.
Classic Editor, Ocean admin color scheme
screenshot-sunrise.jpg (103.7 KB) - added by Ate Up With Motor 11 months ago.
Classic Editor, Sunrise admin color scheme
updraft-menu-screenshot(Midnight).jpg (150.9 KB) - added by Ate Up With Motor 11 months ago.
UpdraftPlus plugin menu showing previous backups (Midnight admin color scheme)
screenshot-blue.2.jpg (113.9 KB) - added by Ate Up With Motor 11 months ago.
Revised screenshot of the Blue admin color scheme
secondary-colors.diff (3.0 KB) - added by melchoyce 10 months ago.
Assigns a fixed design to all secondary buttons across all color schemes. Co-written with @ryelle.
Capture d’écran 2019-12-05 à 21.09.08.png (123.1 KB) - added by audrasjb 10 months ago.
Edit media screen with Midnight color scheme
Capture d’écran 2019-12-05 à 21.08.47.png (122.9 KB) - added by audrasjb 10 months ago.
Edit media screen with Blue color scheme
Vinyard.png (67.8 KB) - added by afercia 10 months ago.
Vinyard color scheme from the Admin Color Schemes plugin
Midnight vs. Vinyard.png (67.9 KB) - added by afercia 10 months ago.

Download all attachments as: .zip

Change History (47)

@Ate Up With Motor
11 months ago

Classic Editor, default admin colors

@Ate Up With Motor
11 months ago

Classic Editor, Coffee admin color scheme

@Ate Up With Motor
11 months ago

Classic Editor, Ectoplasm admin color scheme

@Ate Up With Motor
11 months ago

Classic Editor, Light admin color scheme

@Ate Up With Motor
11 months ago

Classic Editor, Midnight admin color scheme

@Ate Up With Motor
11 months ago

Classic Editor, Ocean admin color scheme

@Ate Up With Motor
11 months ago

Classic Editor, Sunrise admin color scheme

@Ate Up With Motor
11 months ago

UpdraftPlus plugin menu showing previous backups (Midnight admin color scheme)

#1 @audrasjb
11 months ago

  • Keywords has-screenshots added
  • Milestone changed from Awaiting Review to 5.3.1
  • Owner set to audrasjb
  • Status changed from new to reviewing

Hi @ate-up-with-motor , welcome to WordPress Trac and thank you for opening this ticket!

Thanks for all the screenshot, this is really useful, even if it was already addressed before, WordPress is constantly in development for your feedback really helps.

We will evaluate your feedback during the next accessibility meeting (Friday at 15:00 UTC on WordPress Slack, feel free to attend). By he way, the alternate color schemes were not accessibility ready even before those changes. We know there is a lot to do to improve them in term of accessibility.

For the default color scheme, I guess the issue on the Classic Editor is related to the grey background used in the toolbar. I'll check if it should be handled in Core or in Classic Editor plugin.

Thanks again.

Auto-assigning this ticket to myself for full review and assigning it to WP 5.3.1.

Cheers,
Jb

#2 @Ate Up With Motor
11 months ago

Jb,

Thanks. I know the alternate color schemes were not necessarily great for accessibility to begin with, but I went through all of them to illustrate the basic problem: None of the options offers the ability to make the button text black and all of them are hard to read, some more than others.

(Tangential question: Is there any way I can edit or resubmit one of those screenshots? I cropped most of them, but missed cropping the Blue one, which is embarrassing.)

#3 @afercia
11 months ago

  • Component changed from Editor to Administration
  • Focuses ui added; administration removed

For the default color scheme, I guess the issue on the Classic Editor is related to the grey background used in the toolbar

Yep, worth noting the secondary buttons style was changed also for consistency with the block editor (Gutenberg) buttons style. Consistency is important though as @audrasjb mentioned the buttons alternate schemes work better in the block editor because the background is white.

I'd tend to think this is a necessary transition though, as the styling of UI elements should be the same across all the WordPress various components.

I'd also agree the alternate color schemes would need some improvements (this is a pending issue since... some years) but the only color scheme that aims to be fully accessible is the default one. I'd kindly ask to refrains from sentences like "a complete accessibility fail" as that's not greatly helpful nor constructive.

Changing the component to "Administration" as it doesn't relate just to the Classic Editor.

#4 @Ate Up With Motor
11 months ago

Thanks for the component clarification.

I'm afraid I must strongly disagree that this is "a necessary transition." Previously, the color scheme didn't change the color of the secondary buttons (so far as I ever noticed), which was considerably more legible regardless of the color scheme used.

While the gray background of the toolbar doesn't help the contrast issues, none of the available color choices seems particularly desirable for buttons and button text even in instances where the secondary button is against a white background. I believe that black or even dark gray button text would be significantly more legible in all or nearly all of these instances, and it's frustrating that there is now no way to achieve that. If some people want to have lime green buttons (on a white background or not), that's certainly their prerogative, but there should be some more legible alternative.

I submitted a separate ticket with a related feature request (to be able to customize the color selections in the Admin Color Schemes choices), which would help a lot.

#5 @melchoyce
11 months ago

I think we'll want to update the sass mixin to either darken that secondary color quite a bit, or have all the alternative color schemes use a single, unified secondary button color. Maybe we could explore something like https://gist.github.com/softpunch/7d56fc6ec3348fa2f69a8e0d5f6793d4 and get rid of sass entirely.

#6 @Ate Up With Motor
11 months ago

I concur that the present colors need to change. Eliminating the gray background might lessen the contrast issue, but isn't sufficient, and isn't necessarily desirable for other reasons (Big areas of white can contribute to eyestrain, at least for me. With complex pages with many discrete sets of elements, I find that the gray background for each group is a very helpful visual navigation aid.)

A point I mentioned in my original forum post that bears repeating is that red is commonly associated with error messages. Similarly, blue is commonly used for hyperlinks. So, the use of these colors for secondary buttons can be visually confusing in that regard as well.

I would really like at least the option of black secondary buttons/button text.

Last edited 11 months ago by Ate Up With Motor (previous) (diff)

@Ate Up With Motor
11 months ago

Revised screenshot of the Blue admin color scheme

#7 follow-up: @Ate Up With Motor
11 months ago

(Can I remove the original Blue screenshot? I didn't crop it adequately when I was uploading shots yesterday. Thanks!)

#8 in reply to: ↑ 7 @audrasjb
11 months ago

Replying to Ate Up With Motor:

(Can I remove the original Blue screenshot? I didn't crop it adequately when I was uploading shots yesterday. Thanks!)

No you can't but no worries, it's ok :)

#9 follow-up: @afercia
11 months ago

I deleted the original Blue color scheme screenshot, I guess you don't want to show your site's domain and your browser chrome, which is understandable.

#10 @afercia
11 months ago

  • Keywords 5-3-admin-css-changes needs-design-feedback added

#11 in reply to: ↑ 9 @Ate Up With Motor
11 months ago

Replying to afercia:

I deleted the original Blue color scheme screenshot, I guess you don't want to show your site's domain and your browser chrome, which is understandable.

Thanks so much! I really appreciate it.

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


11 months ago

#13 @joedolson
11 months ago

  • Description modified (diff)
  • Summary changed from New button design makes dashboard button text hard to read with Classic Editor to Color contrast changes impact color schemes negatively

#14 @sabernhardt
11 months ago

For an immediate fix on current alternate color schemes, I agree with @melchoyce's suggestion of using a unified secondary button style for all seven. I'd even recommend starting with the exact set of grays assigned to those buttons in WordPress 5.2 (because that should work with all of them). The primary buttons also can be a little harder to read without the text-shadow, but I doubt it's worth adding that back. Anyway, I'm not interested in a major reversion. (Although I would welcome adding a "Legacy" color scheme for anyone who specifically chooses to return to the former styles, if that should come up in another discussion.)

For testing: is there a special way to switch color schemes while in development? The options were not on my profile page in beta/trunk because "-src" was part of the WordPress version. If we do need to check these in trunk, I could upload a patch here that (temporarily) re-enables that section for testers.

#15 @afercia
11 months ago

is there a special way to switch color schemes while in development?

If you run trunk from the build directory http://build.wordpress-develop.test/wp-admin/ you should be able to see the admin color schemes in your profile.

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


10 months ago

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


10 months ago

#18 @audrasjb
10 months ago

  • Milestone changed from 5.3.1 to 5.4

Moving this one to next release since it still needs a patch, a design feedback and 5.3.1 is planned for the next few days.
Note: #48598 would be a first step, to address :active state of secondary buttons.

#19 @audrasjb
10 months ago

(feel free to move it again to 5.3.1 if we have a solution in the next couple of days)

@melchoyce
10 months ago

Assigns a fixed design to all secondary buttons across all color schemes. Co-written with @ryelle.

#20 @melchoyce
10 months ago

  • Keywords has-patch added; needs-design-feedback removed

This ticket was mentioned in Slack in #design by melchoyce. View the logs.


10 months ago

@audrasjb
10 months ago

Edit media screen with Midnight color scheme

@audrasjb
10 months ago

Edit media screen with Blue color scheme

#22 @audrasjb
10 months ago

  • Keywords commit added
  • Milestone changed from 5.4 to 5.3.1
  • Status changed from reviewing to accepted

Hi,

Thanks @melchoyce @ryelle for your patch.
I tested it on each alternate color scheme and it works like a charm ⭐️

This patch is also fixing #48598. Thank you to all who contributed on the other ticket.

Moving the ticket back to 5.3.1 and adding commit keyword.

#23 @melchoyce
10 months ago

Thanks @audrasjb! And thanks for posting screenshots 😁

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


10 months ago

#25 @SergeyBiryukov
10 months ago

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

In 46815:

Accessibility: Administration: Apply a unified design to all secondary buttons across all color schemes.

This ensures that secondary buttons have an appropriate color contrast in the alternative color schemes.

Props melchoyce, ryelle, audrasjb, ate-up-with-motor, afercia, sabernhardt.
Fixes #48585.

#26 @SergeyBiryukov
10 months ago

In 46816:

Accessibility: Administration: Apply a unified design to all secondary buttons across all color schemes.

This ensures that secondary buttons have an appropriate color contrast in the alternative color schemes.

Props melchoyce, ryelle, audrasjb, ate-up-with-motor, afercia, sabernhardt.
Merges [46815] to the 5.3 branch.
Fixes #48585.

#27 @afercia
10 months ago

  • Keywords needs-dev-note added

Thanks for the patch and the fix! This change and also [46817] from #48598 will need a quick dev note.

There are plugins that add additional admin color schemes, for example: https://wordpress.org/plugins/admin-color-schemes. These changes introduce hardcoded colors which won't be available as variables in the additional color schemes. It's a minor thing but, for example, the secondary buttons in the schemes from the Admin Color Schemes plugin are still blue.

Also, it would be nice if the plugin maintainers would find the time to update the focus style, which is still the old one. See screenshot below.

@afercia
10 months ago

Vinyard color scheme from the Admin Color Schemes plugin

#28 @afercia
10 months ago

For better clarity, please see the screenshot attached below.

On the left: one of the built-in color schemes (Midnight): secondary buttons are grey, as expected.

On the right: an additional color scheme: "Vinyard" from the Admin Color Schemes plugin: secondary buttons are blue.

This happens because the plugin still uses the color variable, as it is supposed to do. Instead, this change introduces a hardcoded color. No strong objections, though it goes a bit against the purpose of having color variables. If this is going to stay, it should be explained to plugin authors so they can use the new hardcoded color if they want.

Worth also reminding that in the default color scheme, the secondary buttons are blue. Not sure why they should become grey in the built-in color schemes.

Last edited 10 months ago by afercia (previous) (diff)

#29 @ryelle
10 months ago

This happens because the plugin still uses the color variable, as it is supposed to do. Instead, this change introduces a hardcoded color. No strong objections, though it goes a bit against the purpose of having color variables. If this is going to stay, it should be explained to plugin authors so they can use the new hardcoded color if they want.

Not exactly– the issue is that the color scheme plugins (at least, this one), need to be keep up-to-date with core's sass files. I haven't kept on top of this for admin-color-schemes, so it's out of date. You can see it working correctly if you download it from github, as I've updated it there.

These secondary buttons are not meant to be customizable, hence not using variables. The note posted today explains all this well enough, I don't think any other notes are needed.

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


10 months ago

#31 @audrasjb
10 months ago

  • Keywords has-dev-note added; needs-dev-note removed

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


7 months ago

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


7 months ago

Note: See TracTickets for help on using tickets.