WordPress.org

Make WordPress Core

Opened 15 months ago

Closed 15 months ago

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

Change History (42)

@Joen
15 months ago

The new color scheme.

@Joen
15 months ago

The new color scheme in the editor.

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


15 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.


15 months ago

#3 @SergeyBiryukov
15 months ago

  • Focuses ui accessibility css administration added

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

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


15 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
15 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
15 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 https://core.trac.wordpress.org/ticket/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.

Version 0, edited 15 months ago by Joen (next)

@Joen
15 months ago

Link color updated to match

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

  • Milestone changed from Awaiting Review to 5.5

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

#13 @youknowriad
15 months ago

  • Keywords needs-design-feedback added

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


15 months ago

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

  • Version trunk deleted

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

Notifications.

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

  • Type changed from feature request to enhancement

@youknowriad Did this get an accessibility review?

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

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

#29 @Joen
15 months ago

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

#30 @youknowriad
15 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
15 months ago

In 48345:

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

See #50504, #50550.

#32 @afercia
15 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.


14 months ago

#34 @johnjamesjacoby
13 months 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
13 months 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
13 months 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.