### Thread: Matching Hex colour values - can a human see white text on white background?!

1. No Profile Picture
Registered User
Devshed Newbie (0 - 499 posts)

Join Date
Aug 2003
Location
UK
Posts
19
Rep Power
0

#### Matching Hex colour values - can a human see white text on white background?!

//Sorry for the formatting of this - not quite sure what happened to the width!

Hi,

I am trying to devise a way of programmatically deciding if two hex values would be visible to a human viewer.

If for example my webpage had a background colour of #FFFFFF and i set my text value to the same value then you couldn't see the text. That is programmatically a nice simple pattern match. However, if i were to change the text value just a little to ... say #EDFAE, the pattern match would fail... but a user would have a great deal of trouble reading it.

I have looked at a few approaches, and have come up with this.... there is one vital flaw however:-
Code:
```Step 1: Set visibility metric:

Visible text < 90% match

Step 2: Split the hexidecimal representation into the component colour values:

FF, FF, FF

Step 3: Convert each bigram value to decimal:

FF -> 255, FF -> 255, FF -> 255

Step 4: Sum the decimal values:

255 + 255 + 255 = 765

Step 5: Repeats steps 2-4 for second hexidecimal value (e.g. the text value).
Step 6: Compare the two resulting values.
Step 7: Perform visibility calculation:

SMALLEST VALUE * (100/LARGEST VALUE)

Step 8: If the result is less than or equal to our visibility metric, then the text should be visible to the human eye. If the result is larger than the metric then we can assume that the text was designed to be invisible to human viewers.

Worked Example

Let's run the algorithm over our earlier example of #FFFFFF(our background) against #EDFAE6(our text).
#FFFFFF -> 255+255+255=765
#EDFAE6 -> 237+250+230=717
#FFFFFF is the larger decimal value so becomes the denominator in our equation.
717*(100/765) = 93.72%
With our visibility metric set to 90% this comparison would appear to be invisible to human viewers.```
If one of the values is black - #000000 then I am dividing by zero - causing a major problem... e.g. if #000000 is compared to #FFFFFF - 0*(100/756) = 0 - this is fine... it is visible... but if we compare #000000 to #000033 - 0*(100/51) = 0 - NOT A MATCH, but if you look at this colour combination it is hard to see!

I have though about incrementing each hex value by one to prevent the divide by zero issue. However this causes a different problem outlined in the next example
Code:
```This example uses a hex->++dec conversion!
#000000 = 3
#000033 = 54

3*(100/54) = 5% - This is not zero, but 5% suggests it is visible, when it isn't - a value of 95% would be more appropriate```
I would dearly welcome any input anyone else might have on this problem, i have covered my desk with bits of paper trying to work this out. I have thought about using a Vector model for each R,G,B value and checking to see if the value we compare is within X places of the original, however I think this might present more problems that it is worth - although programmatically a vector space is a nice array!

Any comments greatfully received!

aceduk
2. No Profile Picture
Registered User
Devshed Newbie (0 - 499 posts)

Join Date
Aug 2003
Location
UK
Posts
19
Rep Power
0

#### SOLVED!

Right - the maths was all wrong there... I have worked it out now. If anyone is interested in how, mail me.

Cheers all
3. No Profile Picture
epl
Contributing User
Devshed Newbie (0 - 499 posts)

Join Date
Mar 2001
Location
Dublin
Posts
413
Rep Power
18
just as a matter of interest - would you not be better working with HSB rather than RGB values?
4. No Profile Picture
Registered User
Devshed Newbie (0 - 499 posts)

Join Date
Aug 2003
Location
UK
Posts
19
Rep Power
0
A fair point, but the application I had planned for this required me to compare RGB hex.
5. No Profile Picture
Contributing User
Devshed Newbie (0 - 499 posts)

Join Date
Apr 2002
Posts
155
Rep Power
17
Interesting one that, could you let me in on the solution?

I was going to post that you cannot sum all colours as of course #00FF00 is a very different colour to #FF0000 despite having an identical sum!