Ensuring Mobile Accessibility: Color Contrast

Accessibility in mobile devices is a necessity, as they are used by the majority of people every day. Smartphones have become an essential commodity. People with disabilities (PwD) depend on mobile devices to complete mundane tasks with regard to commerce, communication, transportation, and services.

Importance of Mobile App Accessibility

Seniors and people with impaired or low vision, color blindness, and cognitive disabilities like dyslexia have difficulty reading normally. When the color contrast is not optimal, text cannot be differentiated from the background, which strains the eyes. Lighting, glare, and other varied environments also affect readability. Good contrast in texts and other visual elements benefit everyone. Making mobile devices accessible is a necessity, as they have become the most used devices to communicate and access information. The user experience should be taken seriously. Accessible applications can be used by a wider audience, and it increases the download rates and market reach.

WCAG Conformance

Web Content Accessibility Guidelines (WCAG) 2.1 success criteria are not only for websites but also apply to mobile devices. Level AA conformance requires a contrast ratio of at least 4:5:1 (7:1 for level AAA) for all texts except

• Large-scale text: These can have a contrast ratio of 3:1 (4:5:1 for level AAA). Follow this only when text is 120 percent bold or 150 percent of the default platform size.
• Incidental text or images: These are inactive components or insignificant parts of images or for decoration.
• Logotypes: Text that is part of a logo or brand name.

Mobile Accessibility

Both Android and iOS have in-built accessibility settings that can be used to customize the color palette of the mobile device. The “Reduce white point” option can be used to change display brightness.

Filters—color-inverted, grayscale, grayscale-inverted, and low light—and light and dark modes of the display have to be tested for accessibility for each of those themes. The opacity of the text can make the color of the text lighter or darker, thus affecting color contrast. In some cases, text color changes according to user input, which again has to be checked. Mobile screens are different from websites when it comes to text sizing. Multiple viewpoints, font-weight issues, and text resizing in mobiles can affect color contrast and, therefore, text readability.

Mobile Accessibility Testing

Accessibility testing requires a range of mobiles with different OSs. Take screenshots of the phone to get the actual programmed colors, and upload them to a desktop to use desktop-only contrast ratio analyzers. There are automated color analyzers that can analyze hex codes for color contrast. However, they cannot analyze images of text or differentiate between background and foreground colors with images in between.

Amnet can be your accessibility partner. We offer the best digital accessibility services in conformance with ADA, WCAG, and Section 508. Speak with an expert.

Sources
1. https://www.w3.org/TR/WCAG21/#contrast-minimum.
2. https://www.deque.com/blog/testing-color-contrast-in-mobile-apps/.
3. https://www.deque.com/blog/accessibility-mobile-web-improving-color-contrast/.
4. https://www.levelaccess.com/part-2-colors-contrast-magnification/.
5. https://www.ministryoftesting.com/dojo/lessons/my-approach-to-mobile-accessibility-testing.