accessible-color

accessible-color(
	$foreground,
	$background,
	$threshold
);

Description

This powerful function allows you to easily output an accessible color.

🚧

We use this function everywhere when developing our own themes to ensure that our color combinations meet contrast accessibility guidelines, and you should to - accessibility matters!

Parameters

$foreground (color)
The colour you want to check.

$background (color)
The color you want to check the $foreground against.
Default: white

$threshold (AA | AAA | 1 - 10)
The threshold that you want to check the colors contrast ratio against.
Default: AA / 4.5

Return

(color) $foreground color adjusted for accessibility.

Examples

Ensure that an elements text color is accessible

.foo {
  background: $secondaryColor;
  color: accessible-color($secondaryLightest, $secondaryColor);
}