Some individuals with visual impairments, brain injuries, or color blindness may find it challenging to determine the color making the text barely legible and images unrecognizable. Below are some quick color accessibility best practices for you to implement when curating content.
Ensure that text and graphics are understandable when viewed without color
- Avoid relying on color alone to convey a message.
- Consider using patterns and textures to show contrast instead of multiple colors for elements that require emphasis for graphs and charts.
- Add a text label, underline text to the clickable areas, or add a black outline around the images.
- Avoid text overlays on background images.
Break up low contrast colors with white space or dark space
- Use only a few colors to prevent confusion.
- Keep your color palette limited to 2 or 3 colors.
- Avoid too many colors, hues, and color combinations that may impact the ability to be seen by people with vision color deficiency.
Carefully select contrasting colors and shades
Avoid problematic color combinations
Some visual impairments, brain injuries, or color blindness may affect vision, therefore following low-contrast color combinations tend to present an accessibility issue when layered:
- Yellow & White
- Blue & Purple
- Green & Blue
- Light Green & Yellow
- Light Blue & White
- Blue & Grey
- Green & Grey
- Green & Black
- Green & Red
- Green & Brown
- "White" text on "Black" background may create a visual fuzzing effect called “halation” for some people with disabilities. It can also make some people with specific disabilities dizzy and cause blurry vision for a few minutes after trying to read small white text on black background.
- Some color blind individuals are lacking the capability to detect the lower color wave frequencies associated with red. For these users, red color waves read as "no signal", or "black". These users confuse red and black, so this contrast should be avoided whenever possible. Red and white is legible, but indistinguishable from black and white.
-
For example, yellow text on a white background would be considered low contrast and more difficult to read than black text on a yellow background which would have greater contrast. Users must be able to easily perceive the content of course documents and learning resources .
- When you avoid yellow and white combination, it helps all individuals because yellow is also the most fatiguing to the eye due to the high amount of light that is reflected.
Implementing accessibility best practices will improve accessibility for all audiences. Here is how you can manually test your color selections by uploading the content to a web-based Color Blind Vision Simulators and using Color Contrast Analyzers:
- Coblis is a free Color Blindness Simulator and look at what the content would look like through the eyes of people with different types of color blindness.
- Whocanuse web tool brings attention and understanding to how color contrast can affect different people with visual impairments.
- Color Oracle is a free color blindness simulator for Windows, Mac and Linux
- Color Contrast Checker - TPGi. is a downloadable color analyzer.
- Vischeck is a way of showing you what things look like to someone who is color blind. You can try Vischeck online- either run Vischeck on your own image files or run Vischeck on a web page. You can also download programs to let you run it on your own computer.