colourcontrast.cc

Colour Contrast Checker is a free online tool that measures the contrast ratio between a foreground colour and a background colour, then tells you whether that pairing passes the WCAG (Web Content Accessibility Guidelines) thresholds for AA and AAA at both large and normal text sizes. It is aimed at designers, developers, and anyone choosing colours for text that needs to stay readable — for example, picking a button label colour against a brand background.

What it actually does

You give it two colours: a foreground (usually text) and a background. The tool calculates the contrast ratio between them and reports pass/fail results against four WCAG checkpoints:

• AA Large — large text at the lower AA threshold
• AAA Large — large text at the stricter AAA threshold
• AA Normal — normal body text at the AA threshold
• AAA Normal — normal body text at the stricter AAA threshold

The page also labels the text sizes it uses as reference: large text at 18pt/24px and normal text at 16px. So the "large" and "normal" results map to those two size categories rather than to any font you happen to be using.

How to use it

1. Set the foreground colour. Enter or pick the colour of your text. The tool shows the value as a hex code (for example #222222) alongside its RGB and HSL breakdown.
2. Set the background colour. Do the same for the surface the text sits on (for example #ffe66d).
3. Read the results. Four pass/fail indicators update to show how the pair scores at each WCAG level and text size.
4. Adjust until it passes. Change one or both colours and watch the results change. The goal is the combination that passes the level you need while staying close to your intended design.
5. Copy the values. Each colour has a "Copy … to clipboard" action so you can paste the hex straight into your CSS or design file.

Two conveniences are worth knowing about:

• Reverse colours swaps foreground and background in one click — useful when you are testing both a light-on-dark and dark-on-light version of the same palette.
• Save colours keeps a combination so you can compare options or come back to a pairing later.

Reading the numbers

The tool displays a contrast ratio next to the sample text — in the example on the page, the pairing #222222 on #ffe66d shows a ratio of 12.72, and that combination passes all four checkpoints (AA Large, AAA Large, AA Normal, AAA Normal).

The practical takeaway: a higher ratio is more forgiving. A pairing that passes AAA Normal will also pass the looser checkpoints, so if you are unsure which level applies to your project, aim for the strictest one you can reach without wrecking the design.

Typeface and sample text

There is a typeface selector that lets you preview the sample copy in a Google font, plus an "Example copy" block so you can see how the colours read in something resembling real text rather than isolated swatches. This matters because contrast ratios are calculated from colour values alone — the tool cannot account for thin font weights, very small sizes, or low-quality displays, so previewing the actual typeface is a useful sanity check on top of the numeric result.

Who it is for

• Designers choosing palette combinations for interfaces, marketing pages, or brand systems.
• Developers verifying that a colour pair in a stylesheet meets an accessibility requirement before shipping.
• Anyone auditing an existing site who needs a quick pass/fail answer for a specific text/background pair.

What it does not do

The tool checks one colour pair at a time against WCAG contrast thresholds. It does not scan a whole page, crawl a site, or evaluate other accessibility criteria such as keyboard navigation, alt text, or semantic markup. Treat it as a focused contrast calculator, not a full accessibility audit.

If you need to confirm a specific text-and-background combination meets AA or AAA, entering both hex values and reading the four indicators is the entire workflow — and the copy-to-clipboard buttons mean you can move the approved values straight into your code.

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.

Colour Contrast Checker (colourcontrast.cc) shows four pass/fail results for each foreground/background pair: AA Large, AAA Large, AA Normal and AAA Normal. They come from the WCAG contrast rules, which set a lower bar for large text than for normal text, and a lower bar for AA than for AAA. A combination can therefore pass AA Large while failing AA Normal — that is expected, not a bug.

The four thresholds

Two things vary across the labels: the conformance level (AA is the baseline, AAA is the stricter level) and the text size category. Large text gets a lower requirement because bigger glyphs are easier to read at lower contrast.

What counts as large text

The tool states the sizes directly next to the sample copy:

• Large Text — 18pt / 24px
• Normal Text — 16px

So in this checker, text at 18pt (24px) or above is judged as large text, and 16px text is judged as normal text. If your real content sits between those sizes, decide which category it belongs to before you rely on a result.

Reading a result

The page shows a live example: foreground #222222 on background #ffe66d produces a contrast ratio of 12.72, and all four labels report Pass. That tells you the pair clears even the strictest requirement (AAA Normal, 7:1), so it is safe for body copy as well as headings.

A pair with a ratio between 3:1 and 4.5:1 would instead show:

• AA Large: Pass
• AAA Large: Fail
• AA Normal: Fail
• AAA Normal: Fail

That combination is only acceptable where the text is genuinely large.

How to use the results when choosing colours

1. Enter or pick a foreground colour and a background colour. The tool displays the hex value and lets you copy it to the clipboard, alongside RGB and HSL values.
2. Read the contrast ratio and the four labels.
3. Match the label to your content:
   • Body copy, labels, captions at normal size → you need AA Normal (4.5:1) at minimum.
   • Headings and other large text → AA Large (3:1) is the minimum.
   • If you are targeting AAA, use AAA Normal (7:1) for body text and AAA Large (4.5:1) for large text.
4. If a pair fails the level you need, adjust the foreground or background and re-check. The Reverse colours control swaps the two, which is useful when only one direction of the pairing is failing.
5. Use Save colours to keep a combination you want to reuse, and the typeface selector with the "Example copy" preview to see how the pairing reads in an actual font rather than as flat swatches.

Common points of confusion

• Passing AA Large does not mean the colour is accessible for all text. It only covers large text. Small text in the same colours may still fail.
• AAA is not required by every project. AA is the commonly cited baseline; AAA is a stricter target. Check which level your project or client actually needs before rejecting a colour.
• The ratio is a property of the pair, not of one colour. Changing either the foreground or the background changes all four results.
• The labels are pass/fail, not scores. A ratio of 12.72 and a ratio of 7.1 both read as Pass for AAA Normal; the tool is not ranking them.

Colour Contrast Checker (colourcontrast.cc) includes a Typeface selector with Google font options, and it renders an Example copy block in your selected foreground and background colours. Use it when you want to judge readability in a real typeface, not just read the numeric contrast ratio. The preview also separates Large Text (18pt/24px) from Normal Text (16px), so you can see how the same colour pair behaves at both sizes.

What the typeface preview does

The checker's core job is comparing two colours against WCAG standards. The typeface control adds a visual layer on top of that:

• You pick a font from the Typeface dropdown (populated with Google fonts).
• The Example copy area re-renders in that font using your current foreground and background colours.
• The preview shows the same colour pair at two text sizes: Large Text – 18pt/24px and Normal Text – 16px.

The numeric result tells you pass or fail. The preview tells you whether the result actually looks readable in the font you plan to ship.

Step-by-step: preview a typeface

1. Set your colours first. Enter or adjust the Foreground colour and Background colour. The page shows each as a hex value (for example #222222 foreground, #ffe66d background) alongside RGB and HSL readouts. You can also use Reverse colours to swap them.
2. Open the Typeface selector. Choose a font from the Google font list. The Example copy updates to that typeface immediately.
3. Read the Example copy block. Confirm the text is legible in the chosen font at both sizes shown.
4. Cross-check the pass/fail labels. The results panel reports Pass AA Large, Pass AAA Large, Pass AA Normal, and Pass AAA Normal for the current pair.
5. Save the combination if you want to keep it. Use Save colours to retain the pair, and Copy next to a hex value to put it on your clipboard.

Expected result: the Example copy renders in your chosen typeface and colours, and you can see at a glance whether the large and normal text sizes both hold up.

Why the two text sizes matter

WCAG treats large and normal text differently, and the checker reflects that with separate labels:

A colour pair can pass at large size and fail at normal size. The preview lets you see both at once, so you don't approve a palette based only on the heading treatment.

Judging readability beyond the ratio

A passing ratio is a threshold, not a guarantee of comfort. Things the preview helps you catch:

• Thin or light fonts can look weaker at the same contrast ratio than a heavier weight.
• Small text at 16px may read worse in a decorative Google font than in a plain one, even when the labels say Pass.
• Colour pairs near the boundary can look fine in one typeface and strained in another.

Use the numeric labels to confirm compliance, then use the typeface preview to confirm the result is actually comfortable to read.

Common snags

• Preview looks different from your site. The checker uses its own rendering; your site's font weight, letter spacing, and anti-aliasing will differ.
• Only Google fonts are listed. If your project uses a self-hosted or system font, pick the closest match to approximate the look.
• Colours not updating. Re-check that you edited the foreground or background field rather than only the typeface; the preview reflects the current colour pair.
• Assuming a pass is enough. The labels cover WCAG thresholds — they don't account for font weight or rendering quirks, which is exactly what the preview is for.

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.