Skip to main content

a11y ()

Finds the nearest accessible color for the given color against another given color according to the specified WCAG standard contrast ratio.

Parameters

$a11y-color

The color that should change when the contrast does not meet the expected contrast ratio.

Type: Color

$other-color

The color that is compare against.

Type: Color

$size

The size category of the WCAG standard which should be used to determine compliance.

Type: 'normal' | 'large'
Default: 'normal'

$level

The color that should change when the contrast does not meet the expected contrast ratio.

Type: 'AA' | 'AAA'
Default: 'AA'

Return Value

Color: A color that meets the given standards for size and level in contrast to the other color.

Example

@use '@sass-fairy/color';

@debug color.a11y(red, blue);
  // #ffa3a3

@debug color.a11y(red, blue, 'large');
  // #ff6666

@debug color.a11y(red, blue, $level: 'AAA');
  // #ffe1e1