Accessibility In Design
There are requirements to enable apps to work for users with hearing, sight and other disabilities. This section details the requirements and provides resources to ensure compliance.
Topics:
Background
It is important to follow KP’s accessibility requirements in order to comply with the many Acts and Laws that are defined below:
Section 508 Amendment to the Rehabilitation Act of 1973.
The Americans with Disabilities Act (ADA) is one of America’s most comprehensive pieces of civil rights legislation. It prohibits discrimination and guarantees that people with disabilities have the same opportunities as everyone else to participate in mainstream American life.
The ADA requires that medical care providers for federal agencies, or contractors of federal agencies (i.e. Medicare), make their services available in an accessible manner. As a medical service provider, Kaiser Permanente is committed to providing equal access for members (and their companions) and our workforce with disabilities.
Section 1557 is the nondiscrimination provision of the Affordable Care Act (ACA). The law prohibits discrimination on the basis of race, color, national origin, sex, age, or disability in certain health programs or activities.
Kaiser Permanente also has its’ own national policy on accessibility that can be found here.
Guidelines
There are three main areas for accessibility in design: text size, text contrast ratios, and non-text (icon, button shape, image, etc.) contrast ratios. See the Specification Table following this summary for font size and contrast ratio requirements.
- Text size:
- There are minimum text size requirements for all displayed text.
- Minimum text size requirements are often not optimal. Using larger sizes makes your app easier to read for all users.
- Text contrast ratio:
- All text and images of text must meet minimum contrast ratios.
- KP suggests increasing the contrast ratio for certain user populations and environments. This includes, elderly, diabetic, and active users.
- Non-text contrast ratio:
- Non-text elements, such as icons or button shapes, require a minimum contrast ratio.
- Non-decorative images, such as instructional images and images with text, have a minimum contrast ratio requirement.
- Disabled items contrast ratio:
- Disabled (not active or actionable) text and non-text items have a minimum contrast ratio requirement that is lower than enabled items.
Specification Table
These specifications are required at default accessibility settings on Android and iOS devices. It is also required that applications are coded to respond to user adjustments in the system accessibility settings. The specifications below represent minimum requirements, but the MCoE recommends surpassing the minimums for better readability and usability.
To see example images of the requirements please see the Design Examples section below.
Your mobile application must implement the following minimum requirements to pass MCoE Certification:
| Text | Required minimum size | Required minimum contrast |
|---|---|---|
| Legal text | 9pt | 4.5 : 1 |
| Small text | 13pt (normal, semi-bold) |
4.5 : 1 |
| Bold text | 14pt (bold) |
3.0 : 1 |
| Large text | 18pt (normal, semi-bold) |
3.0 : 1 |
| Non-text elements | Info | Required minimum contrast |
| With supporting text | Non-text elements that have supporting text. (icons, button shapes, etc.) |
3.0 : 1 |
| Without supporting text | Non-text elements that do not have supporting text. (icons, button shapes, etc.) |
4.5 : 1 |
| Images | Instructional images and images with text. | 4.5 : 1 |
| Disabled items | Info | Required minimum contrast |
| Disabled text | Text that is not active/actionable. (disabled forms, button text, etc.) |
2.0 : 1 |
| Disabled non-text elements | Non-text elements that are not active/actionable. (disabled tabs, button shapes, etc.) |
2.0 : 1 |
Utilizing higher contrast ratios can be beneficial for certain user populations or under certain working conditions. The following suggestions will help your app be more usable for everyone:
| User population | Info | Suggested minimum contrast |
|---|---|---|
| Elderly | Users 70+ years old | 7.0 : 1 |
| Visually impaired | Users are diabetic | 7.0 : 1 |
| Outdoor or active | High screen glare, active movement | 7.0 : 1 |
Resources
KP Learn – Understanding Accessibility in Mobile Applications
This course is a general introduction to accessibility for project teams responsible for developing mobile applications. The purpose of the course is to increase awareness of the different types of disabilities and the barriers faced by individuals with disabilities. The course also covers Kaiser Permanente’s legal and moral responsibilities and when in the product development life cycle you should consider accessibility.
Take the Understanding Accessibility in Mobile Applications KP Learn Course.
KP Learn – Accessible Design for Mobile Applications
This course is for application designers. Its purpose is to refresh your knowledge of potential design barriers for people with disabilities and to increase your skills in planning, designing, and testing for accessibility in mobile applications.
Take the Accessible Design for Mobile Applications KP Learn Course.
Image Contrast and Labels (Native Mobile)
This PowerPoint provides guidance for contrast minimums and alt tag usage.
Review the Image Contrast and Labels (Native Mobile) PPT.
WCAG Contrast Checker
To check the contrast of your colors, use an online tool like this WCAG Contrast Checker.
Color Palettes
View all color palettes recommended and approved by the Brand Center and MCoE Design Team.
View Color Palettes
Contrast Overview Document
For detailed information about Contrast, please review the Contrast Overview document on the MCoE Mobile Accessibility Resources repository
Accessibility Checklist
For a complete list of Accessibility requirements please see our Accessibility Checklist.
Accessibility for Visual Impairment Case Study
For an in-depth examination of Accessibility for Visual Impairment, please check out our Accessibility for Visual Impairment Case Study.
Digital Accessibility Program
For the most information on Accessibility at KP, please refer to the Digital Accessibility Program Resources page. If you have specific questions after reviewing all the materials available, contact Mark Stimson, KP’s Accessibility Analyst Consultant.
Design Examples
For an in-depth examination of Accessibility for Visual Impairment, please check out our Accessibility for Visual Impairment Case Study. The following examples highlight important mobile design accessibility topics and identify common defects and the correct implementations.
Video about Color Contrast
This video offers a concise explanation of why contrast is important and how to apply it.
Contrast Ratio
The minimum contrast ratio for text size larger than 18pt (or 14pt bold) is 3.0:1.
Font Size
The smallest ADA compliant font size is 13pt. This applies to all text in the app, even text within images.
Tab Bar Contrast Ratio
The minimum contrast ratio for text size of 13pt minimum is 4.5:1.
Text Over Image Contrast Ratio
The minimum contrast ratio for text size of 13pt minimum is 4.5:1.
Field Labels Contrast Ratio
The minimum contrast ratio for text size of 13pt minimum is 4.5:1.
Dropdown Menu Text Contrast Ratio
The minimum contrast ratio for text size of 13pt minimum is 4.5:1.
Disabled States of Buttons and Functionality
Disabled buttons must be a minimum of 2.0 contrast. The disabled button on the left is not ADA compliant. Once the button is enabled, then standard ADA guidelines are in effect. The enabled button on the right is ADA compliant.
