Contrast Ratio (Relative Luminance)
Whenever you use colour, whether it be coloured text or iconography on a white background or vice versa, we consider its relative luminance. Good contrast allows our interface to be easier to understand.
For more information on this topic, we recommend reading the Web Content Accessibility Guidelines on Contrast Ratios.
For Octopus, our minimum standard is an AA rating for contrast, which is 4.5:1 for regular text and larger-scale text. Our iconography adheres to a ratio of 3:1.
Recommended resources and tools
Contrast (Figma plugin)
Great basic plugin that shows real time contrast accessibility output.
Able (Figma plugin)
Fantastic free plugin that allows real time checking. Able allows you to invert selected colours and run basic colour blindness simulation.
Stark (Figma plugin)
One of the most extensive plugins available, Stark allows greater control of how you check contrast, while also including a raft of other accessibility tools such as focus order and colour blindness simulator.
Colour blindness
As an issue that affects a portion of our population, colour blindness is an accessibility issue that should be considered. One method of checking for this is to use a screen simulator to see the effects your choice of colour palette can have on a user with colour blindness.
There are three types of colour blindness, with variations of each—generally a partial (~omaly) and an extreme (~opia).
Red/Green (more common)
- Deuteranomaly (<5%) is the most common type of red-green colour blindness. It makes green look more red. This type is mild and doesn’t usually get in the way of everyday activities.
- Protanomaly (<1%) makes red look more green and less bright. This type is mild and usually doesn’t get in the way of everyday activities.
- Protanopia (<1%) and deuteranopia (<1%) both make you unable to tell the difference between red and green at all.
Blue/yellow (less common)
- Tritanomaly (<0.002%) makes it hard to tell the difference between blue and green and between yellow and red.
- Tritanopia (<0.002%) makes you unable to tell the difference between blue and green, purple and red, and yellow and pink. It also makes colours look less bright.
Monochrome (least common)
If you have complete colour blindness (<0.002%), you can’t see colours at all. This is also called monochromacy, and it’s pretty uncommon. Depending on the type, you may also have trouble seeing clearly and be more sensitive to light.
Recommended resources and tools
Typography and text size
We’ve carefully considered typography-related values such as text size, line height, and font weight to meet the requirements of the deploy platform.
Our font size base value is 16px by default and should never extend below 12px or above 32px. Likewise, font weight should always be at least 400/Regular and not heavier than 700/Bold.
Recommended resources and tools
Tokens Studio for Figma
This plugin is our default management system for all tokens, such as colour, fonts, etc. Please get in touch with the Front End Foundations Team to learn more about Token Studio and how it works with our component library.
Design System: Foundations
All font styles are in the Foundations file under the Team library in Figma. This file will guide you through best practices and available styles (sizes and weights).
Focus order
We are currently considering ways to include focus order in our designs. Once we have arrived at a better understanding of documenting focus order, we will update this section.