Color contrast tests

A test suite for testing color contrast in accordance with WCAG guidelines.

AA Normal Text

Step 11 is designed for 400 weight text in any size, and guaranteed to work well on a step 3 background. Each test should pass 4.5:1 contrast ratio.

Gray 11 on Gray 3
Mauve 11 on Mauve 3
Slate 11 on Slate 3
Sage 11 on Sage 3
Olive 11 on Olive 3
Sand 11 on Sand 3
Tomato 11 on Tomato 3
Red 11 on Red 3
Ruby 11 on Ruby 3
Crimson 11 on Crimson 3
Pink 11 on Pink 3
Plum 11 on Plum 3
Purple 11 on Purple 3
Violet 11 on Violet 3
Iris 11 on Iris 3
Indigo 11 on Indigo 3
Blue 11 on Blue 3
Cyan 11 on Cyan 3
Teal 11 on Teal 3
Jade 11 on Jade 3
Green 11 on Green 3
Grass 11 on Grass 3
Bronze 11 on Bronze 3
Gold 11 on Gold 3
Brown 11 on Brown 3
Orange 11 on Orange 3
Amber 11 on Amber 3
Yellow 11 on Yellow 3
Lime 11 on Lime 3
Mint 11 on Mint 3
Sky 11 on Sky 3

AA Large Text

Step 9 step is designed for solid backgrounds, and guaranteed to work well behind white text in 600 weight at 19px. Each test should pass 3:1 contrast ratio.

White on Gray 9
White on Mauve 9
White on Slate 9
White on Sage 9
White on Olive 9
White on Sand 9
White on Tomato 9
White on Red 9
White on Ruby 9
White on Crimson 9
White on Pink 9
White on Plum 9
White on Purple 9
White on Violet 9
White on Iris 9
White on Indigo 9
White on Blue 9
White on Cyan 9
White on Teal 9
White on Jade 9
White on Green 9
White on Grass 9
White on Bronze 9
White on Gold 9
White on Brown 9
White on Orange 9

These bright scales are designed for dark foreground text.

Sand 12 on Amber 9
Sand 12 on Yellow 9
Olive 12 on Lime 9
Sage 12 on Mint 9
Slate 12 on Sky 9
PreviousBalance