Colour Contrast Checker (WCAG)

However beautiful your brand colours are, if the text can't be read the design isn't doing its job. This tool calculates the contrast ratio between text and background colours and shows whether it passes the international accessibility standard WCAG.

What do the results mean?

• AA (normal text) – 4.5:1: the accepted minimum for websites.
• AA (large text) – 3:1: for text around 24 px and up, or 19 px bold headings.
• AAA – 7:1: the highest readability; ideal for long text.

FAQ

Why does contrast matter?

Low contrast makes text unreadable for people with visual impairments, on phones in sunlight and on low-quality screens. Text and buttons people can't read mean lost customers.

What if my brand colour fails?

You don't have to change it entirely. The tool suggests the closest lighter or darker shade of the same colour that passes; use that for text and keep the main colour for large areas.