The importance of colour design stems from the significance of colour in the human mind.
It can create ideas, express messages, spark interest, and generate certain emotions.
# Colour palette
It’s important to check your brand colours against our accessibility guidelines, for example if you’re using white text on a coloured background.
When specifying colours for your brand, it's a good idea to understand the different colour harmonies available.
# Highlight colours
The colour of the UI on our sites and apps is made up of combinations of black, white, and the grey palette, but you can use highlight colours for your brand. Highlight colours are used sparingly.
For example, NBUX highlight colours are:
# Communication Palette
Some elements require colour to portray different meanings to our customers, so we have developed a "communication palette" in addition to brand palettes. It specifies 3 contexts:
The colours pass WCAG AA accessibility standards. and we recommend that these colours remain the same regardless of brand due to their well-known usage and connotation in other products, both online and offline.
# Grey Palette
Greys play an important part when designing our products and it is important that these are consistent across our UI, but also accessible. The grey palette provides 4 shades of grey giving us an ample variety for any situation.
Greys can be used to differentiate sections by adding them as a background colour. E.g. this document has a white header and uses Grey 100 for the page background.
# Black and white
We don’t actually use black or white in our designs and UI — the “white” we use is a very pale grey, and the “black” we use is a very dark grey.
# Contrast Ratio
Insufficient colour constrast makes content hard to read for everyone. An online colour contrast calculator can help you accurately analyse the colour contrast in our products, ensuring that it meets optimal standards. The minimum contrast ratio of 4.5:1 is imperative in our products.
Note: The NBUX Colour Palette meets AA accessibility standards.
Colour.review - We use this online tool for checking colour contrast.
Stark - We use this Sketch plugin
Colour alone should not be relied on to convey a message. For example, certain types of colour blindness make it difficult or even impossible to see common red alert messages. Elements should be distinguishable using other design principles, without sole reliance on colour.