Color Contrast Checker

Check WCAG 2.1 color contrast ratios for accessibility. Pick foreground and background colors to verify AA/AAA compliance for normal and large text.

Color Contrast Checker

Check WCAG 2.1 color contrast ratios for accessibility compliance

Contrast Ratio
6.70:1
Minimum 4.5:1 for normal text (AA), 7:1 for enhanced (AAA)
AA Normal
PASS
Level AA (4.5:1)
AA Large
PASS
Level AA (3:1)
AAA Normal
FAIL
Level AAA (7:1)
AAA Large
PASS
Level AAA (4.5:1)

The quick brown fox jumps over the lazy dog

Regular body text at 16px. WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold) to meet Level AA compliance.

Small text at 14px. This size is harder to read with low contrast. WCAG Level AAA requires 7:1 for normal text and 4.5:1 for large text.

Reversed: background color on foreground

This preview shows what it looks like when the colors are swapped. The contrast ratio stays the same.

Common Color Pairs
About WCAG Contrast Guidelines

WCAG 2.1 (Web Content Accessibility Guidelines) defines minimum contrast ratios to ensure text is readable for people with visual impairments.

LevelNormal TextLarge Text
AA (minimum)4.5:13:1
AAA (enhanced)7:14.5:1

Large text is defined as 18pt (24px) or 14pt bold (18.66px bold).

All calculations follow the WCAG 2.1 relative luminance formula using sRGB linearization.

All processing happens in your browser. No data is sent to any server.

What is a Color Contrast Checker?

A color contrast checker measures the contrast ratio between two colors to determine if they meet WCAG 2.1 (Web Content Accessibility Guidelines) requirements. Sufficient contrast ensures that text is readable by people with visual impairments, including color blindness and low vision. It is a legal requirement in many countries under accessibility laws like the ADA, EN 301 549, and Section 508.

WCAG 2.1 Contrast Requirements

  • Level AA (minimum): 4.5:1 for normal text, 3:1 for large text (18pt or 14pt bold).
  • Level AAA (enhanced): 7:1 for normal text, 4.5:1 for large text.

The contrast ratio ranges from 1:1 (no contrast, same color) to 21:1 (maximum contrast, black on white).

Key Features

  • Real-time Calculation: See the contrast ratio update instantly as you pick colors.
  • AA/AAA Badges: Clear pass/fail indicators for both compliance levels and text sizes.
  • Live Preview: See your text rendered with the selected colors at different sizes.
  • Fix Suggestions: When contrast fails, the tool suggests the closest compliant colors.
  • Color Pairs: Pre-built accessible color combinations you can apply with one click.

How to use the Color Contrast Checker

  1. Pick a foreground (text) color using the color picker or type a hex value.
  2. Pick a background color the same way.
  3. Read the contrast ratio and check the AA/AAA pass/fail badges.
  4. If the ratio fails, use the suggested fixes or try a common accessible pair.

How is Contrast Ratio Calculated?

The formula uses relative luminance as defined by WCAG 2.1. Each sRGB color channel is linearized, then weighted (R: 0.2126, G: 0.7152, B: 0.0722) to compute luminance. The ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color.

Related

toolClamp GeneratorGenerate responsive font-size clamp() CSS.toolViewport Unit ConverterConvert between px and viewport units (vw, vh, vmin, vmax, dvh, svh, lvh, container query units). Includes batch conversion and fluid clamp() generator.toolSVG Wave GeneratorCreate customizable SVG wave shapes easily.toolAspect Ratio CalculatorCalculate aspect ratios and pixel dimensions for media and screens.

Free forever, no ads, no tracking. Support the project