WordPress.org

Make WordPress Core

Opened 6 days ago

Closed 3 days ago

Last modified 26 hours ago

#50504 closed enhancement (fixed)

Color schemes: Add new high contrast color scheme option

Reported by: Joen Owned by: youknowriad
Milestone: 5.5 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-screenshots has-patch
Focuses: ui, accessibility, css, administration Cc:

Description

As the block editor is adding higher contrast colors, it both serves to show how the rest of the admin UI could benefit from a little contrast (notably menu items), but also that in reusing some of the same colors from the block editor, some added consistency is possible.

I'd like to suggest a new additional color scheme option that leverages a high luminosity blue color as the primary spot color, with white and almost-black for sidebar menu items.

Attachments (5)

scheme.png (1019.7 KB) - added by Joen 6 days ago.
The new color scheme.
editor.png (909.7 KB) - added by Joen 6 days ago.
The new color scheme in the editor.
link color.png (454.3 KB) - added by Joen 6 days ago.
Link color updated to match
notifications.png (54.7 KB) - added by Joen 3 days ago.
Notifications.
page-title-action.png (31.0 KB) - added by ocean90 27 hours ago.

Change History (35)

@Joen
6 days ago

The new color scheme.

@Joen
6 days ago

The new color scheme in the editor.

This ticket was mentioned in PR #368 on WordPress/wordpress-develop by jasmussen.


6 days ago

  • Keywords has-patch added

This PR adds a new color scheme option, which uses a high luminosity blue spot color, almost-black menu, and pure white for menu items. This helps increase contrast, and bring more consistency with some of the higher contrast colors used in the block editor.

Trac ticket: https://core.trac.wordpress.org/ticket/50504

This ticket was mentioned in Slack in #core-css by joen. View the logs.


6 days ago

#3 @SergeyBiryukov
6 days ago

  • Focuses ui accessibility css administration added

Related: #22104, #41286, #45910, #49999.

#4 @Joen
6 days ago

Thank you for the triage!

I wanted to note in relation to #22104, #41286 and #45910, that this scheme is meant to be higher contrast, but not "high contrast" in the spirit of what those ticket suggest. I still think there's a place for a separate VERY high contrast scheme that goes even beyond AAA. This scheme meets and exceeds AA, but does not reach AAA.

#5 @prbot
6 days ago

jasmussen commented on PR #368:

I would love to see a refreshed default theme, and I think this could be a fine foundation. Getting this in as optional can let it prove itself.

I noticed that the Pento-bot closed this PR, so I can either reopen, or fork and create a new PR. It also reminds me that we should remember to discuss on the trac ticket also — I'm a bit new to wordpress-develop!

#6 @youknowriad
6 days ago

(copying my comment from Github)

I left a small suggestion about the code change.

That said, I like these new colors personally and I'd love to see them explored.

This ticket was mentioned in PR #369 on WordPress/wordpress-develop by jasmussen.


6 days ago

Alternative to https://github.com/WordPress/wordpress-develop/pull/368.

This PR adds a new color scheme option, which uses a high luminosity blue spot color, almost-black menu, and pure white for menu items. This helps increase contrast, and bring more consistency with some of the higher contrast colors used in the block editor.

Note that this version of the PR addresses feedback in https://github.com/WordPress/wordpress-develop/pull/368#pullrequestreview-439046195, and omits styling of the block editor in favor of a separate block editor PR happening to handle that.

Trac ticket: https://core.trac.wordpress.org/ticket/50504

#9 @prbot
6 days ago

jasmussen commented on PR #369:

Created an addon PR in https://github.com/WordPress/gutenberg/pull/23558 to bring this out on the block editor side.

#10 @Joen
6 days ago

As an update, I created a new PR to add the color scheme, which addresses feedback by Riad above: https://github.com/WordPress/wordpress-develop/pull/369

That PR should be paired with this PR for the block editor, which lets the color scheme apply there: https://github.com/WordPress/gutenberg/pull/23558

In #49999, future efforts to bring the color scheme work into the WordPress package itself are being discussed. I'll definitely help there.

In the mean time, the two PRs above are very small and brings a welcome bit of consistency and contrast to WordPress and the block editor. Would very much appreciate your thoughts, and would love for this to land with 5.5.

