Southern New Hampshire University

Accessible Color Combinations

Updated on

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:

  1. Yellow & White
  2. Blue & Purple 
  3. Green & Blue 
  4. Light Green & Yellow 
  5. Light Blue & White
  6. Blue & Grey 
  7. Green & Grey 
  8. Green & Black
  9. Green & Red
  10. 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:

Previous Article Selecting Text Color Display in Microsoft Word
Next Article Check Gradients