Color accessibility test
Test WCAG accessibility requirements of our colors
See the results
| Color 1 | Color 2 | Requirement | Actual | Result |
|---|---|---|---|---|
| --color-background | --color-text | 7 | ||
| --color-background-alt | --color-text | 7 | ||
| --color-background | --color-primary | 4.5 | ||
| --color-background | --color-error | 4.5 | ||
| --color-background | --color-success | 4.5 | ||
| --color-background-alt | --color-primary | 4.5 | ||
| --color-background-alt | --color-error | 4.5 | ||
| --color-background-alt | --color-success | 4.5 | ||
| --color-primary | --color-on-primary | 4.5 | ||
| --color-error | --color-on-primary | 4.5 | ||
| --color-success | --color-on-primary | 4.5 | ||
| --color-background | --color-secondary | 4.5 | ||
| --color-background | --color-tertiary | 4.5 | ||
| --color-background-alt | --color-secondary | 4.5 | ||
| --color-background-alt | --color-tertiary | 4.5 | ||
| --color-text | --color-tertiary | 3 |
Explanations
All colors in a given theme must met the WCAG contrast requirements for the purpose that are designed for.
- `--color-background` and `--color-text` should have as highest contrast as possible since they are colors for background and normal text. At least 7:1 is desired
- `--color-background` should have contrast with `--color-primary`, `--color-error` and `--color-success` (all of the three) of at least 4.5:1 since the latter three appear always on the background.
- `--color-on-primary` should have contrast with `--color-primary`, `--color-error` and `--color-success` (all of the three) of at least 4.5:1
- `--color-secondary` should have 4.5:1 contrast with `--color-background`
- `--color-tertiary` should have 4.5:1 contrast with `--color-bacakground`. It is recommended to have a 3:1 contrast with `--color-text`.