Color palette

[ckrina]

@todo convert this issue into a clean up issue to check all instances of the old colors have been removed/replaced.

Problem/Motivation

Recent interviews and research exposed pain points around Drupal's admin experience of looking and feeling dated, especially compared to our competitors, and universally cited that choosing a more modern-looking admin theme instantly led to Drupal being better-perceived by said users.
There was an amazing community effort to Create a Style Guide For Seven that vastly improved its look + feel compared to the original, but Design best practices and Drupal functionality have moved on since then.

Proposed resolution

Implement new colors to update the palette used and create a favorable first impression of Drupal for evaluators and a better user experience for site authors. No functional differences.

Remaining tasks

@todo

User interface changes

All color styles will be changed, no functional differences.

Test Pages

@todo

[fuzzbomb]

Rather than just having a list of colours, for assessing contrast we need to know where the colours will be used in combination. As in, foreground and background combinations.

[fuzzbomb]

There are a lot of different grey shades here - what's the need for those?

[fuzzbomb]

There are two separate palettes on the Figma document.
One is called "palette - color story" and the other one is called "color palette - color palette".
What's the difference? Can we combine them into one please, to avoid maintaining colours in two places.

[fuzzbomb]

The error red isn't sufficient contrast.

The colour palette has #ee2222 red on white at contrast 1:4.3, and the palette indicates this is intended for large text. Sure enough, WCAG has this compromise range, where large text is allowed contrast as low as 3:1.

The trouble with this is that the error messages in the text fields example are small text.
The "tertiary danger button" also uses this red, but it's just regular text size.

I'd like to avoid using colours which are in the 3:1 "large text" compromise range of colour contrast. Once a colour is in the palette, there's a risk it will be used for something else, on the assumption that it satisfies WCAG and has a11y sign-off. But I often see this happen where a colour which only qualifies for large text ends up getting re-used for small text.

It should be easy to get this red colour comfortably over the 1:4.5 threshold.

New Drupal Blue, at 6.5:1 on white, is a good pass for WCAG level AA "1.4.3 Contrast (minimum)". It's tantalizingly close to the 7:1 threshold to satisfy WCAG level AAA "1.4.6 Contrast (enhanced)".

It would be great if we can get some text colours over the 7:1 threshold for level AAA, but that isn't a requirement for Drupal's accessiblity QA gate. What I'm thinking is, if we get all the static text colours over the level AAA threshold (e.g. links in their resting state, without focus/hover/active) that would give us plenty of leeway to get brighter colours for the interactive states (hover) so these pass at level AA.

[fuzzbomb]

I like the black text on yellow for warning. A very "construction site" feel. And it's hard to get a yellow that has good contrast with white text, but easy with black.

[fuzzbomb]

The green #06a77d is another colour in the compromise 3:1 range for large text only. I'd like to have a green which exceeds 4.5:1 against white, for the same reasons I gave for red.

Example: two of the text boxes ("This is the value with feedback", and surname "this is the value") have a green tick in the box, same size as the text. This probably counts as a WCAG failure, as the green only has contrast for large text.

[madsciencepro]

Is Drupal Blue set in stone or are we able to change it up as well?

[fuzzbomb]

Looking at the fieldsets on Figma, I'm not sure they'll pass WCAG 2.1 "Non-text contrast". There needs to be 3:1 contrast for "essential" borders of UI components. I'm not 100% clear about this, but I think fieldsets count as essential for this new criterion.

The fieldsets are using the secondary greys as borders and drop shadows, but some of those secondary greys have less than 3:1 contrast against white.

[fuzzbomb]

I don't think anything's set in stone yet - we're still at a very early stage.

The palette says New Drupal Blue is intended for use as links. It would be great to get that over the level AAA 7:1

[fuzzbomb]

For little colour tweaks, like getting the red over the 4.5:1 threshold, I like a tool called Tanaguru Contrast Finder. You stick a failing colour combination in, and get suggestions back which get you over the threshold, but are close as possible to the original colours. It's very useful for fixing WCAG failures on websites that have already gone live.

Here, I've prepared a link which has the #06a77d green on white...

http://contrast-finder.tanaguru.com/result.html?foreground=%2306a77d&background=%23ffffff&ratio=4.5&isBackgroundTested=false&algo=Rgb&distanceSort=asc

[ckrina]

Thanks @fuzzbomb ! We're handling this feedback in Figma. Most of your feedback have been addressed, but the green one is a bit blocked because the greens with good contrast on white are too dark for background and we'll need to try another solution.
I'll close this issue to try to handle Accessibility issues in Figma, Slack or on its own issue because this one doesn't need any commit. Also added a followup: #32

[fuzzbomb]

Most of your feedback have been addressed

@ckrina Where can I see this?