Colour

Principles

Colour contrast must be accessible.
Springer Nature is committed to meeting WCAG 2.1 level AA which requires 4.5:1 contrast for text. Use the colours provided to ensure sufficient contrast.

Don’t rely on colour to convey meaning.
For example, people who are colour blind will need extra information to know if an element is interactive. Using underlined text, icons and shapes alongside colour create a more usable interface.

Be consistent.
We use design tokens to define how or when to apply colours within the interface. Using tokens also ensures we think about the semantic meaning of colour usage.

Colour palettes

Our colour system applies a core palette globally, to create a cohesive user experience for all our brands. On top of this, we use accent colours specific to certain brands to highlight certain types of information.

Core colours

Our core colours are the most frequently used across the UI and help define a consistent experience for all our products and brands. They include colours for interaction states for buttons and links, typography, and icons.

Core colours also help enforce structure on a page such as navigation and primary content. Supportive colours can be used to highlight information.

Accent colours

Use accent colours to draw attention to information across an application such as a hero background. They are also used in illustrations, icons, and data visualisations. Only use these colours for the Nature brand.

Neutral colours

As well as text colours, we use an expanded set of neutral greys to visually distinguish sections and components. Greyscales work harmoniously alongside other colours without dominating the interface.

Status colours

Use status colours for giving feedback to the user, such as error validation in forms, and warning, success or information messages.

Applying colour

We use design tokens to define the role of each colour in the interface. Tokens are named based on the type of function they have, as well their placement and interaction state. We use tokens instead of hard coded values to support a consistent UI across our products.

Only use colours defined by the Elements Design System to ensure consistency across our products. If you’re thinking of contributing a new design that expands the colour palette, contact the elements team on Slack.

Don’t adjust the opacity of colours to create tints for interface elements. The only exception is for drop shadows or illustrations.

Backgrounds

Backgrounds are used for the surface layers of the UI such as pages, containers, tables, headers, footers and cards. All content such as text, buttons, forms and icons are on a background.

You can also use backgrounds to highlight important content to the user. However, use this sparingly on a single page to maintain the hierarchy.

Text

Text colours reinforce the content hierarchy for typography. Combined with text tokens, they indicate different states for text links and aid wayfinding.

Use primary and secondary text for different levels of importance within metadata. After the article title, author names are the most common way that users assess an article’s relevance.

Accents

The Nature brand has three colour accents to choose from. Combine these colours together will help to add depth for illustrations and graphic imagery.

Borders

Borders define the edges of components and help separate sections of content.

Combining backgrounds with borders to table rows makes data easier to scan.

Status

Only use status colours to provide feedback or inform the user of something. For example, use status-blue for general information such as showing a user when a product is in early development. Use status-orange to warn users of upcoming changes, such as changes to a publication.

Buttons

Buttons use colours from the core palette to show different states for primary and secondary style buttons.

Accessible combinations

People with low vision or colour blindness can find it difficult to read light text on a light background, or dark text on a dark background. Under level AA of the WCAG 2.1, text must have a contrast ratio of at least 4.5:1. Use the table below to see which combinations of colours achieve enough contrast.

Don’t use a colour combination that fails to meet a contrast ratio of at least 4.5:1. Use background colours with the correct colour tokens.

Types of colour vision

This image shows how accent colours may look like to people with different forms of colour blindness compared to full-colour vision.

• Deuteranopia (may confuse blue and purple) - affects about 5% of all males
• Protanopia (may confuse blue and purple) - affects about 2.5% of all males
• Tritanopia (unable to distinguish blue or yellow) - affects about 0.5% of all males
• Monochromacy

Don’t rely on colour as the only visual means of conveying information. Decrease reliance on colour by using icons, text labels and always making sure text links are underlined.

Resources

• Use the Sketch styleguide to apply the Elements colour palette in your designs.
• If you’re designing in Sketch, we recommend using the stark plugin.
• Install simulators such as Color Oracle or Chromatic Vision onto your device to simulate colour blindness in real time on your designs.
• Pa11y is a set of free and open source tools to help designers and developers make their web pages more accessible.