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;
}
Related
CSS color-contrast() [external]
Requires
@function error() [private]
Color Previews
papayawhip
#ffefd5
rgb(255, 239, 213)
hsl(37, 100%, 92%)
default
#000000
rgb(0, 0, 0)
hsl(0, 0%, 0%)
highest
#800000
rgb(128, 0, 0)
hsl(0, 100%, 25%)
first
#663399
rgb(102, 51, 153)
hsl(270, 50%, 40%)