Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
LESS contrast mixin - contrast mixin for LESS which works likes you'd expect it to
* contrast.less
* the built-in contrast() function in LESS sucks, this one works
* calculates the perceptual brightness of a color and assigns an int value to it
* to determine whether contrasting color should be dark or light
* usage:
* #contrast(@color: #f00; @threshold: 43; @dark: #222; @light: #eee; @more: '!important');
* using specific params:
* #contrast(@threshold: 20; @light: #ccc);
* @NOTE this script assumes you have variables called:
* - @color-black
* - @color-white
#contrast(@color, @property: color, @threshold: 50, @dark: @color-black, @light: @color-white-pure, @more: ~'') {
@contrast: unit(luma(@color));
& when (@contrast > @threshold) {
@{property}: @dark@more;
& when not (@contrast > @threshold) {
@{property}: @light@more;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.