Colour Contrast Checker

Check color contrast ratio for WCAG AA and AAA accessibility with live preview — free online.

Text colour Background colour

The quick brown fox jumps over the lazy dog.

This tool needs JavaScript enabled in your browser to calculate results.

About

About the Colour Contrast Checker

Calculates the WCAG contrast ratio between a text colour and a background colour, with a live preview and a pass/fail result for the AA and AAA accessibility thresholds.

Designers use it to confirm a chosen colour palette is readable before it ships, while developers use it to check a specific text/background pairing against WCAG requirements during an accessibility review. It's one of many free designer tools on Toolapt, and like every tool here, it's free to use with no sign-up and no limit on how many times you run it.

Guide

Using the Colour Contrast Checker

How to use 4 Features 7 Who uses this 4

1

Step 1

Pick a text colour using the first colour picker.
2

Step 2

Pick a background colour using the second colour picker.
3

Step 3

Check the live preview to see the two colours together.
4

Step 4

Read the contrast ratio and the pass/fail result for AA and AAA below the preview.

Calculates the exact WCAG contrast ratio between any two colours, not just an approximate reading
Shows a live text preview in your chosen colours, so you can see the combination, not just a number
Reports pass or fail against both AA and AAA thresholds, for normal and large text separately
Updates instantly as you adjust either colour picker, with no need to click a button
Works entirely in your browser — no installs and no sign-up
Free to use, with no limit on how many times you run it
Fully responsive, so it works just as well on a phone as on a desktop

Designers

Designers use the Colour Contrast Checker for confirming a chosen text and background colour pairing is readable before a design ships.

Developers

Developers use the Colour Contrast Checker for verifying a specific colour combination in code meets WCAG contrast requirements during an accessibility review.

Content and marketing teams

Content and marketing teams use the Colour Contrast Checker for checking that brand colours used in text stay legible against the backgrounds they're placed on.

Accessibility auditors

Accessibility auditors use the Colour Contrast Checker for documenting whether a site's colour choices pass AA or AAA contrast requirements.

Examples

Colour Contrast Checker examples

3 worked examples

Dark text on white (defaults)

Checking #111827 text on a #FFFFFF background gives a contrast ratio of 17.74:1, passing AA and AAA for all text sizes.

The famous "just passes" gray

Checking white text on a #767676 background gives 4.54:1, passing AA for normal text but failing AAA.

Black text on bright yellow

Checking #000000 text on a #FACC15 background gives 13.71:1, passing AA and AAA for all text sizes.

Color Picker

Pick an exact colour from an uploaded image, or from anywhere on your screen.

Use it

HEX to RGB Converter

Convert a HEX colour code to its RGB and RGBA values.

Use it

RGB to HEX Converter

Convert RGB (or RGBA) values to a HEX colour code.

Use it

CSS Gradient Generator

Build a linear or radial CSS gradient from colour stops and copy the code.

Use it

Random Colour Generator

Generate a random colour and copy it as HEX, RGB or HSL.

Use it

Colour Shades and Tints Generator

Generate a range of tints and shades from a base colour, with HEX codes ready to copy.

Use it

FAQ

Frequently asked questions

Quick answers to common questions about the Colour Contrast Checker.

Still have a question?

Send us a message and we'll help you out.

What does the Colour Contrast Checker do?

It calculates the WCAG contrast ratio between a text colour and a background colour, and reports whether the pair passes the AA and AAA accessibility thresholds.

Is the Colour Contrast Checker free to use?

Yes. It's free, with no sign-up, no watermark and no limit on how many times you use it.

Is my input safe when I use this tool?

Yes. The colours you pick are processed entirely on your own device — nothing is sent to a server.

What's the difference between AA and AAA?

AA is the standard WCAG conformance level most sites aim for; AAA is a stricter, higher-contrast level. Both have separate thresholds for normal text and larger text, since larger text is easier to read at lower contrast.

What contrast ratio counts as passing?

For AA, normal text needs at least 4.5:1 and large text needs at least 3:1. For AAA, normal text needs at least 7:1 and large text needs at least 4.5:1.

How is the contrast ratio calculated?

It follows the WCAG formula, based on the relative luminance of each colour, producing a ratio from 1:1 (no contrast) up to 21:1 (black on white, the maximum possible).

Can I use the Colour Contrast Checker on my phone?

Yes. The page is fully responsive and works on mobile, tablet and desktop browsers alike.

Does the Colour Contrast Checker have any limitations?

It checks solid text and background colours against the WCAG formula; it doesn't evaluate contrast for colours placed over images or gradients.

Still have a question? Contact us

Colour Contrast Checker

About the Colour Contrast Checker

Using the Colour Contrast Checker