WordPress.org

Make WordPress Core

Opened 3 months ago

Closed 3 months ago

Last modified 5 weeks 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 3 months ago.
The new color scheme.
editor.png (909.7 KB) - added by Joen 3 months ago.
The new color scheme in the editor.
link color.png (454.3 KB) - added by Joen 3 months ago.
Link color updated to match
notifications.png (54.7 KB) - added by Joen 3 months ago.
Notifications.
page-title-action.png (31.0 KB) - added by ocean90 3 months ago.

Change History (42)

@Joen
3 months ago

The new color scheme.

@Joen
3 months ago

The new color scheme in the editor.

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


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


3 months ago

#3 @SergeyBiryukov
3 months ago

  • Focuses ui accessibility css administration added

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

#4 @Joen
3 months 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
3 months 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
3 months 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.


3 months 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
3 months 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
3 months 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 3 months ago by SergeyBiryukov (previous) (diff)

@Joen
3 months ago

Link color updated to match

#11 @Joen
3 months 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
3 months ago

  • Milestone changed from Awaiting Review to 5.5

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

#13 @youknowriad
3 months ago

  • Keywords needs-design-feedback added

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


3 months ago

#15 in reply to: ↑ 12 @afercia
3 months 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
3 months ago

  • Version trunk deleted

#17 @ibdz
3 months 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 months ago

Notifications.

#18 @Joen
3 months 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 months 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 months 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 months ago

  • Type changed from feature request to enhancement

@youknowriad Did this get an accessibility review?

#23 @johnbillion
3 months 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 months 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 months 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 months 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
3 months 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
3 months ago

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

#29 @Joen
3 months ago

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

#30 @youknowriad
3 months 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.

#31 @desrosj
3 months ago

In 48345:

Coding Standards: Correct two coding standards issues introduced in [48277] and [48334].

See #50504, #50550.

#32 @afercia
3 months ago

Why this new color scheme alters the bottom padding of the admin menu items?

The admin color schemes are color schemes: they should change only the colors. If a change to the items padding is desired and beneficial then I'd argue it should be considered for the the default admin CSS.

Also, I couldn't find any mention of the padding change, not even in the GitHub PR. Unless I missed something.

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


2 months ago

#34 @johnjamesjacoby
5 weeks ago

Why this new color scheme alters the bottom padding of the admin menu items?

I'll second this question. I think @afercia is correct that schemes need to stay as colors-only to maintain the integrity of the feature. Other style changes (font size, padding, new icons, etc...) should be their own features.

In addition, in the future, I think new color schemes deserve developer notes. I have a few plugins that add support for all core & bbPress color schemes, and without a note I didn't know this color scheme was added, which means my plugins won't get support until I happen to intersect with it manually (which is how I found this ticket today 😁).

#36 @SergeyBiryukov
5 weeks ago

In 48862:

Administration: Remove non-color related styling from Modern color scheme.

Color schemes should only affect colors, to avoid diverging from a consistent and predictable layout, especially if core CSS rules subsequently change.

Follow-up to [48277], [48286], [48345].

Props Joen, johnbillion, afercia, johnjamesjacoby.
Fixes #51127. See #50504.

#37 @SergeyBiryukov
5 weeks ago

In 48863:

Administration: Remove non-color related styling from Modern color scheme.

Color schemes should only affect colors, to avoid diverging from a consistent and predictable layout, especially if core CSS rules subsequently change.

Follow-up to [48277], [48286], [48345].

Props Joen, johnbillion, afercia, johnjamesjacoby.
Merges [48862] to the 5.5 branch.
Fixes #51127. See #50504.

Note: See TracTickets for help on using tickets.