Higher contrast UI - WordPress Backport

Some time ago, WordPress introduced updated UI colors - increasing contrast to make UI more accessible.

You might not like the color changes, but these are important accessibility improvements.

ClassicPress has the advantage of a more accessible editor, but it is lagging a bit behind accessibility improvements made by WordPress. So I’d like to work on backporting accessibility improvements from WP to catch us up with them.

If anyone has a good reason not to include these changes, please do share. Not liking it is not a good reason :grin:

2 Likes

So you’re talking about this changeset? Changeset 46344 – WordPress Trac

I think that’s one of them, related to buttons. There’s more than one changeset. I haven’t spent the time looking for all changesets yet, in case there is a pushback on backporting this.

The blog post links several tickets and their changesets:

  1. https://core.trac.wordpress.org/ticket/47153

  2. https://core.trac.wordpress.org/ticket/47150

  3. https://core.trac.wordpress.org/ticket/34904

I think that’s it as far as I can tell for “high contrast” changes.

There was some discussion from JJJ, who said it is difficult for a plugin developer to maintain consistency across versions, if they happen to add something in the admin that uses colors. I think his example was for event calendars.

The work they are doing is coming in stages: there was some a11y changes, then they did the color palette consolidation, and are still working on making the whole thing use CSS custom properties.

I was interested in getting the custom properties, but I don’t like the approach they are using. I think the colors should be consolidated even more, and use different properties like background gradients and box shadows with semi-transparent black and white to indicate state (disabled, active, focus, hover) instead of specifying a different color.

There is an audit report that we can use, to check how many colors (and other things) are used. There’s a link to the repo at the top: CSS Audit for wp-admin

I was hoping to make color changes to the admin, to distinguish CP from WP, but I suppose changing various shades of gray to make more contrast is a good thing, regardless.

Thanks for this.

Do you know the ticket(s) for this? Would like to see what they’re doing.

Do you have an example I can take a look? Just so I can visualize what you’re referring to.


@james @wadestriebel can we fork CSS Audit for wp-admin as an official repo and set it up to generate a report? If I’m not mistaken, the configs are managed in YML file. So it shouldn’t be difficult to modify for CP.

They changed this ticket to epic. https://core.trac.wordpress.org/ticket/49999#comment:109
JJJ commented here: https://core.trac.wordpress.org/ticket/49999#comment:113
Dev note mentioned here: https://core.trac.wordpress.org/ticket/49999#comment:122

Not for the admin. But I do this sort of thing in my theme where the user chooses colors and the built-in styles use semi-transparent black and white to contrast and black/white text-shadow to make sure text on images is legible.

1 Like

:+1:

Yes, this sounds good.