Calculate contrast-color($color) using YIQ luma value

Compass / compass

Compass is no longer actively maintained. Compass is a Stylesheet Authoring Environment that makes your website design simpler to implement and easier to maintain.

http://compass-style.org

Other

6.72k stars 1.18k forks source link

Calculate contrast-color($color) using YIQ luma value #1296

Closed mattdrose closed 11 years ago

mattdrose commented 11 years ago

Right now contrast-color($color) uses lightness from the hsl value to figure out what a good contrasting color would be. The problem is that some colors are perceived as darker than others, so you end up with inconsistent readability if used to calculate font color.

W3C suggests that you use YIQ's luma value (the Y) to calculate contrasting colors. This calculates the perceived brightness by the human eye.

I've created an example to show how it's more accurate in calculating a contrasting color.

Gist Codepen Example

Thoughts?

chriseppstein commented 11 years ago

This is already on master. See:

mattdrose commented 11 years ago

Did I actually just suggest something that you added yesterday? Current Status

chriseppstein commented 11 years ago

Well, it was added a couple months ago, but I refactored it yesterday :)