This free tool lets you view your brand colours in combination with each other to assess their accessibility compliance. This tool is optimised for desktop, but can be used on a mobile device.

Instructions

Add your brand colours

  • Choose the colour from the picker or enter the Hex code.
  • Label it as Primary, Secondary or Tertiary (optional).

  • Mark it as a candidate to use as a text colour (optional).

  • Reorder and edit your colours as necessary.

Review the Colour Contrast Grid

  • Columns are foreground colours.
  • Rows are background colors.
  • Each cell displays a preview with passing accessibility contrast scores.

  • Hover over the cell to view all accessibility contrast scores (including failures).

A basic live preview is provided below the table to view the color combinations in use, and varies based on your color order and what you labeled as text candidates.

For a quick demonstration, hit the Surprise Me! button a few times.