Color Contrast Checker (WCAG)

Foreground (Text)

Background

Contrast Ratio —

AA · Normal — Text < 18pt or < 14pt bold ≥ 4.5 : 1

AA · Large — Text ≥ 18pt or ≥ 14pt bold ≥ 3.0 : 1

AA · UI — Icons, borders, focus rings ≥ 3.0 : 1

AAA · Normal — Enhanced for body text ≥ 7.0 : 1

AAA · Large — Enhanced for headings ≥ 4.5 : 1

Preview Click to edit

The Quick Brown Fox

Jumps over the lazy dog. This sample shows how your color combination looks at different sizes.

Small text — 11px caption

22px — Large text · AA Large, AAA Large 14px — Normal text · AA Normal, AAA Normal 11px — Below AA threshold

Contrast ratios are calculated per WCAG 2.1. All computation runs in your browser.

Color Contrast Checker (WCAG 2.1)

What this tool does

Enter a foreground (text) color and a background color in HEX format, or use the color pickers. The tool instantly calculates the WCAG 2.1 contrast ratio and checks it against all five compliance levels: AA Normal, AA Large, AA UI Components, AAA Normal, and AAA Large. The live preview shows what your text actually looks like with those colors applied.

How to use

Set a foreground color using the color picker or by typing a HEX value.
Set a background color the same way.
Read the contrast ratio and check which WCAG levels pass or fail.
Use Swap to reverse the colors and see the ratio from the other direction.

Frequently Asked Questions

What is a contrast ratio?

A contrast ratio measures the difference in relative luminance between two colors. It ranges from 1:1 (identical colors, no contrast) to 21:1 (black on white, maximum contrast). Higher ratios mean the text is easier to read.

What does WCAG stand for?

WCAG stands for Web Content Accessibility Guidelines. Published by the W3C, these guidelines define minimum contrast ratios to ensure content is readable for people with low vision or color blindness.

What is the difference between AA and AAA compliance?

Level AA requires 4.5:1 for normal text and 3:1 for large text — the minimum most websites should meet. Level AAA requires 7:1 for normal text and 4.5:1 for large text, and is recommended for body content on content-heavy sites.

What counts as large text under WCAG?

Large text is defined as at least 18pt (24px) regular weight, or at least 14pt (approximately 18.67px) bold. Text that meets this threshold has a lower contrast requirement because size improves readability.

Does this tool check contrast for images or graphics?

This tool checks contrast between two flat colors — foreground and background. For images with text overlay, sample the lightest and darkest areas of the background to find the worst-case contrast.