Skip to content

Instantly share code, notes, and snippets.

@KimBranzell
Created January 12, 2023 13:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save KimBranzell/4645d0e5f0c4cc07aa665c4da39195c5 to your computer and use it in GitHub Desktop.
Save KimBranzell/4645d0e5f0c4cc07aa665c4da39195c5 to your computer and use it in GitHub Desktop.
This mixin calculates the closest best possible contrast for a given text color according to WCAG (Web Content Accessibility Guidelines) standards.
@mixin best-contrast($text-color, $bg-color, $level) {
$lum1: luminance($text-color);
$lum2: luminance($bg-color);
$contrast: $lum1 / $lum2;
@if $contrast < 1 {
$contrast: 1 / $contrast;
}
@if $level == AA {
@if $contrast < 4.5 {
// Text color does not meet AA contrast ratio, adjust color
// ...
}
} @else if $level == AAA {
@if $contrast < 7 {
// Text color does not meet AAA contrast ratio, adjust color
// ...
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment