Skip to content

A sass plug-in that provides a function to determine the lightness of a color in the YIQ color space

License

Notifications You must be signed in to change notification settings

timhettler/sass-yiq

Repository files navigation

YIQ Color Contrast

Most approaches to checking color contrast use the HSL color space. This often produces color pairings that - while technically correct - look just a little "off". The reason for this is that the eye is more sensitive to changes in the orange-blue range than in the purple-green range, so the percieved lightness of a color can change depending its wavelength.

The YIQ color space is designed to take this bias into account. It weighs the different parts of the color according to their impact on our perpection of the color's brightness. Color pairings appear more natural when utilizing this color space for contrast comparisons.

For information on color contrast and the YIQ color space:

Demo

Compare YIQ color contrast to HSL color contrast: http://timhettler.github.io/sass-yiq/demo/

Installation

yarn add @timhettler/sass-yiq

Usage

@use "@timhettler/sass-yiq" as yiq;

.container {
  @include yiq.contrasted(#fa5400, #000, #fff);
}

Details on available variables, functions, and mixins can be found in the SassDoc documentation

About

A sass plug-in that provides a function to determine the lightness of a color in the YIQ color space

Resources

License

Stars

Watchers

Forks