A11y Sass API

Functions

contrast-color

@function contrast-color($background-color, $light-color, $dark-color) { … }

Returns — Color

Examples

@use "@react-md/core";

$background-color: #fafafa;

.container {
  background-color: $background-color;
  color: core.contrast-color($background-color);
}

See Also

• https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast

Requires

• @function _contrast
• $avatar-background-color

Gets the contrast between two colors. The contrast ratios between background and foreground colors should be:

• 3 for large text (18pt normal or 14pt bold)
• 4.5 for normal text
• 7.1 for Level AAA requirements.

NOTE: This does not account for font size or font weight but should be good enough for most cases.

The color with the highest contrast ratio

The background color to check

The light text color to use if it has a better contrast ratio.

The dark text color to use if it has a better contrast ratio.