Color Contrast Checker (WCAG)

Check color contrast ratios against WCAG AA and AAA standards.

Large text (18px bold)

Normal body text (16px regular)

Small text (12px regular)

—contrast ratio
AA Normal
≥ 4.5:1
—
AA Large
≥ 3:1
—
AAA Normal
≥ 7:1
—
AAA Large
≥ 4.5:1
—
UI Components
≥ 3:1
—

How to use

  1. Enter a foreground (text) color using the picker or hex input.
  2. Enter a background color. The preview updates in real time.
  3. Check the WCAG results below — green means pass, red means fail.

Frequently asked questions

What is a good contrast ratio for accessibility?

WCAG 2.1 requires a minimum of 4.5:1 for normal text (AA) and 7:1 for enhanced contrast (AAA). Large text needs at least 3:1 for AA.

What is the difference between WCAG AA and AAA?

AA is the minimum recommended level. AAA is stricter. AA requires 4.5:1 for normal text, AAA requires 7:1. Most sites target AA.

How is color contrast ratio calculated?

Using relative luminance: (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color. Luminance comes from sRGB values with gamma correction.

What counts as large text in WCAG?

Large text is 18pt (24px) regular or 14pt (18.66px) bold. It has a lower contrast requirement of 3:1 for AA.

Last updated

Powered by maratool