Color Contrast

Proper contrast is important for design legibility & accessibility.

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;
}

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