What image comes to your mind when I say “color contrast”?
Perhaps your first thought is the famously hard-to-read combination of red and green; and you are right. For example, 9 percent of men cannot distinguish between red and green. Even though a minority, it’s helpful to keep in mind that a substantial percentage of your potential customers are affected by improper red-green design.
What else can we say about color contrast?
Well, there are other color pairs that don’t work together too well either. For example, the combination of red and blue is hard on the eyes, even for readers who aren’t “color challenged”. Take a look at the image below.
So, if I just avoid read-green and red-blue, am I done?
Not quite. Color contrast is not only about choosing your colors based on studies on how many people are able to distinguish them. It’s also about people with normal vision but who are in non-optimum conditions, such as direct sunlight shining on the phone screen or having to look at a bright screen in darkness.
Contrast is a very delicate topic and I hope these few lines have made you a bit more aware of the problem.
Obviously, you don’t want to use black on white for all your apps! So how can you check if your color contrast is good enough?
A simple solution is to use an online contrast checker such as http://snook.ca/technical/colour_contrast/colour.html.
The color you are using in code is usually RGB hex code. The first value (hexadecimal pair) in the RGB triplet specifies the mount of red, the second value specifies the amount of green, and third specifies the blue.
Simply feed the foreground color (e.g. the color of your font) and the background color (e.g. the button color) and read the results from the results field.
Especially in mobile environments you should go for fully compliant color combinations:
•The brightness difference is high (≥ 125) and
•The color difference is high (≥ 500)
In addition, you should check the contrast ratio. This ratio is based on the luminance values for the two colors in question. This ratio should be high (7:1 or better) for mobile applications.