Accessible combinations
Combinations with good colour contrast assists people with vision impairments.
Usage
Colour contrast standard for websites is essential for accessibility, the WCAG 2.0 Level AA contrast ratio must be met or exceeded.
The below combinations are accessible contrasts between foreground and background.
Accessible
SL Blue/White
color: colour(blue);
background-color: colour(white);
Accessible
Alt Blue/White
color: colour(blue-alt);
background-color: colour(white);
Accessible
Dark Blue/White
color: colour(blue, dark);
background-color: colour(white);
Accessible
SL Aqua/White
color: colour(aqua);
background-color: colour(white);
Accessible
Dark Aqua/White
color: colour(aqua, dark);
background-color: colour(white);
Accessible
Purple/White
color: colour(purple);
background-color: colour(white);
Accessible
Alt Purple/White
color: colour(purple, alt);
background-color: colour(white);
Accessible
Dark Purple/White
color: colour(purple, dark);
background-color: colour(white);
Accessible
Text Grey/White
color: colour(grey);
background-color: colour(white);
Accessible
SL Yellow/SL Blue
color: colour(yellow);
background-color: colour(blue);
Accessible
Alt Yellow/SL Blue
color: colour(yellow, alt);
background-color: colour(blue);
Accessible
SL Orange/SL Blue
color: colour(ui-orange);
background-color: colour(blue);
Accessible
Pale Grey/SL Blue
color: colour(grey, pale);
background-color: colour(blue);
Accessible
White/Alt Blue
color: colour(white);
background-color: colour(blue, alt);
Accessible
SL Yellow/SL Purple
color: colour(yellow);
background-color: colour(purple);
Accessible
Alt Yellow/SL Purple
color: colour(yellow, alt);
background-color: colour(purple);
Accessible
Pale Grey/SL Purple
color: colour(grey, pale);
background-color: colour(purple);
Accessible
White/Blue Gradient
color: colour(white);
linear-gradient(to right, colour(blue), colour(blue, alt));
Accessible
White/Aqua Gradient
color: colour(white);
linear-gradient(to right, colour(blue), colour(aqua));
Accessible
SL Yellow/Purple Gradient
color: colour(yellow);
linear-gradient(to right, colour(blue), colour(purple));
Accessible
Alt Yellow/Purple Gradient
color: colour(yellow, alt);
linear-gradient(to right, colour(blue), colour(purple));
Accessible
White/Purple Gradient
color: colour(white);
linear-gradient(to right, colour(blue), colour(purple));
Accessible
SL Blue/Yellow Gradient
color: colour(blue);
linear-gradient(to right, colour(blue), colour(purple));
Accessible
Dark Blue/Yellow Gradient
color: colour(blue, dark);
linear-gradient(to right, colour(yellow, dark), colour(yellow, alt));
Accessible
Dark Purple/Yellow Gradient
color: colour(purple, dark);
linear-gradient(to right, colour(yellow, dark), colour(yellow, alt));
Accessible
SL Yellow/Grey
color: colour(yellow);
background-color: colour(grey);
Accessible
Alt Yellow/Grey
color: colour(yellow, alt);
background-color: colour(grey);
Accessible
Dark Blue/Pale Grey
color: colour(blue, dark);
background-color: colour(grey, pale);
Accessible
Dark Aqua/Pale Grey
color: colour(aqua, dark);
background-color: colour(grey, pale);
Accessible
Dark Purple/Pale Grey
color: colour(purple, dark);
background-color: colour(grey, pale);