What is a color contrast checker?

A tool that measures the contrast ratio between a text color and its background and tells you whether the pair meets accessibility standards like WCAG AA and AAA.

What is a good contrast ratio?

For normal text, aim for at least 4.5:1 (WCAG AA) and ideally 7:1 (AAA). Large text can pass at 3:1 (AA) or 4.5:1 (AAA). The maximum possible ratio is 21:1 (black on white).

What's the difference between AA and AAA?

AA is the widely-adopted baseline (4.5:1 normal, 3:1 large). AAA is stricter (7:1 normal, 4.5:1 large) and is the enhanced target for maximum readability.

Does large text have a lower requirement?

Yes. Text counted as 'large' (about 24px regular or 18.66px / 14pt bold) only needs 3:1 for AA and 4.5:1 for AAA, because bigger glyphs stay readable at lower contrast.

Is meeting WCAG contrast legally required?

In many places accessibility laws reference WCAG (for example the ADA in the US and EN 301 549 in the EU), so meeting AA contrast is commonly part of compliance. This tool helps you check, but isn't legal advice.

Is it free? Do I need to sign up?

Yes — it's free with no signup, and everything runs in your browser.

Contrast Checker

Test color contrast against WCAG 2.1 AA/AAA — live pass/fail, font-size rules, and a real component preview.

Color settings

Foreground (text)

Background

Typography

Font size16px

Font weight400

Normal text

Environmental simulation

Contrast analysis

14.68:1

Excellent

Effective ratio · adjusted for scenario14.68:1

PoorGoodExcellent

Compliance analysis

AAA

PASS

WCAG 2.1 AAA · needs 7:1

PASS

WCAG 2.1 AA · needs 4.5:1

PASS

WCAG 2.1 A · needs 3:1

APCA

PASS

WCAG 3.0 draft · Lc 101.5

Accessibility audit

UX 70/100

Text size

Normal text

16px · 400

Effective ratio

14.68:1

Adjusted for Standard view

WCAG 2.1

AA compliant

14.68:1

APCA (WCAG 3)

101.5

Comfortable

Low-vision support

Excellent

Readability

Age-related vision

Excellent

Elderly users

Color-deficiency safe

Safe

Holds up under CVD

Legal compliance

Compliant

ADA / WCAG

Component preview

Preview heading

Accessibility is the practice of making your websites usable by as many people as possible. This paragraph renders in your exact pair, size and weight.

Guide

What contrast ratio is and why it matters

Contrast ratio measures the difference in relative luminance between two colors, on a scale from 1:1 (identical) to 21:1 (black on white). Sufficient contrast is what makes text legible — especially for people with low vision, color-vision deficiencies, or anyone reading on a glary screen. Too little contrast and content simply disappears for part of your audience.

WCAG levels and thresholds

The Web Content Accessibility Guidelines set minimum ratios by conformance level and text size:

Text	AA	AAA
Normal	4.5:1	7:1
Large	3:1	4.5:1

The large-text rule

Large text gets a lower bar because bigger glyphs stay readable at lower contrast. "Large" means at least 24px (18pt) for regular weight, or 18.66px (14pt) when bold. Set the size and weight in the tool and it applies the correct thresholds automatically.

Fixing failing pairs

When a pair fails, adjust lightness rather than just swapping the hue — usually darkening the text or lightening the background. Nudging lightness preserves your color identity while raising the ratio until it passes.

Beyond text: non-text contrast

Contrast isn't only about words. Interactive boundaries — button edges, input borders, focus rings, icons and meaningful graphics — need at least 3:1 against adjacent colors under WCAG 1.4.11, so controls remain perceivable.

Learn more

See the W3C Understanding Contrast (Minimum) and WebAIM's contrast guide for the full standards.

Frequently asked questions

What is a color contrast checker?: A tool that measures the contrast ratio between a text color and its background and tells you whether the pair meets accessibility standards like WCAG AA and AAA.
What is a good contrast ratio?: For normal text, aim for at least 4.5:1 (WCAG AA) and ideally 7:1 (AAA). Large text can pass at 3:1 (AA) or 4.5:1 (AAA). The maximum possible ratio is 21:1 (black on white).
What's the difference between AA and AAA?: AA is the widely-adopted baseline (4.5:1 normal, 3:1 large). AAA is stricter (7:1 normal, 4.5:1 large) and is the enhanced target for maximum readability.
Does large text have a lower requirement?: Yes. Text counted as 'large' (about 24px regular or 18.66px / 14pt bold) only needs 3:1 for AA and 4.5:1 for AAA, because bigger glyphs stay readable at lower contrast.
Is meeting WCAG contrast legally required?: In many places accessibility laws reference WCAG (for example the ADA in the US and EN 301 549 in the EU), so meeting AA contrast is commonly part of compliance. This tool helps you check, but isn't legal advice.
Is it free? Do I need to sign up?: Yes — it's free with no signup, and everything runs in your browser.

Related tools

Color Picker

Pick any color visually and copy accurate HEX, RGB, HSL and CMYK codes — no signup.

Palette Generator

Generate harmonious color palettes from any base color — complementary, analogous, triadic and more, with instant CSS export.

Color Format Converter

Convert any color between HEX, RGB, HSL, HSV, CMYK and OKLCH instantly — and copy ready-to-paste CSS, SCSS or Tailwind.

Complementary Color Finder

Find the perfect complementary (180° opposite) color for any shade, with HEX/RGB/HSL and contrast info.

Brand Color Kit

Build a complete brand color system with semantic roles and 50–950 ramps — export CSS variables, Tailwind theme and design tokens.

Shade & Tint Generator

Generate 10–12 step tints and shades from any color — perfect 50–950 UI ramps with CSS and Tailwind export.