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
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
Indigo 11 on Indigo 3
Blue 11 on Blue 3
Cyan 11 on Cyan 3
Teal 11 on Teal 3
Green 11 on Green 3
Grass 11 on Grass 3
Orange 11 on Orange 3
Brown 11 on Brown 3
Bronze 11 on Bronze 3
Gold 11 on Gold 3
Sky 11 on Sky 3
Mint 11 on Mint 3
Lime 11 on Lime 3
Yellow 11 on Yellow 3
Amber 11 on Amber 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 text on Gray 9
White text on Mauve 9
White text on Slate 9
White text on Sage 9
White text on Olive 9
White text on Sand 9
White text on Tomato 9
White text on Red 9
White text on Crimson 9
White text on Pink 9
White text on Plum 9
White text on Purple 9
White text on Violet 9
White text on Indigo 9
White text on Blue 9
White text on Cyan 9
White text on Teal 9
White text on Green 9
White text on Grass 9
White text on Orange 9
White text on Brown 9
White text on Bronze 9
White text on Gold 9

These bright scales are designed for black foreground text.

Black text on Sky 9
Black text on Mint 9
Black text on Lime 9
Black text on Yellow 9
Black text on Amber 9
PreviousBalance