Use High Contrast For Legibility

Maybe I am getting old but I am starting to pay much more attention to how easy it is to read text on mobile devices. Text size is important but the impact of color and contrast is often overlooked. You make it harder for a user to read text when you choose text and background colours with a low contrast ratio.

But what colors make text more legible for users? If you have a coloured button are you better having white or black text for the label? In this post I share some tips I picked up from an excellent Apple WWDC session on inclusive app design.

High Contrast for Legibility

It is the combination of small text size and low colour contrast that makes text hard to read. From the iOS Human Interface Guidelines:

Use sufficient color contrast ratios. Insufficient contrast in your app makes content hard to read for everyone. Icons and text might blend with the background, for example. An online color contrast calculator can help you accurately analyze the color contrast in your app, to ensure that it meets optimal standards. Strive for a minimum contrast ratio of 4.5:1, although 7:1 is preferred because it meets more stringent accessibility standards.

During WWDC 2016 session 801 they mention a downloadable tool for calculating contrast ratios but it does not seem to be available. Instead the session resources point to an online Contrast Ratio Calculator that I will use for the examples in this post.

Stop Hurting My Eyes

To show how contrast and text size impact legibility let’s start with a deliberately bad set of choices. I am using two UILabels to display a headline and body text. The headline text is 20 point bold and the body 14 point. Both text labels are light gray (r:170,g:170,b:170) on a magenta background (r:255,g:0,b:255).

Poor contrast

The text in this example is beyond what I can comfortably read on a device. If I plug the text and background colours into the contrast calculator you can see why:

Contrast ratio 1.3

The contrast ratio between the light gray text and magenta background is only 1.3:1 which is well below the Web Content Accessibility Guidelines (WCAG) recommendation to use at least 4.5:1 for text smaller than 18 point.

We can improve the contrast by using a darker background. Here is what it looks like with a plum (r:128,g:0,b:128) background:

Medium contrast

We have a better contrast ratio of 4.1:1 but as we can see from the contrast calculator there is room for improvement:

Contrast ratio 4.1

A ratio of 4.1:1 is fine for large text sizes above 18 point or 14 point if bold. Our body text is 14 point with a normal weight so this is still a fail. We have three choices - change the colour, increase the font size or use a bold font. My preference is to replace the problematic light gray with white text. This has a big impact on legibility (using dynamic type sizes to allow the user to increase the font size would also be a good idea):

High contrast

Our contrast ration is now 9.4:1 which is enough to earn us a AAA rating:

Contrast ratio 9.4

Button Colours

The contrast calculator makes it easy for us to answer the question about which colour is best in a given situation. Suppose I have a green button. Am I better with white or black for the label?

Button Text

The green button background image is a gradient so I will use the mid-point which is r:32,g:250,b:91. The contrast ratio calculator gives us a poor score of 1.4:1 for white text:

White text on green

Using black text we get an excellent score of 14.9:1:

Black text on green

So the answer in this case is to use black text.

Hints and Tips

Some further hints and tips from the WWDC session:

Summary of Recommendations

The WCAG recommendations you should aim for:

Note that these are the least you should achieve the Apple HIG recommends a preferred target of 7:1 for greater legibility.

Further Reading

Never miss a post!

iOS Size Classes Cheat Sheet

Subscribe and get my free iOS Size Classes Cheat Sheet

Unsubscribe at any time.
No time to watch WWDC videos?

Sign up to get my iOS posts direct to your inbox and I will send you a free PDF of my iOS Size Classes Cheat Sheet.

Unsubscribe at any time.
Archives Categories
comments powered by Disqus