Free colour contrast checker (WCAG)

How to use it

1. Enter the text or icon colour and the background colour, as a hex code such as #ff6600 or as rgb(255, 102, 0). You can also use the colour pickers.
2. Read the ratio and the pass or fail for each level. AA is the usual target for websites.
3. If normal text fails, pick one of the suggested colours and click Use this.
4. Check the UI line as well: icons, input borders and focus outlines need 3:1 against what is next to them.

What is WCAG?

WCAG, the Web Content Accessibility Guidelines, is the W3C standard for making websites usable by people with disabilities. The current version is WCAG 2.2. Each rule, called a success criterion, has a level: A is the minimum, AA is the level websites usually aim for, and AAA is stricter. W3C does not recommend requiring AAA for an entire site, because some content cannot meet every AAA rule.

Colour contrast is one of the easiest rules to check and one of the most often missed. It matters to anyone with low vision or colour blindness, and to everyone reading a phone outdoors on a bright day.

The WCAG colour contrast rules

Contrast is measured as a ratio from 1:1 (the same colour twice) to 21:1 (black on white), using the relative luminance formula in the WCAG standard. This checker uses that formula. Three success criteria apply:

• 1.4.3 Contrast (Minimum), level AA: at least 4.5:1 for normal text and 3:1 for large text.
• 1.4.6 Contrast (Enhanced), level AAA: at least 7:1 for normal text and 4.5:1 for large text.
• 1.4.11 Non-text Contrast, level AA: at least 3:1 for the parts of buttons, inputs and icons that people need to see to use them, and for focus outlines, measured against the colours next to them.

The ratio is not rounded. W3C's guidance says a value such as 4.499:1 does not meet 4.5:1. In practice, grey #777777 on white comes to 4.47:1 and fails, while #767676 comes to 4.54:1 and passes.

Some text is exempt: logos and brand names, text in disabled controls, and purely decorative text. Placeholder text inside form fields is not exempt, which catches many contact forms out.

What counts as large text in WCAG?

WCAG defines large text as at least 18 point, or at least 14 point in bold. W3C's Understanding 1.4.3 page puts these at roughly 24px and 18.5px in CSS. So a 16px bold label is still normal text and needs 4.5:1, while a 24px heading only needs 3:1.

Very thin or decorative fonts can look smaller and fainter than their size suggests, so give them more contrast than the minimum.

Colour contrast and accessibility in Singapore

Singapore government agencies follow GovTech's Digital Service Standards, which incorporate WCAG Levels A and AA. The standards say agencies and their industry partners are expected to apply the relevant requirements, so if you build or run a digital service for a government agency, ask which ones apply to your project.

GovTech also publishes Oobee, an open-source tool that scans web pages for accessibility issues and suggests fixes. A scanner like Oobee finds problems across your pages, and this checker helps you try out a fix for one pair of colours.

For a business website, WCAG AA is a sensible target even where nothing requires it. Readable text helps older customers and anyone on a small screen in bright light, and it is far cheaper to choose passing colours while designing than to change a brand palette after launch.

Common brand colour problems

Orange buttons with white text. White on a bright orange such as #ff6600 Aa comes to 2.93:1, which fails even the 3:1 for large text. A deeper orange such as #c2410c Aa reaches 5.17:1 with white. Another fix is dark text on the bright orange: near-black #0b0b0c on #ff6600 Aa gives 6.7:1.

Bright greens and yellows. White on a light green such as #25d366 is under 2:1. These colours work well as backgrounds for dark text, or for large shapes and icons that only need 3:1.

Light grey body text. #999999 on white is 2.84:1. Grey text looks refined in a mock-up but is hard to read in long paragraphs. #767676 is about the lightest grey that passes AA on white.

Text over photos. A hero banner can pass in one corner and fail in another. Test the lightest part of the image behind the text, or add a dark overlay so the contrast stays steady.

When your brand colour fails, you rarely need a new brand. Keep it for large headings, backgrounds and graphics, and use a deeper shade of the same hue for small text and buttons. The checker's suggestions work the same way: they keep the hue and change only the lightness.