All color hues are generated using a specific target contrast ratio from a base color, providing a constant accessibility score that meet WCAG requirements for minimum contrast.
Each hue in our color palette contains twelve values from 10 to 120:
- 10 to 40 are WCAG AAA accessible against 120 color
- 50 and 60 are WCAG AA accessible against 120 color
- 70 and 80 are WCAG AA accessible against white color
- 90 to 120 are WCAG AAA accessible against white color
The contrast ratio between color values are consistent across all different hues, ex: Indigo-60, Green-60, and Rose-60 has the same contrast ratio of 5:1 against 120 color.
It is so easy to customize the whole color system. You just need to open the link to Leonardo site that is included with your purchase, make some adjustment, then copy the color values and apply it to your Figma color styles all at once by using Batch Styler plugin. No need to change the color one by one.