Colors in Flair are organized by
variants. Each variant has different colors for different intensity levels (400—800). 400 and 500 colors always have sufficient contrast (1:4.5) when paired with
foreground, while 600—800 always have sufficient contrast when paired with
Flair does not aim to achieve the WCAG AAA color contrast ratio (1:7). It has been determined that contrast ratio are not necessarily the best indicator for readability, but achieving the minimum contrast ratio of 1:4.5 is still recommended.
In dark color scheme, the order of color for each shades are just reversed.
By default, Flair has 7 color variants: primary, secondary, success, warning, error, dark and light. All of the colors are accessible from the
ThemeContext. Accessing a color is as simple as
colors[variant][intensity].color. To get the contrasting color:
Foreground and background colors
In light color scheme, background colors will refer to the light-variant colors and foreground colors will refer to the dark-variant colors. Similarly, in dark color scheme, background colors are dark-variant and foreground colors are light-variant.