Contrast Checker

Ensure your color combinations meet accessibility standards. Check contrast ratios for WCAG compliance.

Text Color (Foreground)
Background Color
This is sample text to demonstrate contrast
4.5:1
Contrast Ratio
4.5:1
WCAG Level AA
Pass
WCAG Level AAA
Fail
A Normal Text (AA)

Minimum contrast ratio of 4.5:1 required for normal text (less than 18pt or 14pt bold)

A Large Text (AA)

Minimum contrast ratio of 3:1 required for large text (18pt+ or 14pt bold)

A+ Normal Text (AAA)

Minimum contrast ratio of 7:1 required for normal text (AAA standard)

A+ Large Text (AAA)

Minimum contrast ratio of 4.5:1 required for large text (AAA standard)

WCAG Contrast Standards

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios for text and images of text:

Level AA
Minimum Contrast

Normal Text: 4.5:1

Large Text: 3:1

Required for most accessibility compliance

Level AAA
Enhanced Contrast

Normal Text: 7:1

Large Text: 4.5:1

Recommended for higher accessibility standards

Large Text

Text is considered large when it is:

18pt or larger

14pt or larger and bold

Larger text requires less contrast for readability

Exceptions

Some exceptions apply:

• Decorative text

• Logos and brand names

• Inactive UI components

• Text in images that are purely decorative

1:1
2:1
3:1
4.5:1
7:1
10:1
21:1

Common Contrast Examples

These examples demonstrate different contrast ratios and their accessibility ratings:

Black on White
21:1
AAA Pass
Dark Gray on White
12.6:1
AAA Pass
Medium Gray on White
5.7:1
AA Pass
Light Gray on White
2.9:1
Fail
White on Blue
4.8:1
AA Pass
Black on Yellow
16.8:1
AAA Pass
White on Red
4.2:1
Fail
Black on Gray
4.9:1
AA Pass

Why Color Contrast Matters

Proper color contrast is essential for creating accessible digital experiences:

Visual Impairments

Over 2.2 billion people worldwide have vision impairments. For people with low vision, color blindness, or age-related vision changes, insufficient contrast makes content difficult or impossible to read.

Environmental Factors

Even people with perfect vision can struggle with low contrast in certain situations:

  • Bright sunlight on screens
  • Low-quality displays
  • Glare and reflections
  • Small screen sizes
Legal Requirements

Many countries have laws requiring digital accessibility:

  • Americans with Disabilities Act (ADA) in the US
  • Accessibility for Ontarians with Disabilities Act (AODA)
  • European Accessibility Act
  • Web Content Accessibility Guidelines (WCAG)

Non-compliance can result in lawsuits and financial penalties.

81%
of websites fail basic accessibility tests
1 in 12
men and 1 in 200 women have color vision deficiency
98%
of top websites have contrast issues

Tips for Better Contrast

Follow these guidelines to ensure your designs are accessible:

Test Early and Often

Check contrast during the design phase, not just before launch. Use tools like this contrast checker throughout your design process.

Choose High-Contrast Colors

Select color combinations that naturally have high contrast. Dark text on light backgrounds or light text on dark backgrounds work best.

Use Bold Fonts for Low Contrast

If you must use a lower contrast ratio, make the text bold or increase its size to improve readability.

Avoid Pure Black and White

Pure black text on pure white background can cause eye strain. Use dark grays and off-whites instead.

Consider Context

Remember that contrast requirements apply to all text elements: body text, headings, buttons, links, form labels, and icons.

Test with Real Users

Include people with visual impairments in your testing process. Automated tools can't catch all accessibility issues.

Accessibility Facts

  • Over 1 billion people worldwide have disabilities
  • 285 million people are visually impaired
  • Accessible websites have 50% more reach
  • Accessibility lawsuits increased 300% since 2018
  • Accessible sites rank higher in search engines

Color Blindness Types

  • Protanopia (Red-blind)
  • Deuteranopia (Green-blind)
  • Tritanopia (Blue-blind)
  • Monochromacy (Total color blindness)