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