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