@ecl/generic-style-color v1.3.0

Colour

Background colour

White was chosen as the background colour of the website due to colour contrast and readability reasons.

Since one of the primary colours used throughout the website is the EC Yellow (#ffd617) depicted on the Primary colours section below, using a shade of grey or a tint of any other colour would greatly reduce the visual contrast between this colour and the background colour.

Primary colours

The primary colours: blue, yellow and grey.

Only use colours to highlight important content or actions. Use sparingly.

Blue

Blue is commonly associated with trust, confidence, and sincerity; it is also used to represent calmness and responsibility.

Yellow

Yellow is commonly associated with joy, happiness, intellect, and energy.

Yellow is the most luminous of all the colours of the spectrum and is very effective for grabbing attention.

Yellow reinforces attention and allows us to guide our users through the interface.

Greys

Grey and black can appear neutral, objective or impartial.

Colour palettes

Notification colours

Colour contrast

Text should always be presented in black or "EC blue" over a white background.

The only exception to this rule are is the Page header, some Buttons styles and some Listings components.

WCAG (Web Content Accessibility Guidelines) ensure that content is accessible by everyone, regardless of disability or user device. To meet WCAG standards, text and interactive elements should have a colour contrast ratio of at least WCAG 2 AA Compliant (18pt+). This ensures that viewers who cannot see the full colour spectrum are able to read the text. The options below offer colour palette combinations that fall within the range of Section 508 compliant foreground/background colour contrast ratios. To ensure that text remains accessible, use only these permitted colour combinations.

There are a number of online colour contrast checkers that should be used to validate designs before they are published.