Colour

Colour is important in perception and understanding of a product. The Nordea blue digital palette derives from the Nordea brand palette. Blue hues are at the centre of the Nordea colour palette, complemented with accent colours and neutral grays.

Our data visualisations and insights palette are for insights, graphs and analytical purposes. They are composed of a more vivid colour scheme to ensure they are coherent when used in stroke formats

Clear purpose

Nordea blue digital palette

Blues, secondary grays and special accent colours make up the Nordea colour palette.

• Use blue colours for navigational and interactive elements
• Use grayscale colours for text
• Use accent colours to communicate special states such as alerts and errors

Data visualisation and insights 

• Use the 5 primary colours before adding in secondary where possible
• For insight categorisation use the corresponding colour assigned to in Expenses categories ( see Figma file)

Accessible

At Nordea, we aim to meet the AA grade compliance of Web Content Accessibility Guidelines (WCAG) 2.1.

• All colour combinations must provide enough contrast¹. Some users with such visual impairments as colour blindness may perceive colour combinations differently²
• Use colours from the Light theme colour palette when designing for the default colour mode
• Use colours from the Dark mode colour palette when designing for Dark mode
• For data visualisation and insights – you the first 5 primary colours (Vivid blue, Blau, Rose, Apricot, Dark mint) to ensure clear contrast within graphs, charts etc. If needed secondary colours can then be used

We also have a table in which our nordea blue digital palette has been checked for contrast against each colour and their ratings given in compliance to WCAG 2.1 guidelines. Go to the Foundation library figma file to check

Familiar

The colour palette of our digital services reinforces the Nordea brand.

Nordea Design System supports two colour modes.

• Light theme is the default colour palette
• Dark mode is the secondary  colour palette. It reduces power usage of devices and increase visibility of content in low-light environments

Besides typography and layout, colours can create a sense of hierarchy within a page. Application of high-contrast colour combinations ensures legibility of content.

Nordea blues and deep blues provide a sense of familiarity. They also highlight interactive elements against a grayscale background. Reds, yellows, greens and lighter blues communicate system statuses (such as error or success states).

Informational accent

Use light blue colours to highlight tips and informational content.

Critical error accent

Use red colours to communicate critical errors that require user atterntion.

Warning accent

Use yellow colours to display service errors, authentication errors and warnings.

Follow these guidelines when applyin colour in your design:

• Validation errors
• Confirmation principles

1. WCAG 2.1: 1.4.3 Contrast (Minimum)
2. What is Color Blindness? Colblindor