Calnex LogoCalnex
design

Color Contrast Checker

Check color contrast ratios against WCAG 2.1 accessibility guidelines. Tests AA and AAA compliance for normal and large text. Essential for web accessibility (a11y) compliance.

Parameters

Text or element color.

Background color to test against.

Results

Contrast Ratio21:1

The contrast ratio between the two colors

Other results (6)
WCAG AA Normal Text (≥4.5:1)
PASS ✓

Normal text (under 18pt or 14pt bold) meets WCAG AA requirements

WCAG AA Large Text (≥3:1)
PASS ✓

Large text (18pt+ or 14pt+ bold) meets WCAG AA requirements

WCAG AAA Normal Text (≥7:1)
PASS ✓

Normal text meets the stricter WCAG AAA requirements

WCAG AAA Large Text (≥4.5:1)
PASS ✓

Large text meets the stricter WCAG AAA requirements

Foreground Luminance0

Relative luminance of #000000

Background Luminance1

Relative luminance of #FFFFFF

Why Choose Color Contrast Checker

The Color Contrast Checker tests the contrast ratio between a foreground and background color against WCAG 2.1 guidelines. Instantly see if your color combination passes AA and AAA compliance for both normal and large text.

  • ✓Calculates contrast ratio using the WCAG 2.1 relative luminance formula
  • ✓Tests all four WCAG compliance levels: AA/AAA for normal and large text
  • ✓Shows relative luminance values for both colors
  • ✓Uses color picker inputs for easy color selection

How to Use

  1. 1Choose your foreground (text) color using the color picker
  2. 2Choose your background color using the color picker
  3. 3View the contrast ratio displayed immediately
  4. 4Check the WCAG AA and AAA pass/fail results for normal and large text
  5. 5Adjust colors until your combination passes the required level

Frequently Asked Questions (FAQ)

What is a good contrast ratio for web accessibility?

WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text (AA level) and 3:1 for large text. For AAA compliance, normal text needs 7:1 and large text needs 4.5:1. Black on white (21:1) is the maximum possible contrast.

What counts as "large text" in WCAG?

WCAG defines large text as at least 18pt (24px) or 14pt (18.66px) bold. Large text has a lower contrast requirement because it is easier to read at lower contrast ratios.

How is the contrast ratio calculated?

The contrast ratio uses relative luminance values: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color luminance and L2 is the darker. Luminance is calculated using the WCAG formula: L = 0.2126 × R + 0.7152 × G + 0.0722 × B, with each channel linearized from sRGB.

Does this tool check color blindness accessibility?

This tool checks luminance-based contrast which benefits all users including those with color vision deficiencies. However, it does not simulate specific types of color blindness. For color blindness testing, use a dedicated color blindness simulator.

What is the minimum contrast ratio required by law?

Many accessibility regulations (ADA, Section 508, EN 301 549) reference WCAG 2.1 Level AA as the standard, which requires 4.5:1 for normal text. Government and educational websites in many countries are legally required to meet this level.

Authoritative References & Sources

WCAG 2.1 Understanding Contrast (Minimum)

View Source

Relative Luminance - WCAG Definition

View Source

WebAIM Contrast Checker

View Source