Create a standardized color palette

[atimmer]

In https://github.com/Yoast/wordpress-seo/issues/5759 we have discussed creating a standardized color palette. We should put this in the yoast-components repository per https://github.com/Yoast/wordpress-seo/issues/5759#issuecomment-251087546.

I think we should create a style-guide folder in which we put everything regarding the style guide. So maybe a README.md discussing the actual style guide and both a colors.scss and a colors.json.

cc @Mijke, @afercia

[afercia]

Thanks @atimmer. From an a11y perspective the only important colors are the ones used for background/foreground of text and UI controls. Other parts of an UI that are just "decorative" can basically use any color. Thinking the best approach would be splitting the "accessible colors" from the other ones. Ideally, this group should contain pairs of background/foreground colors that have at least a color contrast ratio of 4.5:1 which is the threshold established by the WCAG for the AA level. Worth noting bigger/bold text can have a lower contrast but I'd recommend to don't enter in something that would force us to calculate the font-size each time.

Long story short, there are tools to calculate the ratio. I often use this online tool by Joe Dolson: https://www.joedolson.com/tools/color-contrast.php and there are other ones too of course. To recap, we should look at:

• text, including custom controls such as buttons etc.
• UI controls that are icon-only, meaning icons without any text

One color to start with could be the green used in some places, for example in the licenses screen:

We could standardize on just one darker background green.

Looking at the CSSStats summary posted on https://github.com/Yoast/wordpress-seo/issues/5759 there are also some colors that could be unified in just one, for example some of the shades of grey and red. Any thoughts welcome!

[atimmer]

The colors that are currently used in the code are as follows:

yoast-components, YoastSEO.js:

$color_bad: #dc3232;
$color_ok: #ee7c1b;
$color_good: #7ad03a;

$color_caret: #555555;
$color_caret_hover: #bfbfbf;
$color_caret_focus: #1074a8;

$color_border: #f7f7f7;

$color_input_border: #bfbfbf;
$color_input_border_focus: #1074a8;

$color_progress_background: #f7f7f7;

$color_button: #f7f7f7;
$color_button_border: #dbdbdb;

$color_headings: #555555;
$color_buttons: #555555;

$color_marker_inactive: #555555;
$color_marker_active: #ffffff;
$color_marker_disabled: #e6e6e6;

yoast.com:

// Color Palet
$color-white:                   #FFF;
$color-black:                   #000;
$color-grey:                    #DCDCDC;

$color-purple:                  #5D237A;
$color-purple-dark:             #6C2548;
$color-pink-dark:               #A4286A;
$color-pink-light:              #D93F69;
$color-blue:                    #0075B3;
$color-blue-dark:               #084A67;
$color-green-blue:              #009288;
$color-green:                   #77B227;
$color-orange:                  #DC5C04;

$color-shadow-purple:           #5D237A;
$color-shadow-pink-dark:        #A4286A;
$color-shadow-pink-light:       #D93F69;
$color-shadow-blue:             #0075B3;
$color-shadow-green-blue:       #009288;
$color-shadow-green:            #77B227;
$color-shadow-orange:           #DC5C04;

$color-error:                   #E23132;

// Button hovers
$color-orange-hover:                #F58223;
$color-grey-hover:                  #CDCDCD;

$color-pink:                        #D93F69;
$color-pink-hover:                  darken( $color-pink, 5% );

// Color schemes
$scheme-home-primary:               $color-pink-light;
$scheme-home-secondary:             $color-pink-dark;
$scheme-home-tertiary:              $color-purple;
$scheme-home-menu-primary:          $color-pink-dark;
$scheme-home-menu-secondary:        $color-pink-light;

$scheme-academy-primary:            $color-purple;
$scheme-academy-secondary:          $color-pink-dark;
$scheme-academy-tertiary:           $color-pink-light;
$scheme-academy-menu-primary:       $color-pink-dark;
$scheme-academy-menu-secondary:     $color-purple;

$scheme-software-primary:           $color-blue;
$scheme-software-secondary:         $color-green-blue;
$scheme-software-tertiary:          $color-green;
$scheme-software-menu-primary:      $color-green-blue;
$scheme-software-menu-secondary:    $color-blue;

