Designed and developed by tech360, the AODA Colour Contrast Tool helps you select and test colour palettes for AODA compliance.
Colour contrast ratios are calculated dynamically as you enter or select colours to give you a “GO” or “NO-GO” on the colour combinations.
- To change the colour name, edit the name in the palette and it will be updated in the table automatically.
- To change the colour, click on a colour block in the palette to open a colour chooser, or type in the hex value.
- To rearrange the colour palette, click and drag on the “handles” at the top-left of each colour card.
- AODA contrast ratios in the main chart are updated automatically as you try different colours.
- A green ✔ indicates the foreground and background colour combination passes the AODA contrast ratio requirements.
- A red ✗ means the colour combination does not pass AODA.
- Click on any result cell to see samples of the colour combinations.
WCAG 2.0 Definitions
Level 1: AA-Large requires a minimum contrast ratio of 3:1 and large text (14pt-bold/18pt-regular and larger).
Level 2: AA requires a contrast ratio of 4.5:1 or higher for all sizes of text.
Level 3: AAA-Large requires a minimum contrast ratio of 4.5:1 and large text (14pt-bold/18pt-regular and larger).
Level 4: AAA 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.