Inclusive ADA UX Mobile App Design - Principle 2
2. FOCUS ON COLOR CONTRAST
Mobile devices are more likely than desktop/laptop devices to be used in varied environments, including outdoors, where glare from the sun or other strong lighting sources is more likely. This scenario heightens the importance of use of good contrast for all users, and may compound the challenges that users with low vision have accessing content with poor contrast on mobile devices.
The WCAG 2.0 success criteria related to the issue of contrast are as follows:
? 4.3 Contrast (Minimum) (Level AA) which requires a contrast of at least 4.5:1 (or 3:1 for large-scale text) and
? 4.6 Contrast (Enhanced) (Level AAA) which requires a contrast of at least 7:1 (or 4.5:1 for large-scale text).
SC 1.4.3. allows for different contrast ratios for large text. Allowing different contrast ratios for larger text is useful because larger text with wider character strokes is easier to read at a lower contrast. This allows designers more leeway for contrast of larger text, which is helpful for content such as titles.
The ratio of 18-point text or 14-point bold text described in the SC 1.4.3 was judged to be large enough to enable a lower contrast ratio for web pages displayed on a 15-inch monitor at 1024x768 resolution with a 24-inch viewing distance. Mobile device content is viewed on smaller screens and in different conditions so this allowance for lessened contrast on large text must be considered carefully for mobile apps.
For instance, the default point size for mobile platforms might be larger than the default point size used on non-mobile devices. When determining which contrast ratio to follow, developers should strive to make sure to apply the lessened contrast ratio only when text is roughly equivalent to 1.2 times bold or 1.5 times (120% bold or 150%) that of the default platform size. Note, however, that the use of text that is 1.5 times the default on mobile platforms does not imply that the text will be readable by a person with low vision.
People with low vision will likely need and use additional platform level accessibility features and assistive technology such as increased text size and zoom features to access mobile content.
See above (in the header image) for a visual example of what to do and what not to do when designing with a focus on color contrast.
Text legibility is preserved by an adequate contrast between the font color and the background. For AA compliance, text should have color ratio of at least 4.5:1 (larger text at least 3:1).
Download: Free Inclusive ADA UX Mobile App Accessibility Principles
https://info.usablenet.com/inclusive-ada-ux-mobile-app-accessibility-principles
__________________________________________________________________________
Jason C. Taylor is the Chief Innovation Strategist and Advisor to the UsableNet CEO with nearly 20 years of experience in usability and accessibility. He is a global technology thought leader for multichannel customer engagement, actively advising leading companies on how to extend their brands across multiple channels for all users.