Color Contrast Checker

Check if your text/background colour combination meets WCAG accessibility standards.

Foreground (Text)

Background

The quick brown fox jumps

This is normal size text — 14px. Readability matters.

Contrast Ratio

How It Works

Enter foreground (text) and background colours. The checker calculates the contrast ratio and shows whether it passes WCAG AA and AAA accessibility standards.

**Color Contrast Checker — Design for Accessibility**

One in 12 men and 1 in 200 women have some form of colour vision deficiency. Additionally, poor contrast affects everyone in bright sunlight or on low-quality screens. WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios that your designs must meet for accessibility compliance.

**WCAG Contrast Requirements**

**WCAG AA (Minimum):**
- Normal text (< 18pt or 14pt bold): Contrast ratio ≥ 4.5:1
- Large text (≥ 18pt or 14pt bold): Contrast ratio ≥ 3:1
- UI components and graphical objects: ≥ 3:1

**WCAG AAA (Enhanced):**
- Normal text: Contrast ratio ≥ 7:1
- Large text: Contrast ratio ≥ 4.5:1

**How Contrast Ratio is Calculated**

Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)

Where L1 is the relative luminance of the lighter colour and L2 is the relative luminance of the darker colour. Luminance is calculated from the sRGB colour values using the WCAG formula.

The maximum contrast ratio is 21:1 (black on white). The minimum is 1:1 (same colour on same colour).

**What the Checker Shows**

- Contrast ratio (e.g., 7.5:1)
- WCAG AA pass/fail for normal and large text
- WCAG AAA pass/fail for normal and large text
- Live preview of text on background
- Suggested accessible alternatives if failing

**Why Accessibility Matters Legally**

In many countries, websites serving the public must comply with accessibility standards:
- US: ADA (Americans with Disabilities Act) — lawsuits increasing
- UK: Equality Act 2010
- EU: European Accessibility Act (EAA) — enforceable from 2025
- Australia: Disability Discrimination Act

AAA compliance is best practice; AA is the legal minimum in most jurisdictions.

**Quick Reference — Good and Bad Pairs**

✅ Black (#000000) on White (#FFFFFF) — 21:1 (perfect)
✅ Dark blue (#003366) on White — 13.7:1
❌ Light grey (#AAAAAA) on White — 2.3:1 (fails)
❌ Yellow (#FFFF00) on White — 1.07:1 (nearly invisible)

Frequently Asked Questions

4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt+ bold). WCAG AAA requires 7:1 for normal text.

21:1, which is the ratio of pure white (#FFFFFF) to pure black (#000000). Most designs shouldn't need this extreme contrast.

Absolutely. Low contrast between text and background is one of the most common accessibility failures. Even users without vision impairments find low-contrast text difficult to read in bright light.

Relative luminance is a perceptual measure of brightness according to the WCAG standard. It accounts for how the human eye perceives different colours — green appears brighter than blue at the same RGB intensity.

AA is the legal minimum in most jurisdictions. AAA is recommended for body text and critical content. Achieving AAA for all elements is sometimes impractical with branded colour schemes.