The AODA Colour Contrast Checker by tech360

About:

Designed and developed by tech360, the AODA Colour Contrast Tool helps you design and test entire colour palettes for WCAG 2.1 compliance on one screen. Instead of checking only one or two colours at a time, you are able to set up your entire palette of colours to review and adjust values on-the-fly. Color contrast ratios are updated in real time as you adjust your colours to give you a “GO” or “NO-GO” on your colour combinations.

Instructions:

• To change the colour, click on a colour block in the chip to open a colour picker, or type in the hex value directly.
• The colour contrast ratios are displayed in the “colour dots” and are updated automatically as you try different colours.
• Click on any colour dot to see an example of the foreground and background colour combinations.
• To change the colour name, edit the name in the colour chip and it will be updated in the results automatically.
• To rearrange the order of the colour chips, click and drag on the “handles” at the top-left of each colour card.
• The four result boxes dynamically show WCAG pass or fail results for (left to right):
  • Level AA – Large text (minimum 14pt bold or 18pt regular text)
  • Level AA – Regular text (all sizes and weights of text)
  • Level AAA – Large text (minimum 14pt bold or 18pt regular text)
  • Level AAA – Regular text (all sizes and weights of text)
• A green box with a ‘✔’ indicates if the foreground and background colour combination pass the WCAG colour contrast ratio requirements.
• A red box with an ‘✗’ means the colour combination does not pass WCAG specifications.

WCAG 2.1 Definitions

Level AA – Large requires a minimum contrast ratio of 3:1 and large text (14pt-bold/18pt-regular and larger).
Level AA – Regular requires a contrast ratio of 4.5:1 or higher for all sizes of text.
Level AAA – Large requires a minimum contrast ratio of 4.5:1 and large text (14pt-bold/18pt-regular and larger).
Level AAA – Regular requires a contrast ratio of 7:1 or higher for all sizes of text.

Large text is defined as 14 point bold (typically 18.66px) or larger, or 18 point regular (typically 24px) or larger.

W3C Web Content Accessibility Guidelines (WCAG) 2.1