Color Contrast Checker

Calculate the contrast ratio between two colors and check WCAG 2.1 AA and AAA accessibility compliance.

Text Color

Background Color

Large Text Sample Aa

Normal text — The quick brown fox jumps over the lazy dog.

21.00: 1Excellent

Contrast ratio between the chosen text and background colors.

WCAG 2.1 Compliance

AA Normal≥ 4.5:1Body text (< 18pt)

AA Large≥ 3:1Large text (≥ 18pt bold)

AA UI≥ 3:1Icons & UI components

AAA Normal≥ 7:1Enhanced body text

AAA Large≥ 4.5:1Enhanced large text

AA (4.5:1) — WCAG 2.1 minimum for normal text. Required for most public-facing web content.

AA Large / UI (3:1) — Minimum for text ≥ 18pt (or 14pt bold) and graphical UI components.

AAA (7:1) — Enhanced contrast for normal text. Recommended for high-readability contexts.

AAA Large (4.5:1) — Enhanced contrast for large text.

Color Values

Text Color

Hex#000000

RGBrgb(0, 0, 0)

HSLhsl(0, 0%, 0%)

Background Color

Hex#FFFFFF

RGBrgb(255, 255, 255)

HSLhsl(0, 0%, 100%)

Preset Combinations

Click any preset to load it into the color pickers.

About WCAG Contrast Requirements

The Web Content Accessibility Guidelines (WCAG) 2.1 define minimum contrast ratios to ensure content is readable by people with low vision or color deficiencies.

Level AA is the standard target for most websites and required by laws in many jurisdictions (e.g., ADA, EN 301 549). Level AAA is the enhanced target, recommended for high-readability content such as medical or legal documents.

Contrast ratio is calculated using the relative luminance formula defined in the WCAG specification. A ratio of 1:1 means identical colors; 21:1 is the maximum (black on white).

All calculations happen in your browser. No color data is sent to any server.