Colors

Accessible pairing

To use our color you need to respect some accessibility principles. Some of our components are built with colored texts and system backgrounds.

To ensure that the text remains visible, the constrast must not fall below 3.1 which means :

--> Text in regular : 18pt = 24px minimum
--> Text in bold : 14pt = 18,5px minimum

--> This rules doesn’t itself apply to disable or inactive content or component.
--> A contrast ratio of 3:1 is sufficient for interface components or graphic elements carrying information and their backgrounds

Text variables

To ensure the accessibility of our content, we have created text variables which, with the exception of those describing an inactive or disable status, respect the minimum contrast: 4.5.1.

Hornet
Vade

Text

#0b0c0e

#ffffff

headline

#22242a

#f9f9fb

title

#454854

#f5f6f9

subtitle

#505462

#eff0f5

body

#8a8ea8

caption

#f9f9fb

#22242a

reverse

#c4c7d4

#676c7e

inactive

#40730c

#adef6c

primary

#525c00

#d8eb47

secondary

#bc1010

#f37272

danger

#995200

#ffb866

warning

#957804

#fbde6a

premium

#115528

#55dd82

success

#993800

#ffbe99

jupiter

#004799

#99c9ff

earth

#145252

#84e1e1

neptune

#414458

#e2e3e9

cloudy

#22242a

#ecedf4

system

#40730c

#d8eb47

brand

#17181c

#c4c7d4

dark

#ffffff

light

#7a04c8

#d69bfd

Teth

#525c00

#e2f075

Pilio

#40730c

#adef6c

Dagoba

#990066

#ff99dd

Zeltros

Text

#0b0c0e

#ffffff

headline

#22242a

#f9f9fb

title

#454854

#f5f6f9

subtitle

#505462

#eff0f5

body

#8a8ea8

caption

#f9f9fb

#22242a

reverse

#c4c7d4

#676c7e

inactive

#7a04c8

#eacbfe

primary

#990066

#ff80d4

secondary

#bc1010

#f37272

danger

#995200

#ffb866

warning

#635003

#fbde6a

premium

#115528

#7fe6a1

success

#993800

#ff9e66

jupiter

#004799

#99c9ff

earth

#145252

#84e1e1

neptune

#414458

#e2e3e9

cloudy

#22242a

#ecedf4

system

#7a04c8

#ff80d4

brand

#17181c

#c4c7d4

dark

#ffffff

light

#7a04c8

#d69bfd

Teth

#525c00

#e2f075

Pilio

#40730c

#adef6c

Dagoba

#990066

#ff99dd

Zeltros

Correspondence table

To complete the previous variables, you will find below all the colour correspondences to ensure good accessibility within our products:

Colors on background

Some of our components are built with a system background and white or black text on top. To ensure that the text remains visible, the constrast must not fall below 4.5.1. Here is the list of the colors you can apply on the different system colors to ensure accessibility.