$scheme-review-primary:             $color-green-blue;
$scheme-review-secondary:           $color-green;
$scheme-review-tertiary:            $color-blue;
$scheme-review-menu-primary:        $color-green-blue;
$scheme-review-menu-secondary:      $color-green;

$scheme-about-primary:              $color-pink-light;
$scheme-about-secondary:            $color-pink-dark;
$scheme-about-tertiary:             $color-purple;
$scheme-about-menu-primary:         $color-pink-dark;
$scheme-about-menu-secondary:       $color-pink-light;

$color-grey-cta:                #DCDCDC;
$color-grey-line:               #E6E6E6;
$color-grey-quote:              #8C8C8C;
$color-grey-text:               #646464;

[moorscode]

I have discussed this issue with Joost and came to the conclusion that we like @afercia to suggest the colours which are meeting the requirements.

This needs to be a "company wide" colour revision, which also touches the colours used in the Yoast Theme as well.

When the colours have been determined, we will run it through design and maybe tweak to bring them together in a brand-wide colour-scheme.

Please coordinate with @diedexx for the suggested changes, because he has normalized the styling of the Yoast public theme in a separate branch (which needs revision) see https://github.com/Yoast/Yoast-theme-public/pull/43 The modified colours should be implemented in there, or after the merge of the PR.

[afercia]

Spent some time trying to grab all the colors used in Yoast SEO, as we need a point where to start and a picture of the current situation. Not pretending this is a 100% accurate list of all the colors. Worth noting the list includes colors from yoast.com since now its stylesheet is included in the plugin. This helped me a bit to think at a possible plan. See below:

See also the full resolution image.

It's perfectly understandable that in a large project, year after year, the amount of colors used can increase. There are several colors that are just slightly different and could be standardized. For example, all the shades of grey. Or the blue: how many blue do we need? Is the difference between #0075b3 and #0073aa actually perceivable?

@diedexx I'd greatly appreciate your feedback, I've just tried to prepare a draft of a possible plan and please feel free to integrate or comment the points below:

Preparatory steps:

1 replace named colors with equivalent hex values, establish a convention (a coding standard rule would be great) that named colors should never be used

2 remove unused colors for example, is the green for #donate.yoastbox and #sitereview.yoastbox still used? this could be a long and tedious process, since every color should be checked manually

3 reduce the amount of similar colors, trying to standardize on the yoast.com ones and the official WP palette: http://codepen.io/hugobaeta/full/RNOzoV/ need to take into account some colors need a variant, for example for :hover and the variant color should increase color examples: WP links: bad because the color lightens on :hover KB Search: good because the purple darkens on :hover

Following steps:

1 determine which base colors are used for text for example: on WP the base text color is #444 and on yoast.com is #000

2 determine other colors used for text for example: white, purple, red, etc.

3 determine the background colors that can be used with text (see above) in order to have a color contrast ratio of at least 4.5:1

4 determine colors that are just for decorative elements (no contrast ratio required)

5 move all the colors to Sass

6 consider to organize the Sass colors in a smart way need to indicate which color pairs are safe to use

Note: some of the colors come from external components (e.g. material-ui)

[afercia]

I've completed a first (manual, tedious) review of the colors to check where and if they're actually used. Turns out many of these colors come from the toggle switch bundled "themes". Not sure if the toggle switch bundled stylesheet is really necessary, wondering if it can be removed. Needs some investigation.

Many other colors have just 2-3 occurrences or even just one. I'd definitely consider to change them in order to reduce the number of rarely used color variants.

[afercia]

One more group of colours that should not be imported is the one related to the .overallScore svg fill colors, as far as I see they're related to the standalone big traffic light. Ideally, they should go in a separate file used only for the standalone examples, unless I'm missing something.

[afercia]

Note: on the yoast.com I see some colors that are not present in the list above. For example:

#e6660e #c34300 (orange buttons gradient hardcoded in _buttons.scss)

and probably there are more hardcoded ones, rgba shadows for example.

[afercia]

Looking back at #93 that PR added 5 colors that shouldn't be part of the default palette. They're specific to WordPress (links default/hover/focus styles) while, ideally, the components should be "platform-agnostic".

On the other hand, components may have the need to adapt some styling to the platform where they're going to be used. Not just for colors, but also for other things like for example type faces. Thinking to add a _platform.scss file for this purpose, feedback and any thoughts welcome :)

Edit: maybe such a file shouldn't be part of the components package at all. Instead, should be part of the integration in the platform?

