Foundations
Colours
Colour is key to expressing brand and identity but it also plays an important role in conveying meaning to a user.
Overview
The NewsKit design system enables brands to utilise bespoke colour palettes appropriately and systematically while encouraging accessibility.
Colours are applied to NewsKit components through well-defined rules at both the theme and component level. These rules help to establish a visual tone, indicate interaction and communicate meaning. Importantly, it also allows our brands to maintain their own unique identities.
Principles
Contextual
Colour is applied to a UI element based on it’s context, not just because it’s visually pleasing
Expressive
Brand colours are added to key moments in the user journey to express brand identity and style
Inclusive
Important UI elements like text and icons are legible and meet accessibility contrast standards
Palette colours
Palette colours represent all of a brand’s colours. They are linked to contextual colour tokens where specific meaning (context) is applied. As such, careful consideration should be given if choosing to apply a palette colour directly applied to an interface rather than a contextual colour.
Understanding the swatches
Utilise the swatches below to determine the accessibility of the palette colour in contrast to the background colour of this page
Normal sized text on this colour will have Contrast ratio of 4.5:1 or over
Normal sized text on this colour will have Contrast ratio of 3:1 or over
Normal sized text on this colour will be inaccessible
Normal and large size text is defined by the WCAG AA standards as the the following:
Normal sized text
The font size is at least 16px with a regular font weight or heavier.
Large sized text
The font size is at least 18.66px with a bold font weight or 24px with regular font weight.
Contextual colours
Contextual colours are selected from the palette colours and have specific functions or purposes applied. There are three categories of contextual colours: Ink, Interface and Interactive colours.
Ink
Ink colours are applied to typography and iconography. There are several variations available, each associated with a specific purpose within the design system.
‘Common’ Ink tokens are used to style most generic text and icons within a design such as headlines, subheadlines & body text.
| Colour | Colour token | Token value | Common uses |
|---|
Interface
Interface colours are applied to fills and borders on often static background UI elements including page backgrounds and dividers.
‘Common’ interface tokens are used to style most structural, often static, component layers within a design such as card & page backgrounds.
| Colour | Colour token | Token value | Common uses |
|---|
Interactive
Interactive colours are used to indicate and display interactions of certain components such as buttons, links and switches. Each set of interactive colours covers the various states needed. The base state uses the 030, the hover 040 and the active 050. The 010 and 020 are used for loading/progress states.
‘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 considerations
Carefully consider what colours to assign to the NewsKit contextual colours to ensure important UI elements like text and icons are legible without compromising the aesthetic. Avoid using yellow or orange colours to convey a notice or warning intent because these colours paired with white text do not allow for sufficient colour contrast. Aim for contrast ratios that adhere to the WCAG AA standards:
Contrast for text and images of text
Standard text and images of text must have a minimum of 4.5:1 contrast between the text colour and the background, except for the following:
Large text
Large-scale text and images of large-scale text must have a minimum of 3:1 contrast between the text colour and the background.
Link text
Underline link text within the body text (inline link). Otherwise, in addition to the above, link text must have at least a 3:1 contrast between the link text colour and the surrounding non-link text colour.
Incidental text
Text or images of text that are part of an inactive component, pure decoration, or part of a picture containing significant other visual content do not have any contrast requirements.
Logotypes
Text that is part of a logo does not have any contrast requirements.
Contrast for non-text elements
User interface components and graphical objects must have at least a 3:1 contrast between against adjacent colours.