Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Calculate the closest colourblind-friendly colour?

How can I calculate the closest colourblind-friendly colour from a HEX colour code like #0a87af or from the three RGB values (0-255).

I'm searching for an efficient way to calculate or do this so I can implement it in PHP or Python and the algorithm can be used for better website accessibility for colourblind people.

like image 922
Bob Ortiz Avatar asked May 01 '16 21:05

Bob Ortiz


1 Answers

As the others mentionned in their comments/answer, the contrast between two colours will be of importance.

The W3 already created a method defining a minimum contrast between colours in order to pass dfferent levels of accessibility.

They provide the description here and the formula to calculate it is on the same page, at the bottom, here :

contrast ratio = (L1 + 0.05) / (L2 + 0.05)

For this apparently simple formula, you will need to calculate the relative luminance noted L1 and L2 of both colours using an other formula that you find here :

L = 0.2126 * R + 0.7152 * G + 0.0722 * B where R, G and B are defined as:

if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4

if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4

if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4

and RsRGB, GsRGB, and BsRGB are defined as:

RsRGB = R8bit/255

GsRGB = G8bit/255

BsRGB = B8bit/255

The minimum contrast ratio between text and background should be of 4.5:1 for level AA and 7:1 for level AAA. This still leaves room for creation of nice designs.

There is an example of implementation in JS by Lea Verou.

This won't give you the closest color as you asked, because on a unique background there will more than one front colour giving the same contrast result, but it's a standard way of calculating contrasts.

like image 77
Zimmi Avatar answered Sep 30 '22 17:09

Zimmi