Blend 0.2.3

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

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%)