Sign Up Sign Up
Contrast Checker

Contrast Checker

Check text and background color combinations for WCAG accessibility compliance.

Browse Palettes

Contrast Ratio

12.63:1

Pass AA Normal
Pass AA Large
Pass AAA Normal
Pass AAA Large
The quick brown fox jumps
This is how normal body text will look with these color combinations. Make sure it's easy to read for everyone, including people with visual impairments.

Small text (12px) — the hardest to read and requires the highest contrast ratio to pass WCAG AA.
Badge Link example Button

More Colors Tools

Design System
Visualize and export color palettes
Palette Generator
Create harmonious color schemes
Color Palettes
Trending color palettes

How the Contrast Checker Works

Verify WCAG accessibility compliance for any text and background color pair. Check both AA and AAA levels with live preview.

WCAG AA & AAA

Check your color pairs against both WCAG 2.1 conformance levels. AA requires 4.5:1 for normal text and 3:1 for large text. AAA raises the bar to 7:1 and 4.5:1 respectively.

Normal & Large Text

The tool evaluates contrast separately for normal text (under 18px) and large text (18px bold or 24px regular), since large text is readable at lower ratios.

Live Preview

See exactly how your text and background combination looks in real time. The preview updates instantly as you change colors, showing a realistic rendering.

Smart Suggestions

When a combination fails, the tool suggests the nearest passing color. Make the minimum adjustment needed to meet accessibility standards.

Frequently Asked Questions

For WCAG AA compliance (the most common legal requirement), normal text needs a contrast ratio of at least 4.5:1 against its background. Large text (18px bold or 24px regular) needs at least 3:1. WCAG AAA, the enhanced level, requires 7:1 and 4.5:1 respectively.

In many jurisdictions, yes. The EU Web Accessibility Directive, the US ADA, and similar laws in Canada, Australia, and the UK require public and commercial websites to meet WCAG 2.1 AA. Even without a legal mandate, accessibility improves usability for all users.

The ratio is based on the relative luminance of two colors, as defined by the WCAG 2.1 specification. It ranges from 1:1 (no contrast, same color) to 21:1 (maximum contrast, black on white). The formula accounts for how the human eye perceives brightness differently across the color spectrum.

Yes. WCAG 2.1 requires a minimum 3:1 contrast ratio for UI components and graphical objects — buttons, form borders, icons, and chart elements. This ensures interactive elements are visible to users with low vision.