How to Design iOS Buttons that Pass Color Contrast

Color is a great way to impart vitality, provide visual continuity, communicate status information, give feedback in response to user actions, and help people visualize data. Insufficient contrast in your app makes content hard to read for everyone. Icons and text might blend into the background, for example. Let’s dive deep into color contrast and how to make your app more accessible with colors. Follow along with the video below if you’d like:

What is color contrast?

Having an acceptable color contrast just means that any visible text in your app can be seen clearly by any user, even people with low vision or with color blindness. You want to ensure that when you’re designing your app that the background colors do not interfere with the text in front of it. I’m sure we’ve all run across apps and websites where you can’t read the text because the background color and the text color are too similar, or the background color is as saturated as its text color (such as, bright red text against a bright blue background). So, at what point is there a good enough contrast between the text and its background where it can be called accessible? And, how do we make sure that text is readable by everybody, including those with low vision or with color blindness?

If you’ve heard of WCAG, the Web Content Accessibility Guidelines set by W3C, they have a specific guideline (WCAG 1.4.3) to help ensure that text can be readable for people with low vision or color blindness. This guideline requires a 4.5:1 color contrast ratio with text and its background. Large text must have a 3:1 color contrast ratio (where Large Text means 14+ pt bold, or 18+ pt regular).

Color Contrast Demo: How to Test Color Contrast in Mobile Apps

I created a demo application with three examples of different color contrasts. The first example has poor color contrast (dark gray text with black background), and the last example has good color contrast (light gray text with black background). The second example shows an iOS Button with default text color against a white background, which, interestingly enough, does not meet WCAG criteria! For the sake of this blog post, I will focus on this example.

There is a specific algorithm that WCAG uses to determine the color contrast ratio. There are many programs and websites out there that will calculate the color contrast ratio for you, so hopefully, you will never have to directly implement the algorithm yourself. For this demo, I am using a program called Colour Contrast Analyzer. This program, as well as many other programs, asks you to select text and background colors, either by manually typing them in (as hex or RGB values), or by manually selecting the colors with a color picker. In this demo, I chose to use the color picker on my iPhone Simulator. To accurately get the color using the color picker, you want to pick the lightest pixel in the text, and the darkest pixel in the background (or vice versa if the text is dark and the background is light). As it turns out, the iOS Button previously mentioned has a color contrast ratio of 3.7:1 — this is lower than WCAG’s criteria of 4.5:1.

How to Design Buttons that Pass Color Contrast

If you find that your color scheme does not meet WCAG criteria, there are a few ways to fix this. The simplest way, if you don’t have any specific design regulations, is to simply change the color of any text that does not pass 4.5:1 (or 3.0:1 for Large Text). However, if you have design constraints, you can use an accessibility feature specifically for iOS called Darken Colors.

To try Darken Colors, go to Settings > General > Accessibility > Increase Contrast. The Darken Colors setting should be the second item on this page (after Reduce Transparency). If you turn it on, you will immediately see the Back Button in the top left corner change to a darker color. This is the expected behavior for this setting, and the behavior that you want in your app.

In order to take advantage of this accessibility setting, we have to do some code.

First, in your ViewController class, create some IBOutlets for the views that you want responding to the Darken Colors setting (if you have not already). In this case, I want the text color of my iOS Button to change when Darken Colors is on.

0

1

2

@IBOutlet weak varbutton:UIButton!

In the ViewController’s viewDidLoad() function, add a Notification Center Observer, and listen for the Notification UIAccessibilityDarkerSystemColorsStatusDidChange. It’s a very long name, but hopefully, Xcode will auto-complete that for you. The viewDidLoad() function should now look similar to this:

Next, write a function (in this case, I named it darkerColorsChanged), where, if UIAccessibilityDarkerSystemColors is enabled, darken the text’s color, or else, change the text back to its original color.

Finally, make sure to call this function in viewDidLoad(); otherwise, a user of your app who always has Darken Colors enabled on their phone will only see your default color scheme instead of your color scheme specifically for Darken Colors.

Now, all you have to do is test it out! Load the app on your device or simulator and go to the Home screen. Then click on Settings > General > Accessibility > Increase Contrast, and tap on “Darken Colors.” Your text should now be a darker color!

Conclusion

That’s all that there is to it — it’s not too bad. Changing colors might be a small change, but it is a great help for many people, especially as people age. Eight to ten percent of the population has some sort of color blindness, so the more you can to do help, the better. If you want to learn more about iOS accessibility, you can try our free trial of an iOS framework that’ll help you with accessibility. If you have any questions about the product or how to run the free trial, feel free to contact us, our experts are always willing to help.