A sass plug-in that provides a function to determine the lightness of a color in the YIQ color space
HTML JavaScript CSS Ruby
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
demo Add demo Sep 28, 2015
sassdoc Updated documentation Sep 28, 2015
src/sass Updated documentation Sep 28, 2015
test Add tests and documentation Sep 27, 2015
Gemfile Add tests and documentation Sep 27, 2015
Gruntfile.js Add demo Sep 28, 2015
README.md Update README Oct 20, 2015
bower.json Add tests and documentation Sep 27, 2015


YIQ Color Contrast

The obvious way to determe whether a color is "light" or "dark" by checking the lightness value in the HSL color space. this approach works sometimes, but often produces color pairings that - while technically correct - just look 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. By utilizing this color space when doing contrast comparison, the result is a color pairing that appears more natural.

For information on color contrast and the YIQ color space:

Installation options


npm install sass-yiq


bower install sass-yiq

Usage & Configuration

@import 'sass-yiq'

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


Check out how the YIQ color contrast compares to HSL color contrast: http://timhettler.github.io/sass-yiq/demo/