Skip to main content

Color Contrast

Some users may experience difficulty with colors that are either very close in contrast or because of color blindness. To prevent this difficulty it is important to create a good contrast between colors so they can easily be differentiated.

👍 Do's​

  • Use color blindness filters — This will help you to check if your page is compatible for the different types of color blindness.
  • Add proper text styling over images — Images have possibly many different colors. Make sure text is readable over these images when there is a background image.

👎 Don'ts​

  • Don't use colors that are too close near each-other — People with colorblindness will have difficulty telling the colors apart.
  • Don't use only colors to convey meaning — People with colorblindness will have difficulty understanding this. Implement other elements of conveying meaning as well.

Plugins/Tools​

  • Stark Accessibility Checker. This tool can be used to check color contrasts and has colorblindness features. This tool does require an account for most features and some are paid for.
  • Adobe or WebAim to check color contrasts depending on WCAG standards.