Foundations
Colours
Colours help express brand identity and convey meaning to users.
Overview
NewsKit lets you use bespoke colour palettes while encouraging accessibility.
The design system applies colours through well-defined rules at both the theme and component level. These rules help establish a visual tone, indicate interaction and communicate meaning - while maintaining your brand identity.
Palette colours
Palette colours represent your brand’s colours.
They’re linked to contextual colour tokens, which apply specific meaning (context).
Consider whether a palette colour is best applied directly to an interface or as a contextual colour.
Swatches
Use the swatches below to determine the accessibility of the palette colour in contrast to the background colour of this page:
Regular sized text on this colour will have a contrast ratio of 4.5:1 or over
Regular sized text on this colour will have a contrast ratio of 3:1 or over
Regular sized text on this colour will be inaccessible
The WCAG AA standards define regular and large text sizes as:
Regular
Font size is at least 19px with a regular font weight or heavier.
Large
Font size is at least 19px with a bold font weight or 24px with regular font weight.
Contextual colours
Select contextual colours from the palette colours and apply specific functions or purposes. There are three categories of contextual colours: ink, interface and interactive.
Ink
Apply ink colours to typography and iconography. There are several variations, each with a specific purpose:
Use ‘common’ ink tokens to style most generic text and icons, including headlines, subheadlines and body text.
| Colour | Colour token | Token value | Common uses |
|---|
Interface
Apply interface colours to fills and borders on often-static background UI elements, including page backgrounds and dividers.
Use ‘common’ interface tokens to style most structural, often static, component layers within a design, including card and page backgrounds.
| Colour | Colour token | Token value | Common uses |
|---|
Interactive
Apply interactive colours to indicate and display interactions of components. This includes components such as buttons, links and switches.
‘Primary’ Interactive tokens are usually used to style the most prominent interactive elements. This includes common components such as buttons & inputs.
| Colour | Colour token | Token value | Common uses |
|---|
Colour can be applied to a UI element using the color, iconColor borderColor, placeholderColor and background attribute on a style preset.
Code example
1backgroundColor: '{{colors.inkBase}}';
2backgroundColor: '{{colors.inkNegative}}';
3backgroundColor: '{{colors.inkBrand010}}';
4backgroundColor: '{{colors.interfaceBackground}}';
5backgroundColor: '{{colors.interfaceInformative010}}';
6backgroundColor: '{{colors.interactivePrimary010}}';
7backgroundColor: '{{colors.interactivePrimary010}}';
8backgroundColor: '{{colors.interactiveSecondary010}}';
9backgroundColor: '{{colors.interactiveNegative010}}';
10backgroundColor: '{{colors.interactiveInput010}}';
11backgroundColor: '{{colors.interactiveVisited010}}';Accessibility
Choose your contextual colours carefully so important UI elements like text and icons are legible without compromising your aesthetic.
Avoid yellow and orange for notices or warnings. Pairing these colours with white text does not allow for sufficient contrast. Aim for contrast ratios that meet WCAG AA standards.
Contrast for text and images of text
Standard text and images of text must have a minimum contrast of 4.5:1 between text colour and background, except for:
Large text
Large-scale text, and images of large-scale text, must have a minimum contrast of 3:1 between text colour and background.
Link text
Link text must have a minimum contrast of 3:1 between link text colour and the surrounding non-link text colour. Link text within body text (inline link) should be underlined.
Incidental text
Text, and images of text, that are part of an inactive component, purely decorative or part of a picture containing significant other visual content don’t have contrast requirements.
Logotypes
Text that’s part of a logo doesn’t have contrast requirements.
Contrast for non-text elements
User interface components and graphical objects must have a minimum contrast of 3:1 against adjacent colours.
Design tokens
Design tokens are used in the place of hard-coded values to allow a scalable and cohesive system.
Design tokens
Design tokens are used in the place of hard-coded values to allow a scalable and cohesive system.