Color Palette

[MelSumner]

Goal: Design an accessible, aesthetically pleasing color palette for the website.

Acceptance Criteria:

• [ ] Ember orange (E04E39) as the primary color
• [ ] White (#fdfdfd) & Black (#212121)
• [ ] Must pass color contrast tests (use https://webaim.org/resources/contrastchecker/ or similar)
• [ ] no arbitrarily named colors should be used
• [ ] naming convention must be consistent. For example:

$orange: #e04e39;
$orange-darker: darken($orange, 10);
$orange-darkest: darken($orange, 20);
$orange-lighter: lighten($orange, 10);
$orange-lightest: lighten($orange, 40);

To submit a palette for consideration:

• [ ] submit a PR that adds a _colors.scss file to ~~the source/stylesheets/base/ folder~~ https://github.com/ember-learn/ember-styleguide so we can test how these could work.

Screenshot:

[kennethlarsen]

Is the aim to pass WCAG AA or WCAG AAA in terms of color contrast?

[MelSumner]

@kennethlarsen AA

[amyrlam]

Let's put this improvement in https://github.com/ember-learn/ember-styleguide instead, per the conversation on https://github.com/emberjs/website/pull/3613. I updated the issue summary above.

Thanks @ctcpip for getting this started! 😄

[milandimun]

Hi @MelSumner is it still open ? I could work on this.