Accessibility for Mobile Web: Improving Color Contrast

Color contrast is a hot topic in the area of accessibility testing. And often overlooked, are accessibility color contrast best practices specific to mobile web. Let’s start by diving into the web content accessibility guidelines, also known as WCAG, and the success criterion related to contrast minimum. We will also dive into things web designers should keep in mind when designing and review which tools they can use to analyze the color contrast of their designs.

Follow along here in my recorded walk-through if you’d like:

WCAG 2.0 and Color Contrast

In WCAG 2.0, the Web Content Accessibility Guidelines from the W3C, the AA success criterion that related to color contrast is 1.4.3. This SC reads “contrast minimum, the visual presentation of text and images of text has a contrast ratio of at least 4.5 to 1 except for the following”:

• Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3 to 1;
• Incidental: if the text or images of text are part of an inactive user interface component that is pure decoration, that is not visible to anyone, or that are part of a picture that contains significant other visual content, they have no contrast requirement.
• Logotypes: text that is part of a logo or brand name has no minimum contrast requirement.

Let’s review large text, which could refer to 18 point or 14 point bold, or a font size that would yield equivalent. Be sure to note that the point scale was for print back in the day. Now, we’re dealing with the web and designers must look at scale in terms of pixels, percentages, and EMs. In summary, 18 point and 14 point sizes do not equate to 18 pixels and 14 pixels. Pixel size is even more relevant when designing for mobile. The environment plays more of a role, for example, there could be the different lightings. You could go to a restaurant with dim lighting or outdoors, with sun and brightness.

Automated Tools for Analyzing Color Contrast

One way to find color contrast ratio is through automated tools. For example, Deque’s aXe tool does a very good job analyzing what’s termed as hex code. Any automated tool that works well for you will likely do a really good job of analyzing hex code. One challenge of automated tools occurs when there is background color and a foreground color, but there is an image in between. That image could be a decorative image or it could be a gradient. Images of text also pose a challenge for automated tools. In this case, one should rely on an eyedropper tool.To use aXe, right-click inspect element to analyze the page. The report may say elements do or do not have sufficient contrast.

Designers: Things to Note

One thing to note, if it’s 18 point or 14 point bold, the contrast ratio must be only 3 to 1. In any other situation, the contrast ratio must be a minimum of 4.5 to 1. It is also important to note that designers may change the opacity of the text. In that case, the hex code may be one color but the opacity may have changed, making the color appear to be a lighter color. Furthermore, text and images should be analyzed with an eyedropper tool to analyze the pixel of the text as the foreground and the image as the background. Once you click the pixel you want to analyze, it will copy the hex code to your clipboard.

Types of Tools to Use

WebAIM is one website that allows you copy and paste hex codes to analyze the color contrast ratio. Tanaguru is another great contrast tool. This tool allows you to manipulate the two colors you are checking and adjust the maximum ratio. It is often the case that designers will not know how to fix failing color contrast, and a lot of times the colors that they’re using are branded type colors. In that case, the best thing the subject matter experts will say that it fails, but in the end branded color is an exception. This tool will let them use the color they prefer and manipulate it to get as close to 4.5 as possible.

Recap: Mobile is Dependant on the Environment

It is important to keep in mind too with mobile and the way mobile screens work there’s a whole other realm of text sizing. Be aware of those type things. For example, different viewports and different mobile devices have font weight issues that are relevant to accessibility. Text resizing is another factor that plays into color contrast and readability. This video is a brief overview of how designers can fix color contrast issues and which tools they can use. I also touched on a few things designers should look out for when designing for mobile web interfaces. Below are a few helpful links to help you in your future testing and design:

• Font Size Conversion Tool
• Tanaguru contrast finder
• WebAIM Color Contrast Checker
• axe
• CB’s good and bad examples of color contrast

Feel free to leave your comments at the bottom, ask questions, I’d love to hear them.