Contrast for iPhone

As a designer working mainly with on screen design, I have had a few discussions about whether text in a design is readable or not. These discussions have previously resulted in a situation where one party ended up unhappy with the result because this was discussed as a matter of opinion.

Fortunately, it’s possible to put facts on the table. W3C has issued guidelines for making web content more accessible, and these guidelines contain a formula for determining the readablilty of any combination of text color and background color. I think proper use of this formula would go a long way in ending readability discussions.

There are several web tools for determining if the readability is approved or not. I have not been able to find any iPhone, so I decided to write one myself.

Contrast for iPhone

Contrast for iPhone

Contrast for iPhone

Contrast for iPhone is an app that lets you enter the foreground color and background color and instantly receive a preview and a readability approval. You can enter the color in HSV, RGB or HEX values.

I personally think the best thing about this app is the bar that shows how far you are from meeting the requirements, and I think the best way of using the app is to apply a reasonable amount of fuzzy logic when deciding on the best color combination. Keep in mind that the formula is pretty strict about font sizes, and it doesn’t consider font faces at all, so I recommend using common sense if you are using very large or very small fonts, or fonts that are thinner or thicker than average.

I made this app and put the smallest possible price tag on it in order to learn by getting first hand experience about iOS development and iTunes marketing.

I hope you will like it, and if you do or don’t, please let me know below!

Get it on the AppStore

3 Responses to “Contrast for iPhone”

  1. Tweets that mention » Blog Archive » Contrast for iPhone -- Says:

    [...] This post was mentioned on Twitter by Snook. Snook said: Contrast for iPhone A colour contrast checker app. (I didn't build it; just passing it on) [...]

  2. thomas` Says:

    i got your contrast, and made a setting for all sizes and background on screen has not changed… how do you set it?

  3. Lasse Says:

    I’m quite not sure I understand your question, but here’s an answer to what I think you are trying to do:

    You are by default setting the foreground color (i.e. text color) when the app launches. If you drag the sliders or enter a hex number, the the color should change.

    To adjust the background color, you first have to press the segmented control button labeled “background color”. Any changes to the sliders from then on adjust the background color.

    The rating you get is for the combination of foreground and background colors.