Color contrast changes impact color schemes negatively

[Ate Up With Motor]

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.

[Ate Up With Motor]

Classic Editor, default admin colors

[Ate Up With Motor]

Classic Editor, Coffee admin color scheme

[Ate Up With Motor]

Classic Editor, Ectoplasm admin color scheme

[Ate Up With Motor]

Classic Editor, Light admin color scheme

[Ate Up With Motor]

Classic Editor, Midnight admin color scheme

[Ate Up With Motor]

Classic Editor, Ocean admin color scheme

[Ate Up With Motor]

Classic Editor, Sunrise admin color scheme

[Ate Up With Motor]

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

[audrasjb]

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

[Ate Up With Motor]

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.)

[afercia]

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.

[Ate Up With Motor]

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.

[melchoyce]

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.

[Ate Up With Motor]

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 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.

[Ate Up With Motor]

Revised screenshot of the Blue admin color scheme

[Ate Up With Motor]

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

[audrasjb]

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 :)

[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.

[Ate Up With Motor]

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.

[sabernhardt]

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.

[afercia]

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.

[audrasjb]

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.

[audrasjb]

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

[melchoyce]

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

[audrasjb]

Edit media screen with Midnight color scheme

[audrasjb]

Edit media screen with Blue color scheme

[audrasjb]

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.

[melchoyce]

Thanks @audrasjb! And thanks for posting screenshots 😁

[SergeyBiryukov]

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.

[SergeyBiryukov]

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.

[afercia]

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]

Vinyard color scheme from the Admin Color Schemes plugin

[afercia]

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.

[ryelle]

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.