Colour provides meaning and expression, and adds to a recognisable appearance. On a functional level, it’s there to support you by providing sufficient colour contrast or as an extra indication of (interactive) states.
Air France Red
Air France Red is used for our logo and other branding assets such as illustrations. Do not use for functional UI elements such as text or surface color with small white text, use Accent instead.
Primary
Our primary palette consists of various shades of blue, composed to work for digital products and provide sufficient contrast (based on the usage). Lighter shades are mostly used for background elements. When the colour provides good enough contrast, it’s mostly used for foreground purposes. This starts at the Primary 500 shade.
Accent
As the name states, this colour is only used for accents and extra indications. Just like the KLM Blue colour, it should be used with care since it doesn’t provide a good enough colour contrast to be accessible. Therefore, do not apply it to text or as a background colour behind text.
Grey
Our neutral colours consist of grey values and are meant for backgrounds, borders, and texts. Neutral colours are calm, easy to observe and give room for other colours to highlight the right elements. As you may notice from the hexadecimal values, our grey palette is not 100% grey. It contains a light touch of blue that, in terms of hue, matches the primary palette.
Blue
Used across information states.
Green
Used across success states.
Red
Used across blocking or error states.
Yellow
Used across warning or incomplete states.
Neutral
Our neutral palette only contain black and white. White is used as a background or text colour in general. Sometimes it translates to white for our dark theme as well. In that case it will always stay white, where we introduced a separate style/ class for (the '0' class). In other cases it will translate to the dark mode opposite.
State colours
States communicate the status of a component, for example when pressing or clicking an interactive component. To visually indicate this state we use opacity styles as an overlay, on top of the default component colour.
- Container/ component default background colour
- Opacity style as a state overlat
- Component content
Opacity states come in different values and colours, which are applied to our components. The values are based on the type of state. The colours are based on the component colour or surface colour. These opacity states our part of our Base Colours library.
Accessibility
The way we apply colour plays a mayor role when it comes to providing accessible experiences. Users, including users with visual disabilities, must be able to perceive content on the page. In order to do so, the colour contrast should be sufficient enough.
When we say contrast, we mean the difference between two colours. For accessibility measures, this difference is measured and represented as a ratio. This ratio should at least pass the minimum AA requirement as provides by the Web Content Accessibility Guidelines (WCAG). This means that the visual presentation of text has a contrast ratio of at least 4.5:1, except for exceptions such as large text (should have at least a 3:1 ratio), graphics, decorative elements or logotypes.
This means that the colours on this page, could not simply be combined with any other colour. Only combinations that pass the minimum AA requirements can be applied. In the matrix below, you can see which colour combination provide sufficient contrast (marked green with a checkmark). Some combinations are only allowed when using large text, meaning at least 19px and bold or 24px regular (marked yellow with a letter 'L'). We did not include our notification colours.