WordPress.org

Make WordPress Core

Opened 8 months ago

Last modified 4 months ago

#48585 closed defect (bug)

Color contrast changes impact color schemes negatively — at Version 13

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.

Change History (22)

@Ate Up With Motor
8 months ago

Classic Editor, default admin colors

@Ate Up With Motor
8 months ago

Classic Editor, Coffee admin color scheme

@Ate Up With Motor
8 months ago

Classic Editor, Ectoplasm admin color scheme

@Ate Up With Motor
8 months ago

Classic Editor, Light admin color scheme

@Ate Up With Motor
8 months ago

Classic Editor, Midnight admin color scheme

@Ate Up With Motor
8 months ago

Classic Editor, Ocean admin color scheme

@Ate Up With Motor
8 months ago

Classic Editor, Sunrise admin color scheme

@Ate Up With Motor
8 months ago

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

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

@Ate Up With Motor
8 months ago

Revised screenshot of the Blue admin color scheme

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

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

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


8 months ago

#13 @joedolson
8 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
Note: See TracTickets for help on using tickets.