WordPress.org

Make WordPress Core

Opened 4 weeks ago

Closed 7 days ago

Last modified 39 hours 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 needs-dev-note
Focuses: ui, accessibility Cc:
PR Number:

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 4 weeks ago.
Classic Editor, default admin colors
screenshot-coffee.jpg (90.7 KB) - added by Ate Up With Motor 4 weeks ago.
Classic Editor, Coffee admin color scheme
screenshot-ectoplasm.jpg (89.5 KB) - added by Ate Up With Motor 4 weeks ago.
Classic Editor, Ectoplasm admin color scheme
screenshot-light.jpg (92.4 KB) - added by Ate Up With Motor 4 weeks ago.
Classic Editor, Light admin color scheme
screenshot-midnight.jpg (96.8 KB) - added by Ate Up With Motor 4 weeks ago.
Classic Editor, Midnight admin color scheme
screenshot-ocean.jpg (88.3 KB) - added by Ate Up With Motor 4 weeks ago.
Classic Editor, Ocean admin color scheme
screenshot-sunrise.jpg (103.7 KB) - added by Ate Up With Motor 4 weeks ago.
Classic Editor, Sunrise admin color scheme
updraft-menu-screenshot(Midnight).jpg (150.9 KB) - added by Ate Up With Motor 4 weeks ago.
UpdraftPlus plugin menu showing previous backups (Midnight admin color scheme)
screenshot-blue.2.jpg (113.9 KB) - added by Ate Up With Motor 4 weeks ago.
Revised screenshot of the Blue admin color scheme
secondary-colors.diff (3.0 KB) - added by melchoyce 7 days 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 7 days ago.
Edit media screen with Midnight color scheme
Capture d’écran 2019-12-05 à 21.08.47.png (122.9 KB) - added by audrasjb 7 days ago.
Edit media screen with Blue color scheme
Vinyard.png (67.8 KB) - added by afercia 6 days ago.
Vinyard color scheme from the Admin Color Schemes plugin
Midnight vs. Vinyard.png (67.9 KB) - added by afercia 2 days ago.

Download all attachments as: .zip

Change History (43)

@Ate Up With Motor
4 weeks ago

Classic Editor, default admin colors

@Ate Up With Motor
4 weeks ago

Classic Editor, Coffee admin color scheme

@Ate Up With Motor
4 weeks ago

Classic Editor, Ectoplasm admin color scheme

@Ate Up With Motor
4 weeks ago

Classic Editor, Light admin color scheme

@Ate Up With Motor
4 weeks ago

Classic Editor, Midnight admin color scheme

@Ate Up With Motor
4 weeks ago

Classic Editor, Ocean admin color scheme

@Ate Up With Motor
4 weeks ago

Classic Editor, Sunrise admin color scheme

@Ate Up With Motor
4 weeks ago

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

#1 @audrasjb
4 weeks 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
4 weeks 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
4 weeks 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
4 weeks 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
4 weeks 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
4 weeks 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 4 weeks ago by Ate Up With Motor (previous) (diff)

@Ate Up With Motor
4 weeks ago

Revised screenshot of the Blue admin color scheme

#7 follow-up: @Ate Up With Motor
4 weeks 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
4 weeks 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
4 weeks 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
4 weeks ago

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

#11 in reply to: ↑ 9 @Ate Up With Motor
4 weeks 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.


4 weeks ago

#13 @joedolson
4 weeks 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
4 weeks 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
3 weeks 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.


3 weeks ago

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


7 days ago

#18 @audrasjb
7 days 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
7 days ago

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

@melchoyce
7 days ago

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

#20 @melchoyce
7 days ago

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

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


7 days ago

@audrasjb
7 days ago

Edit media screen with Midnight color scheme

@audrasjb
7 days ago

Edit media screen with Blue color scheme

#22 @audrasjb
7 days 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
7 days ago

Thanks @audrasjb! And thanks for posting screenshots 😁

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


7 days ago

#25 @SergeyBiryukov
7 days 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
7 days 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
6 days 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
6 days ago

Vinyard color scheme from the Admin Color Schemes plugin

#28 @afercia
2 days 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 2 days ago by afercia (previous) (diff)

#29 @ryelle
39 hours 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.

Note: See TracTickets for help on using tickets.