# Colours tests

## Shades test

> **Tip**
>
> Click on colour box to copy hex value to clipboard.

> **Tip**
>
> Turn on greyscale display to focus on the lightness of shades without being distracted by their saturation.

<ColorShades
  colors={colorTokens.core}
  colorKeys="solarMist, gray, aqua, green, yellow, red"
/>

---

## Data vis palette test

<ColorsOnChart />

---

## Contrast tests

Palettes are shown with white, dark and each of particular palette's colour text on top. Dots are representing contrast ratio between background colour and text colour.

> **Important**
>
> Combination of a background colour and a text colour is checked against [colour contrast requirements](https://www.w3.org/TR/WCAG/#contrast-enhanced).
> Green dot means at least WCAG Level AA (4.5:1) and red dot means too low (inaccessible) contrast ratio.

### Solar mist

<PaletteContrast colors={colorTokens.core} colorKeys="solarMist" />

### Gray

<PaletteContrast colors={colorTokens.core} colorKeys="gray" />

### Aqua

<PaletteContrast colors={colorTokens.core} colorKeys="aqua" />

### Green

<PaletteContrast colors={colorTokens.core} colorKeys="green" />

### Yellow

<PaletteContrast colors={colorTokens.core} colorKeys="yellow" />

### Red

<PaletteContrast colors={colorTokens.core} colorKeys="red" />