I was recently looking for a solution to determine if two colors are different to each other in terms of color and brightness. I ended up reading a W3C recommendation entitled “Techniques For Accessibility Evaluation And Repair Tools” that recommends some minimal values (and formulas to calculate them) describing the relationships between those two colors.

Here’s what that page states:

Two colors provide good color visibility if the brightness difference and the color difference between the two colors are greater than a set range.

Color brightness is determined by the following formula:

((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000

Note: This algorithm is taken from a formula for converting RGB values to YIQ values. This brightness value gives a perceived brightness for a color.Color difference is determined by the following formula:

(maximum (Red value 1, Red value 2) – minimum (Red value 1, Red value 2)) + (maximum (Green value 1, Green value 2) – minimum (Green value 1, Green value 2)) + (maximum (Blue value 1, Blue value 2) – minimum (Blue value 1, Blue value 2))The rage for color brightness difference is 125. The range for color difference is 500.

From that info I have created 2 UIColor extensions:

extension UIColor { func getColorDifference(fromColor: UIColor) -> Int { // get the current color's red, green, blue and alpha values var red:CGFloat = 0 var green:CGFloat = 0 var blue:CGFloat = 0 var alpha:CGFloat = 0 self.getRed(&red, green: &green, blue: &blue, alpha: &alpha) // get the fromColor's red, green, blue and alpha values var fromRed:CGFloat = 0 var fromGreen:CGFloat = 0 var fromBlue:CGFloat = 0 var fromAlpha:CGFloat = 0 fromColor.getRed(&fromRed, green: &fromGreen, blue: &fromBlue, alpha: &fromAlpha) let redValue = (max(red, fromRed) - min(red, fromRed)) * 255 let greenValue = (max(green, fromGreen) - min(green, fromGreen)) * 255 let blueValue = (max(blue, fromBlue) - min(blue, fromBlue)) * 255 return Int(redValue + greenValue + blueValue) } func getBrightnessDifference(fromColor: UIColor) -> Int { // get the current color's red, green, blue and alpha values var red:CGFloat = 0 var green:CGFloat = 0 var blue:CGFloat = 0 var alpha:CGFloat = 0 self.getRed(&red, green: &green, blue: &blue, alpha: &alpha) let brightness = Int((((red * 299) + (green * 587) + (blue * 114)) * 255) / 1000) // get the fromColor's red, green, blue and alpha values var fromRed:CGFloat = 0 var fromGreen:CGFloat = 0 var fromBlue:CGFloat = 0 var fromAlpha:CGFloat = 0 fromColor.getRed(&fromRed, green: &fromGreen, blue: &fromBlue, alpha: &fromAlpha) let fromBrightness = Int((((fromRed * 299) + (fromGreen * 587) + (fromBlue * 114)) * 255) / 1000) return max(brightness, fromBrightness) - min(brightness, fromBrightness) } }

Here’s an example of how you can use them:

let backgroundColor = UIColor.whiteColor() let foregroundColor = UIColor.blackColor() let colorDifference = backgroundColor.getColorDifference(foregroundColor) // returns 765 let brightnessDifference = backgroundColor.getBrightnessDifference(foregroundColor) // returns 255

Enjoy!

I’m thinking about where to use.

Imagine having extracted the 5 most used colors from an image and having to determine which pair provides the most readable results.

You can’t weight each of the colors equally. Our eyes have a bias against blue and to a lesser extent red.