When should I use Colour Contrast Checker for accessibility testing?

Use Colour Contrast Checker (colourcontrast.cc) when you need a quick, browser-based answer to one specific question: do these two colours have enough contrast for this text? It is most useful during design or development, before or while you build a page, when you are choosing a text colour and a background colour and want to know whether the pairing passes WCAG contrast thresholds. It is not a full accessibility audit tool — it only measures colour contrast, so treat it as one check among many.

What the tool actually does

The page presents a single contrast checker with a foreground colour and a background colour. You set both colours, and it reports whether the combination passes the WCAG contrast criteria.

The results are split into four labels:

The page also shows the contrast ratio itself. In the example on the site, the pairing #222222 foreground on #ffe66d background produces a ratio of 12.72, and all four labels show as passing.

The tool displays each colour in several formats — hex, RGB, and HSL — and gives you a Copy action next to each value so you can move the colour into your own code or design file. There is also a Reverse colours control to swap foreground and background, and a Save colours option.

When it is the right tool

Reach for it in these situations:

• You are picking a text/background pair and want a pass/fail answer fast. Enter both colours and read the four result labels.
• You need the exact ratio, not just a verdict. The numeric ratio is shown alongside the pass/fail labels, which is useful when you are comparing two candidate palettes.
• You want to move a colour into code. The hex, RGB, and HSL readouts plus the copy actions let you take the value straight into CSS or a design token.
• You are checking a specific text size decision. The Large Text and Normal Text labels are separate, so you can see whether a colour pair works for one size but not the other.

The page also includes a typeface selector (with Google font options) and an "Example copy" preview area, so you can see sample text rendered in a chosen font against your colours. The preview area distinguishes Large Text – 18pt/24px from Normal Text – 16px, which mirrors the size distinction in the results.

When it is not enough

The tool checks colour contrast only. It does not evaluate:

• Whether images have alternative text
• Keyboard navigation or focus order
• Form labels and error messaging
• Semantic structure and heading order
• Screen reader behaviour
• Any other WCAG success criterion outside contrast

So a "pass" here means the colour pair meets the contrast thresholds — it does not mean the page is accessible. Confirm the specific thresholds and their wording against the official WCAG guidance rather than relying on the labels alone, especially if you are documenting compliance.

A practical workflow

1. Identify the text colour and the background colour you intend to use.
2. Enter the foreground colour and the background colour in the checker.
3. Read the four result labels and the ratio. Note which of Large Text and Normal Text pass — a pair can pass for large text and fail for normal text.
4. If you need to adjust, change one colour and re-check. Use Reverse colours if you simply had the two the wrong way round.
5. Copy the hex, RGB, or HSL value you settled on into your stylesheet or design file.
6. Repeat for every distinct text/background pairing in the interface, including states such as hover, disabled, and placeholder text.

Common sticking points

• Passing for large text is not passing for normal text. Check both labels against the actual size the text will render at.
• A colour pair that passes in the tool can still fail in context. Overlays, opacity, gradients, and images behind text change the effective contrast.
• The tool tells you about the pair you entered, not the pair you shipped. If a theme or a CSS variable overrides the colour, re-check the final rendered values.
• Contrast is one requirement, not the whole standard. Use this tool for the contrast question and a broader audit for everything else.