Programmatically determine the perceived lightness of a color. More details on: http://robots.thoughtbot.com/closer-look-color-lightness + Online tool: http://thoughtbot.github.io/color-lightness-test/

color-is-light.scss

@function color-is-light($hex-color) {
  $red: red(rgba($hex-color, 1.0));
  $green: green(rgba($hex-color, 1.0));
  $blue: blue(rgba($hex-color, 1.0));

  $lightness: ($red * 0.2126 + $green * 0.7152 + $blue * 0.0722) / 255;

  @return $lightness > .6;
}

NSColor+isLight.h

#import <Cocoa/Cocoa.h>

@interface NSColor (isLight)

- (BOOL)isLight;

@end

NSColor+isLight.m

#import "NSColor+isLight.h"

@implementation NSColor (isLight)

- (CGFloat)luma
{
    CGFloat luma = 0.2126 * self.redComponent + 0.7152 * self.greenComponent + 0.0722 * self.blueComponent;

    return luma;
}

- (BOOL)isLight
{
    return self.luma >= .6;
}

@end

NSColorExtensions.swift

import Cocoa

extension NSColor {
  var luma: Float {
    return 0.2126 * Float(redComponent) + 0.7152 * Float(greenComponent) + 0.0722 * Float(blueComponent)
  }
  
  var isLight: Bool {
    return luma >= 0.6
  }
}

UIColor+isLight.h

#import <UIKit/UIKit.h>

@interface UIColor (isLight)

- (BOOL)isLight;

@end

UIColor+isLight.m

#import "UIColor+isLight.h"

@implementation UIColor (isLight)

- (CGFloat)luma
{
    CGFloat luma;
    CGFloat red;
    CGFloat blue;
    CGFloat green;
    CGFloat alpha;

    [self getRed:&red green:&green blue:&blue alpha:&alpha];

    luma = 0.2126 * red + 0.7152 * green + 0.0722 * blue;

    return luma;
}

- (BOOL)isLight
{
    return self.luma >= .6;
}

@end

UIColorExtensions.swift

import UIKit

extension UIColor {
  var redComponent: CGFloat {
    var red: CGFloat = 0
    self.getRed(&red, green:nil, blue:nil, alpha:nil)
    return red
  }
  
  var greenComponent: CGFloat {
    var green: CGFloat = 0
    self.getRed(nil, green:&green, blue:nil, alpha:nil)
    return green
  }
  
  var blueComponent: CGFloat {
    var blue: CGFloat = 0
    self.getRed(nil, green: nil, blue: &blue, alpha: nil)
    return blue
  }
  
  var luma: Float {
    return 0.2126 * Float(redComponent) + 0.7152 * Float(greenComponent) + 0.0722 * Float(blueComponent)
  }
  
  var isLight: Bool {
    return luma >= 0.6
  }
}

These are great! You might consider using less common variables in the SASS version. I ran into an issue where I had $red defined and it caused conflicts. Maybe something like $_red, $_green, $_blue, and $_lightness

Thank you for the insights, I really enjoyed reading your article!

But can you explain why you used > 0.6 instead of > 0.5 for calling a color light?

@timonweber That’s up to your specific implementation, but 0.6 is on the safer side, since it’s closer to how human sight perceives color.