Charts and graphs will likely be included in some of the presentations you will be creating. Use the design guidelines outlined on this page to ensure that persons with color-blindness, low-vision, and photophobia will be be able to access them.
Color Oracle: Simulates color blindness
Web Aim: an Accessible Design Web Checker
Color Picker: This an be used to meet the legal requirements for contrast
Contrast is a often overlooked but important aspect of ensuring access to information for persons with low vision.
Color does not exist in a vacuum. It's profoundly affected by the environment in which it finds itself. Color combinations that hold up in a variety of conditions utilize high contrast to each other and their surroundings.
According to the National Institute of Health (external link), Low Vision is defined as 20/40 or worse vision with best possible correction. It affects approximately 1% of the population. Causes can include: Age-related macular degeneration (AMD), Cataracts, Diabetic retinopathy, Glaucoma, and Genetics.
Low contrast graphics can make it difficult for persons with low vision to access information in media.
Substrate Variation
High C = high contrast
In the case of printing ink on paper, the type of paper can profoundly influence the color. On the left, in the image above, vibrant colors are obtained using high-gloss paper. On the right, colors are subdued dramatically when applied to matte paper such as newsprint.
Light Variation
Low C = low contrast
The digital display on the left demonstrates the color dulling effect of a low-light-energy-saving mode. On the right, glare from direct sunlight can wash out the brightest digital display.
The text should be high contrast against its background (light on dark or dark on light). Use the Wave Contrast Checker (external link) . To ensure it is between 4.5:1 and 16:1 (over 16:1 cause issues for person's with light sensitivity.
Go to the text part of the I-SEE-U Blueprint to get techniques for making your contrast function for all people.
Go to the Image part of the I-SEE-U Blueprint to get techniques to make your images accessible.
Review this video for an example of image contrast needed and how to use the WebAim Color Picker
Aim for 3:1 contrast ratio for important images.
These can cause vibration, blurring, and physical discomfort for persons with photophobia. According to the National Library of Medicine of the NIH (external link),
Photophobia is a common yet debilitating symptom seen in many ophthalmic and neurologic disorders. It is estimated by the NIH that up to 20% of the population may be affected during their lifetime. It is defined as an abnormal sensitivity to light, especially of the eyes, and is reported in most all forms of migraine and many neuro-ophthalmic disorders.
This image demonstrates the use of highly saturated colors (on the left) and their effect on persons with photophobia. The colors on the right demonstrate the maximum 'safe' saturation.
4.5% of the population is color-blind may not be able to distinguish between colors. Always include text adjacent to the graphics. To check for color-blind efficacy, you can use the Color Oracle Simulator A native app for MAC and PC that simulates colorblindness for anything currently showing on a display (external link). (free)
Original image
Original red-green color-blind simulation
Original gray-scale simulation
Adjusted image
Adjusted red-green color-blind simulation
Adjusted gray-scale simulation
Note: Color should never be the primary differentiator. Moving the letters directly under the bars, made them primary and the colors secondary.
1
Applying color to images and graphic layouts that responds to every color-ability requires assessing colors by the attention they will attract across that spectrum. This includes four types of color-blindness as well as both digital, and print color production systems.
The I-See-U Universal color palette adjusts the saturation of colors to reflect the attention they will have across the red-green and blue-yellow color-blind spectrums.
It adjusts reds and greens to be less saturated so images will be optimized for both red-green color-blind and full-color sighted persons. It approaches color in terms of the attention it brings versus its hue, saturation, or brightness.
The most saturated colors have also been toned down within the range that can be achieved with offset (CMYK) printing.
I-See-U Universal Palette
Red-Green Color-blind Simulation
Full Color Palette for print & web
These are meant to be starting colors. As your image composition evolves, there are several additional methods that can be employed to add customization while maintaining the desired signal and noise balance.
There are many colors that exist between the swatches shown that can be created.
Yellows and Blues can be more saturated or desaturated as desired.
Greens and reds can only be desaturated.
Cyans, magentas, yellow-greens, and oranges can be slightly saturated or desaturated.
Perform constant contrast and red-green color-blind testing as adjustments are made with the tools listed on the Color Tools page (external site).