Home › URL tools › Contrast Checker

Contrast Checker

Check the WCAG contrast ratio of any two colors in seconds. Pick a foreground and a background color, and this contrast checker reports the exact ratio plus AA and AAA pass or fail for both normal and large text — with a live preview so you can see it before you commit. It runs privately in your browser, so nothing is uploaded.

Foreground color (text)

Background color

Contrast ratio21.00

Normal text (AA ≥ 4.5)–

Large text (AA ≥ 3.0)–

Normal text (AAA ≥ 7.0)–

Large text (AAA ≥ 4.5)–

Quick brown fox jumps over the lazy dog

Live preview shows your text color on the background color.

WCAG calculation runs locally in your browser.

What is a contrast checker?

A contrast checker measures how well text stands out against its background using the WCAG (Web Content Accessibility Guidelines) contrast ratio. The result is a number from 1 to 21 that compares the relative luminance of your chosen colours. Higher values mean the foreground is much lighter or darker than the background, which makes the text easier to read, especially for people with low vision, colour blindness, or anyone reading on a phone in bright light.

WCAG defines two levels. AA is the minimum standard for most websites and requires at least 4.5:1 for normal text and 3:1 for large text. AAA is a stricter level that requires 7:1 for normal text and 4.5:1 for large text. Large text means 18px or larger, or 14px bold and above. A contrast checker helps you hit these targets before you publish, so your content is readable and your design stays within accessibility guidelines.

This tool runs entirely on your device, so you can compare colours without sending anything to a server.

How to use the contrast checker

Type or paste a colour into the Foreground field, or use the colour picker to choose a text colour.
Do the same for the Background field, or pick it from the swatch.
The contrast ratio and the AA/AAA results update instantly as you type, with the preview at the bottom.
Read the pass or fail badges to confirm your combination meets the level you need.

Example

Set the foreground to #1a1a1a (near black) and the background to #ffffff (white). The tool returns a ratio of 17.40, passing both AA and AAA for normal and large text — a highly readable combination. Switch the foreground to #777777 and the ratio drops to about 4.48, which fails AA for normal text yet still passes for large text.

Who is this contrast checker for?

Anyone who puts text on a colour needs to know the ratio, but a few groups check it constantly.

Web designers and developers: a contrast checker for designers verifies that text on buttons, cards and links meets WCAG AA before it ships.
Accessibility testers: auditing a site against WCAG AA or AAA compliance needs a fast pass/fail read on every colour pair.
Content and marketing teams: making sure headings and body copy are readable on a chosen background is part of any publish check.
Students and beginners: a colour contrast tool is the fastest way to learn the 4.5:1 and 7:1 thresholds the guidelines use.

WCAG contrast ratio chart for common colour pairs

Each ratio below is computed with the same WCAG relative-luminance formula this checker uses. AA normal needs at least 4.5:1 and AAA normal needs at least 7:1.

Foreground	Background	Contrast ratio	AA normal	AAA normal
#000000	#ffffff	21.00:1	Pass	Pass
#777777	#ffffff	4.48:1	Fail	Fail
#000000	#ffff00	19.56:1	Pass	Pass
#333333	#f0f0f0	11.09:1	Pass	Pass
#ffffff	#0a84ff	3.65:1	Fail	Fail
#000000	#ff0000	5.25:1	Pass	Fail

Common use cases

Checking that text on a marketing page or landing section meets accessibility standards.
Picking accessible button, link and card backgrounds during a redesign.
Making sure headings and body copy are readable before publishing a blog post.
Auditing a client website against WCAG AA or AAA compliance guidelines.

Pro tips

Aim for at least 4.5:1 for body text and 3:1 for large headings.
Don't rely on colour alone — combine contrast with icons, bold weight or underlines.
Test on a real screen, since the ratio does not account for font size, weight or screens glow.
Use #ffffff with #1a1a1a as the safest default for long-form reading.

FAQ

What is the WCAG contrast ratio?

It is a number from 1 to 21 that compares the relative luminance of a foreground and background color. Higher numbers mean higher readability.

What ratio is required for WCAG AA?

AA requires at least 4.5:1 for normal text and 3:1 for large text (18px or 14px bold and above).

What ratio is required for WCAG AAA?

AAA requires at least 7:1 for normal text and 4.5:1 for large text.

How is the contrast ratio calculated?

The browser converts each color to relative luminance and uses the formula (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color.

Is this contrast checker private?

Yes. The calculation runs entirely in your browser and no color is uploaded or stored.

Can I use named colors like white or black?

Yes — common names such as white, black, red and blue are supported in addition to HEX codes like #ffffff.

What does the preview show?

The preview renders sample text in your foreground color on the background color so you can see the result before you commit.

Why is my ratio below 1?

A ratio is always 1 or higher because the tool divides the lighter luminance by the darker one. If you see a result below 1, check the color values.

What is a good contrast ratio for body text?

Aim for at least 4.5:1 for normal body text to meet WCAG AA, and around 7:1 for maximum legibility or AAA compliance.