Designing for everyone

Colour contrast and colour blindness

You must make sure that the contrast ratio of text and interactive elements meets Web Content Accessibility Guidelines (WCAG 2.2) success criterion 1.4.3 Contrast (minimum) level AA.

Testing colour contrast

You will need to use a tool like WebAIM: Contrast Checker. You should:

1. Find the colour code of your background and foreground colours, for example #006726. You can usually find the colour code using your program’s colour picker. If that doesn’t work, take a screenshot, paste it into Paint, and use Paint’s eyedropper tool to get the code.
2. Paste the 2 colour codes into your contrast checker tool.
3. The contrast checker will tell you whether it meets AA and AAA standards for normal and large text, and for graphical objects and user interface components.

Colour testing tools

• WebAIM’s colour contrast checking tool
• Coblis colour blindness simulator
• Brandwood colour contrast checker for text on a background image
• Contrast Finder, find correct color contrasts for web accessibility (WCAG)