Count the closest color like color?

Question

How can I calculate the closest color compatible with color from a HEX color code, for example, # 0a87af or from three RGB values ​​(0-255).

I am looking for an effective way to calculate or do it so that I can implement it in PHP or Python, and this algorithm can be used to make the website more accessible for people with color blind.

Answer 1

As others have noted in their comments / answers, the difference between the two colors will be important.

W3 has already created a method that determines the minimum contrast between colors to convey levels of accessibility.

They provide a description here , and the formula for the calculation is on the same page below here :

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

For this apparently simple formula, you will need to calculate the relative brightness marked by L1 and L2 both colors using a different formula, which you will 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 4.5: 1 for AA and 7: 1 for AAA. This still leaves room for good designs.

There is an example implementation in JS from Lea Verou .

This will not give you the closest color as you requested, because on a unique background there will be more than one frontal color giving the same contrast result, but this is the standard way to calculate contrasts.

Answer 2

A single color is not a problem for blind users (unless you want to convey a very specific value for that color tone); difference between colors.

Given two or more colors, you can convert them to HLS using colorsys and check if there is enough difference in Lightness. If the difference is too small, increase it, for example:

 import colorsys import re def rgb2hex(r, g, b): return '#%02x%02x%02x' % (r, g, b) def hex2rgb(hex_str): m = re.match( r'^\#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$', hex_str) assert m return (int(m.group(1), 16), int(m.group(2), 16), int(m.group(3), 16)) def distinguish_hex(hex1, hex2, mindiff=50): """ Make sure two colors (specified as hex codes) are sufficiently different. Returns the two colors (possibly changed). mindiff is the minimal difference in lightness. """ rgb1 = hex2rgb(hex1) rgb2 = hex2rgb(hex2) hls1 = colorsys.rgb_to_hls(*rgb1) hls2 = colorsys.rgb_to_hls(*rgb2) l1 = hls1[1] l2 = hls2[1] if abs(l1 - l2) >= mindiff: # ok already return (hex1, hex2) restdiff = abs(l1 - l2) - mindiff if l1 >= l2: l1 = min(255, l1 + restdiff / 2) l2 = max(0, l1 - mindiff) l1 = min(255, l2 + mindiff) else: l2 = min(255, l2 + restdiff / 2) l1 = max(0, l2 - mindiff) l2 = min(255, l1 + mindiff) hsl1 = (hls1[0], l1, hls1[2]) hsl2 = (hls2[0], l2, hls2[2]) rgb1 = colorsys.hls_to_rgb(*hsl1) rgb2 = colorsys.hls_to_rgb(*hsl2) return (rgb2hex(*rgb1), rgb2hex(*rgb2)) print(distinguish_hex('#ff0000', '#0000ff')) 

Answer 3

Contrast-Finder is an open source online tool (written by Open-S and M. Faure) that, taking into account the foreground and background colors, will calculate the contrast ratio and, if it is insufficient according to the WCAG formula, will give you a bunch of background or foreground colors with a sufficient contrast ratio and therefore options using different algorithms (you should say this if you want to keep the foreground color or background color, and if you want the contrast ratio to be higher than 4.5: 1 or 3: 1 - level AA - or 7: 1 / 4,5 : 1 - AAA level).
This is a pretty spot for many pairs of flowers.

Sources - in Java - are on GitHub.

Note: as already written in other answers, colored people ("people with color defects") are only part of people interested in choosing colors: partially sighted people too. And when a webdesigner selects #AAA at #FFF, this is a problem for many people without loss of vision or color perception; they just have a brilliant Retina® screen in sub-optimal lighting conditions ...: p