Color schemes: Add new high contrast color scheme option

[Joen]

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.

[Joen]

The new color scheme.

[Joen]

The new color scheme in the editor.

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

[SergeyBiryukov]

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

[Joen]

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.

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!

[youknowriad]

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

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

Created ​https://github.com/WordPress/wordpress-develop/pull/369 to replace this one.

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

[Joen]

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.

[Joen]

Link color updated to match

[Joen]

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

[youknowriad]

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

[afercia]

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.

[ibdz]

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]

Notifications.

[Joen]

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.

[shaunandrews]

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.

[youknowriad]

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.

[johnbillion]

@youknowriad Did this get an accessibility review?

[youknowriad]

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

[johnbillion]

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.

[johnbillion]

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

[youknowriad]

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

[afercia]

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

[ocean90]

In 48286:

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

See #50504.

[ocean90]

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

[Joen]

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

[youknowriad]

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

• Fixing link colors https://core.trac.wordpress.org/ticket/50536
• Fixing the buttons colors https://core.trac.wordpress.org/ticket/50537 (including the page title action)
• Fixing customizer colors https://core.trac.wordpress.org/ticket/50547

And for later:

• Fixing all issues at once using CSS variables https://core.trac.wordpress.org/ticket/49999

The first tickets above should probably be included in 5.5.

[desrosj]

In 48345:

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

See #50504, #50550.

[afercia]

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.

[johnjamesjacoby]

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 😁).

[johnbillion]

#51127

[SergeyBiryukov]

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.

[SergeyBiryukov]

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.