How do I check a colour combination with Colour Contrast Checker?

Open colourcontrast.cc, set a background colour and a foreground colour, then read the contrast ratio and the WCAG pass/fail labels that update automatically. The tool is built for checking text-on-background combinations against WCAG standards, so it suits anyone verifying that copy will stay legible — for example a designer picking a button label colour, or a developer auditing a page before release.

What you need before you start

• The two colours you want to test: one background, one foreground (usually the text colour).
• Their values in a form you can enter — hex, RGB, or HSL all work, since the tool shows all three for each colour.
• A rough idea of the text size you're checking, because the pass/fail labels are split between large and normal text.

Step-by-step: checking a combination

1. Set the background colour

Use the background colour control to enter or pick your background value. The tool displays the value as hex, RGB, and HSL, so you can confirm you've entered the right colour regardless of which format you started with.

2. Set the foreground colour

Do the same for the foreground colour — this is the text or element that sits on top of the background.

3. Read the contrast ratio

The tool shows a single contrast ratio for the pair. In the example on the site, the combination #ffe66d (background) and #222222 (foreground) produces a ratio of 12.72.

4. Check the pass/fail labels

Four labels appear, and they tell you whether the pair meets each WCAG level at each text size:

A pair can pass some and fail others — a ratio that clears AA Normal may still fall short of AAA Normal. The 12.72 example passes all four.

5. Match the label to your text size

The tool's own reference points are Large Text at 18pt/24px and Normal Text at 16px. Decide which one applies to your text, then read the corresponding label rather than treating "pass" as a single yes/no.

6. Swap the colours if needed

Use Reverse colours to swap foreground and background in one action. This is useful when you want to check the inverse pairing (for example, dark text on a light button versus light text on a dark button) without re-entering both values.

7. Copy the values out

Each colour has a Copy control next to its value, so you can copy the hex, RGB, or HSL straight to your clipboard and paste it into your stylesheet, design file, or documentation. There's also a Save colours option if you want to keep the pair.

Optional: preview with a typeface

The tool includes a Typeface selector with Google fonts and an Example copy area. Choosing a font and viewing the example copy lets you judge the combination as rendered text rather than as two colour swatches — helpful when a font's weight or stroke thickness affects how readable the contrast actually feels.

Common sticking points

• Treating the ratio as the whole answer. The ratio is fixed for the pair, but whether it's acceptable depends on text size and which WCAG level you're targeting. Always read the label that matches your case.
• Forgetting which colour is which. Contrast is symmetric in ratio terms, but foreground and background still matter for how you apply the result. If you're unsure, use Reverse colours to see both orientations.
• Checking only one state. A combination that passes for body text may not be the one used for hover, disabled, or placeholder states. Check each pairing you actually ship.
• Assuming the tool stores your work. Save colours keeps a pair within the session; copy the values out if you need them elsewhere.