# Colors tests

## Shades test

<Callout variant="tip">
  Click on color box to copy hex value to clipboard.
</Callout>

<Callout variant="tip">
  Turn on grayscale display to focus on the lightness of shades without being
  distracted by their saturation.
</Callout>

<ColorShades
  colors={colorTokens.core}
  colorKeys="accent, gray, blue, green, orange, red"
/>

---

## Data vis palette test

<ColorsOnChart />

---

## Contrast tests

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

<Callout variant="important">

Combination of a background color and a text color is checked against [color 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.

</Callout>

### Accent

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

### Gray

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

### Blue

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

### Green

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

### Orange

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

### Red

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