Color Contrast
Proper contrast is important for design legibility & accessibility.
Related
CSS specification [external]
@function contrast()
CSS Color Module, level 5,
defines a color-contrast() function
that can be used to select the best contrast
from a list of colors.
Parameters & Return
$color: (color)
Base color to contrast against
$options...: (black, white)
Returns the better contrast of black or white by default.
- Optionally provide two or more colors, to compare for highest contrast with the base color.
- Optionally provide a contrast ratio as the final value, to return the first color option that passes the given contrast threshold
@return (color)
The option with the highest contrast, orr first to meet a given ratio
Example
scss
.contrast {
// black or white for best contrast
default: blend.contrast(papayawhip);
// highest contrast
highest: blend.contrast(papayawhip, rebeccapurple, maroon);
// first option with contrast >= 4.5
first: blend.contrast(papayawhip, rebeccapurple, maroon, 4.5);
}
css
compiled
.contrast {
default: black;
highest: maroon;
first: rebeccapurple;
}