Use the CSS color-contrast property when it becomes available [🟥 awaiting full support]

[chrisblakley]

This CSS property will handle proper color contrast based on given colors and AA/AAA compliance. Super cool and replaces the need for the Nebula Sass mixin that relies on 3 separate server-side functions for luminance and color contrast.

https://caniuse.com/mdn-css_types_color_color-contrast

No browsers currently fully support, but rumor is by the end of the year we'll be able to use it...

[chrisblakley]

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-contrast Draft spec: https://drafts.csswg.org/css-color-5/#colorcontrast

Examples:

First color is the background color, and the rest are potential candidates to use. If none of the candidates work, it will default to either black or white.

color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AA)

color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to 5.8)

[chrisblakley]

https://caniuse.com/mdn-css_types_color_color-contrast