[afercia]

Pondered a lot the rgba colors issue and came to the conclusion they shouldn't be part of the color palette. Due to the great variety of different rgba colors and transparency values used, especially on Yoast SEO, I think the best option is make use of the rgba() function and generate the colors in the various locations where they're actually used.

This would also help consistency and keeping the colors palette to a limited number of colors, as any rgba should be generated based on a palette color, e.g.: rgba( $color_black, .15 )

[afercia]

General guidelines:

• this is an ongoing effort to standardize colors and reduce their number; currently, the palette is made of just 24 colors
• new colors can be added of course, try to limit their number and carefully evaluate if they're really needed; if they're used just once or twice, they're probably not needed
• all palette colors variables are prefixed with $palette_
• do not use $palette_* variables directly, instead map them to other color variables with prefix $color_ and use these in the various locations
• renamed all the variables to use underscores _ instead of hyphens -; note that in Sass variable names (and all other Sass identifiers) can use hyphens and underscores interchangeably see http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variables_
• prefer underscores anyways
• do not use rgba colors in the palette, instead use the rgba() function on specific locations
• platform specific colors (e.g. WordPress focus style) shouldn't be part of the palette or hardcoded in reusable components

Notes and todo:

• there was the effort to remove all the hardcoded colors in the stylesheets, PHP, and JS files; some colors may have been missed and, if this it's the case, they should be replaced with variables in future iterations
• consider to lighten a bit #646464: this should be the lightest, accessible, grey against white (see snippet preview caret arrows)
• check pink colors when using them in other projects, since they were renamed
• start considering the best way to import and use the colors palette in other projects

Removed/replaced colors:

$color_border: #f7f7f7;                 renamed in $color_border_light: #f7f7f7;
$color_buttons: #555555;                replaced with $color_button_text: #555;
$color_caret: #555555;                  removed and replaced with $color_grey_dark: #555;
$color_caret_focus: #1074a8;            removed and replaced with #$color_blue: #0075b3;
$color_caret_hover: #bfbfbf;            removed and replaced with $color_grey_text: #646464;
$color_input_border_focus: #1074a8;     removed, the platform should take care of focus styles
$color_progress_background: #f7f7f7;    removed and replaced with $color_background_light: #f7f7f7;
$color-shadow-*                         removed all, they were duplicating the base colors; use the base colors instead.

Changed colors:

$color_border: #f7f7f7;                 mapped to $palette_grey_medium #ccc;
$color_button_border: #dbdbdb;          mapped to $palette_grey_medium: #ccc;
$color-error: #E23132;                  changed in $color_error > $palette_red: #dc3232;
$color-grey: #DCDCDC;                   changed in $color_grey: #ddd;
$color-grey-cta: #DCDCDC;               mapped to $palette_grey: #ddd;
$color-grey-hover: #CDCDCD;             changed in $color_grey_hover: darken( $palette_grey, 6% );
$color-grey-line: #E6E6E6;              mapped to $palette_grey: #ddd;
$color-grey-quote: #8C8C8C;             mapped to $palette_grey_text: #646464;
$color-grey-text: #646464;              mapped to $palette_grey_text: #646464;
$color_input_border: #bfbfbf;           mapped to $palette_grey: #ddd;
$color_marker_disabled: #e6e6e6;        mapped to $palette_grey_disabled: #a0a5aa;
$color-orange-hover: #F58223;           changed in $color_orange_hover: darken( $palette_orange, 5% );
$color-pink: #D93F69;                   changed in $color_pink: #d73763;
$color-pink-light: #D93F69;             changed in $color_pink_light: #e1bee7;

New colors:

$palette_green_medium:      #008a00;
$palette_grey:              #ddd;
$palette_grey_disabled:     #a0a5aa; // Should be used only for disabled controls text.
$palette_grey_light:        #f1f1f1;
$palette_grey_medium:       #ccc;
$palette_grey_medium_dark:  #888;
$palette_pink_light:        #e1bee7;

Snippet preview colors:

(see https://github.com/Yoast/wordpress-seo/issues/6042)

$color_google_title:     #1a0dab; // was #1e0fbe
$color_google_url:       #006621;
$color_google_date:      #808080;
$color_google_desc:      #545454; // was #333
$color_google_desc_bold: #6a6a6a;