Skip to main content

contrast ()

The WCAG contrast ratio between two colors, from 1 to 21 (commonly written 1:1 to 21:1).

Parameters

$first-color

The first color, often the background color.

Type: Color

$second-color

The second color, often the foreground color.

Type: Color

Return Value

Number: A number representing the contrast ratio between two colors.

Example

@use '@sass-fairy/color';

@debug color.contrast(white, red);
  // 4

@debug color.contrast(#fff, #000);
  // 21

@debug color.contrast(blue, #00f);
  // 1