Color Contrast Matrix

Instructions

Select a color from the color picker (left) or enter a hexadecimal color in the input field.

  • Ensure to enter 6-character hexadecimal values, prefixed with a "#".
  • Comma-separated lists are accepted.
  • Duplicate or invalid entries will be removed.

About

This tool was created to help designers and developers compare multiple colors for contrast at the same time.

WebAIM's Contrast Checker is a great tool if you wish to only compare two colors. However, styleguides tend to define many colors, and experience showed that designers do not take the time to check them all one by one for contrast.

This tool was built in order to make accessibility considerations a habit for designers. When a tool is easier to use, it's more likely to be adopted, and eventually create a habit.