Last edited 6 days ago by SergeyBiryukov (previous) (diff)

@Joen
6 days ago

Link color updated to match

#11 @Joen
6 days ago

Right above is a screenshot of the updated link color, which now matches the highlight color. This expands the color consistency and benefits the contrast there (5.61:1 vs 5.2:1).

#12 follow-up: @youknowriad
4 days ago

  • Milestone changed from Awaiting Review to 5.5

Let's consider this for 5.5, it seems ready.

#13 @youknowriad
4 days ago

  • Keywords needs-design-feedback added

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


4 days ago

#15 in reply to: ↑ 12 @afercia
4 days ago

Replying to youknowriad:

Let's consider this for 5.5, it seems ready.

This needs an accessibility review. Worth noting the accessibility team was unaware of the progress on this ticket nor that it was milestoned for 5.5, as the accessibility focus has been added to the ticket only 2 days ago.

#16 @johnbillion
4 days ago

  • Version trunk deleted

#17 @ibdz
4 days ago

I'm checking the salmon red color contrast against wp-admin screen (#f1f1f1) background and it fails all AA/AAA (2.77). But white text on salmon red background pass only AA Large (3.13).

@Joen
3 days ago

Notifications.

#18 @Joen
3 days ago

Thank you @ibdz, I don't know why I missed that. I've updated that color to be the same pthalo blue used elsewhere. Less, but better.

#19 @shaunandrews
3 days ago

This was discussed in the weekly design meeting with a generally positive response. Adding this as a new, optional color scheme would be great for 5.5.

#20 @youknowriad
3 days ago

  • Owner set to youknowriad
  • Resolution set to fixed
  • Status changed from new to closed

In 48277:

Color schemes: Add new modern color scheme option.

This PR adds a new color scheme option, which uses a high luminosity blue spot color, almost-black menu, and pure white for menu items.
This helps increase contrast, and bring more consistency with some of the higher contrast colors used in the block editor.

Props joen, ibdz, shaunandrews.
Fixes #50504.

#21 @johnbillion
3 days ago

  • Type changed from feature request to enhancement

@youknowriad Did this get an accessibility review?

#22 @youknowriad
3 days ago

@johnbillion Yes, the design meeting from yesterday https://wordpress.slack.com/archives/C02S78ZAL/p1593629194193300

#23 @johnbillion
3 days ago

Thanks, not sure why that wasn't logged here on Trac. I think maybe because the ticket URL was posted in the chat instead of the ticket number.

#24 @johnbillion
3 days ago

Actually maybe it was just due the rate limiting of Slack mentions on tickets. Other chats that mention a complete URL get logged ok.

#25 @youknowriad
3 days ago

yeah, also the core <=> slack integration seems to be having issues lately (see the latest created tickets on the core channel).

#26 @afercia
3 days ago

  • Keywords needs-design-feedback removed

@johnbillion thanks for considering a11y. We briefly discussed this new color scheme during last accessibility team meeting and we don't see it as something that actually solves accessibility issues.

In other words: No strong objections to add this new color scheme, as long as it is not communicated as an "accessible color scheme", which it isn't.

We could argue on the need of adding a new color scheme, as I'm not fully sure there's a real need for it. Also, if I remember correctly, the core CSS team has plans for new color schemes that should be implemented using CSS variables, while this new scheme goes in another direction and uses the old .scss approach 🤷🏻‍♂️

Aside: removing the needs-design-feedback keyword, as I see feedback has been given and this is already merged.

#27 @ocean90
2 days ago

In 48286:

Build tools: After [48277], ignore CSS files in src/wp-admin/css/colors/modern when building WordPress to src.

See #50504.

#28 @ocean90
27 hours ago

@Joen Should page title actions use the same color as links? See screenshot above.

#29 @Joen
27 hours ago

They should, yes, but I believe Riad has addressed that in a separate patch, which addresses it for all schemes.

#30 @youknowriad
26 hours ago

Yes, I noticed that there are some bugs in all themes and I'm solving them in a few different ways:

And for later:

The first tickets above should probably be included in 5.5.

Note: See TracTickets for help on using tickets.