Accessibility for Visual Impairment
Background Information
At KP, we believe good accessibility is good usability. We want every product to be usable by all of our members. Much of our design focuses on making applications accessible to impaired users. The following case study examines some statistics about impaired mobile device users and provides in-depth analysis about visual impairments.
How Many People?
A high percentage of people self-report physical impairments, even if they are not diagnosed. See the table below for a reference on US adults with self-reported impairments, by age group:
Sources: CDC (2015), National Health Interview Survey (2014), Wiser Usability (2016)
Visual Impairment Examples
Visual impairments can cause blind spots, reduced visual acuity, double vision, hallucinatory images, increased glare sensitivity, reduced contrast sensitivity, reduced or distorted color sensitivity, and a variety of other symptoms. The following examples illustrate what a person with a specific type of visual impairment might see. These images are approximations and are meant for learning purposes only.
Color blindness
- Red-green: loss or limited function of red or green cone, resulting in color distortion.
- Blue-yellow: loss or limited function of blue cone, resulting in color distortion.
- Complete: does not experience color at all.
Normal
Red-Green
Blue-Yellow
Macular Degeneration
Leading cause of visual impairment among older people. Causes blurred, distorted, or dim vision or a blind spot in the center of the visual field.
Mild
Medium
Severe
Cataracts
Cataracts affect more than 50 percent of all adults by age 80. A condition in which the lens of the eye becomes cloudy or opaque causing images to appear blurred or fuzzy and colors to seem faded.
Mild
Medium
Severe
Glaucoma
Disease in which the pressure of the fluid inside the eye is too high, resulting in a loss of peripheral vision. The increased pressure can damage the optic nerve and eventually lead to blindness.
Mild
Medium
Severe
Diabetic Retinopathy
Eye condition that results from the damaging effect of diabetes on the circulatory system of the retina. When blood vessels leak or break, it distorts the vision.
Mild
Medium
Severe
Sources: National Eye Institute (2016), American Foundation for the Blind (2016), Chromatic Vision Simulator App (2015), Braille Institute Vision Sim App (2013)
Visual Impairment Design Solutions
How can we design good experiences for our visually impaired users? Using ADA best practices will help us to create mobile products that every KP member can use.
- Using High Contrast – As a rule of thumb, aim for 4.5+ contrast ratios on all your text, icons, and images. Provide ways to adjust color contrast, or err on the side of higher contrast colors.
- Use More Than Just Color – Color is a great way to indicate selection, active/disabled states, and draw attention. However, for color-blind users, this visual communication may be lost. Therefore, always use multiple visual communications to supplement color. This could include underlining, bolding, size differences, and animations. Color cannot be your sole indication.
- Use Color Well – Be cautious with red vs. green, blue vs. green, and with blue and yellow close to each other.
- Use Large Fonts – The minimum font size for ADA is 13pt. However, it is always best to use larger font sizes when possible. When in doubt, go bigger! Think of a use-case in which a user may be walking outside on a sunny day with lots of screen glare, and pick font sizes that work well in that situation.
- Plain Backgrounds – Whenever possible, put your text on a flat color background. Avoid having text that overlays patterns or complex imagery.
- Code For Screen Readers – Make sure every element on the screen has a label that makes sense for a screen-reader. Also make sure that there is a logical flow to the sequence that a screen reader would read each element.
- Code For Re-sizing Text – Code layouts and font-sizes to allow the user to increase the text size to their preference.
Using these guidelines we can develop accessible applications and bring widely usable products to our members.
Want to learn more? Check out these case studies below:
 |
Accessibility Scanner Using Google Accessibility Scanner to ensure that KP mobile products meet minimal Americans with Disability Act (ADA) standards. |
 |
Cardiac Rehab Android Watch How accessibility affects product design for wearable devices. |
 |
Touch Target Accessibility Ensure your touch target sizes are large enough for ease of use. |