ColorCheckerColorContrast

Color Contrast Checker

Check any two colors against WCAG AA & AAA accessibility standards in real time. Enter foreground and background colors to see the contrast ratio instantly — pass/fail verdict in seconds, no sign-up needed. Supports HEX, RGB, HSL, and named CSS colors.

Contrast Ratio

12.6:1
AA Normal
AA Large
AAA Normal
AAA Large

URL Scanner

Scan any site for WCAG issues

Palette Explorer

Pick a seed color and get WCAG-compliant harmonies.

Get the Free WCAG Contrast Checklist (PDF)

Every color pair that passes WCAG AA, plus the 10 most common failures — in one PDF. Free, no spam.

No spam, ever. One email with the checklist, then occasional accessibility tips. Unsubscribe anytime.

How to Check Color Contrast

  1. Pick a foreground color — enter a hex code (like #333333), use the color picker, or paste any CSS color value for your text or UI element.
  2. Pick a background color — same input methods as foreground. The contrast ratio updates as you type.
  3. Read the results — the tool shows the contrast ratio and instantly marks WCAG AA / AAA pass-or-fail for both normal and large text.
  4. Explore alternatives — if your colors fail, use the Accessible Alternatives feature to get accessible color alternatives that preserve your original hue.
  5. Export a PDF — click Export to download a contrast report you can share with clients or attach to accessibility documentation.

WCAG Contrast Requirements

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable by people with visual impairments, color blindness, or anyone viewing content in challenging lighting conditions.

LevelNormal Text (<18pt)Large Text (≥18pt / 14pt+bold)UI ComponentsTypical Use
AA≥ 4.5:1≥ 3:1≥ 3:1Minimum legal standard
AAA≥ 7:1≥ 4.5:1—Enhanced accessibility
Fail< 4.5:1< 3:1< 3:1Not compliant — adjust colors

Real-World Contrast Examples

Here are common color combinations and how they perform against WCAG standards:

Aa

#333333 on #FFFFFF

12.6:1 — AAA Pass

Aa

#767676 on #FFFFFF

4.54:1 — AA Pass

Aa

#FF0000 on #FFFFFF

4.0:1 — AA Large Only

Aa

#CCCCCC on #FFFFFF

1.6:1 — Fail

WCAG vs APCA: What's the Difference?

WCAG 2.x uses a lightness ratio formula (relative luminance) that treats all text the same. APCA (Advanced Perceptual Contrast Algorithm) — the proposed method for WCAG 3.0 — accounts for font size, font weight, and polarity (light-on-dark vs dark-on-light), producing results that better match human perception. Our tool supports both standards:

WCAG 2.x

  • • Simple ratio: L₁÷L₂
  • • Same threshold regardless of font
  • • AA: 4.5:1 normal / 3:1 large
  • • Current legal standard worldwide

APCA (WCAG 3.0)

  • • Perceptual model with font scaling
  • • Accounts for font weight & size
  • • Lc 75 = body text pass
  • • Future standard, gaining adoption

Try our APCA Contrast Calculator for WCAG 3.0 readiness.

Features

  • ✓ Instant WCAG AA/AAA check
  • ✓ accessible color recommendations
  • ✓ HEX, RGB, HSL support
  • ✓ Real-time text preview
  • ✓ APCA calculation (WCAG 3.0)
  • ✓ PDF export for documentation
  • ✓ Color picker with eyedropper
  • ✓ 100% free — no sign-up

Frequently Asked Questions

What is color contrast ratio?
Color contrast ratio measures the difference in luminance (brightness) between two colors — typically foreground text and its background. A higher ratio means better readability. WCAG defines minimum ratios: 4.5:1 for normal text and 3:1 for large text at AA level. Our tool calculates this instantly.
What is the minimum contrast for WCAG AA?
WCAG AA — the legal standard for most websites — requires a contrast ratio of at least 4.5:1 for normal text (under 18pt) and 3:1 for large text (18pt+ or 14pt+ bold). For UI components and graphical objects, the minimum is 3:1 against adjacent colors.
What is the difference between WCAG AA and AAA?
WCAG AAA is the strictest level. It requires 7:1 for normal text and 4.5:1 for large text — significantly higher than AA. While AAA is ideal for accessibility, most websites target AA for practicality. Our tool shows both AA and AAA results simultaneously.
How does APCA compare to WCAG contrast?
APCA (Advanced Perceptual Contrast Algorithm) is the next-generation method being developed for WCAG 3.0. Unlike WCAG 2.x's simple ratio formula, APCA accounts for font size, font weight, and whether text is on a light or dark background — making it more accurate for real-world readability. Our APCA calculator supports both standards.
What browsers and formats does this tool support?
The tool works in all modern browsers (Chrome, Firefox, Safari, Edge). It supports HEX, RGB, and HSL color formats. You can paste any CSS color value — named colors like 'crimson', hex codes like '#FF5733', or functional notation like 'rgb(255, 87, 51)'.
How do I fix a color combination that fails WCAG?
Click the alternative suggestions below the contrast result to get accessible alternatives that preserve your original hue. If you need more control, try darkening the foreground or lightening the background manually — or use our Accessible Palette Generator to build a full WCAG-compliant color system.
Does WCAG contrast apply to images and icons?
WCAG contrast requirements apply to text and 'meaningful' UI components. Icons that convey information (like a warning icon) should meet 3:1 contrast against their background. Decorative images and logos are exempt. Use the contrast checker on the icon's fill color against the background color to test.
Is my color data safe when I use this tool?
Yes — all contrast calculations run entirely in your browser using JavaScript. No colors, design data, or analytics are ever uploaded to any server. The tool works offline once the page is loaded.

Related Articles

What Is Color Contrast Ratio?WCAG Contrast Requirements ExplainedWCAG AAA Contrast ExplainedHow to Check Color Contrast

Related Tools

APCA CalculatorGradient CheckerImage Contrast CheckerBrand Color CheckerColor Blindness SimulatorAccessible Palette GeneratorURL Contrast Scanner