Color Contrast Checker

Enter any two colors using a color picker, HEX, RGB, or HSL notation and instantly see the WCAG 2.1 contrast ratio. Results show pass/fail for all six WCAG criteria: AA and AAA for normal text, large text, and UI components. Includes a live preview of text on background, a palette of suggested accessible color pairs, and CSV export of results. All calculations run entirely client-side using the official WCAG relative luminance formula.

WCAG 2.1 AA & AAA Live Text Preview HEX · RGB · HSL Input Accessible Palette Suggestions CSV Export

Creative Studio

Check #333333 on #FFFFFF for body copy

Test your brand color on white background

Verify dark mode text #E0E0E0 on #121212

Color Selection

Foreground (text)

HSL: —

Background

HSL: —

WCAG 2.1 Compliance

Common Color Pairs

—

Contrast Ratio

Enter two colors to calculate

Live Preview

Large Text (18pt / 14pt Bold)

Normal body text — The quick brown fox jumps over the lazy dog. This is how your text will appear at standard size.

Small text / caption / helper text at 0.8rem size.

Button Label

Inverted (colors swapped):

Large Text

Normal text on inverted background.

Button Label

Luminance Details

Foreground luminance	—
Background luminance	—
Contrast ratio	—
Formula	(L_lighter + 0.05) / (L_darker + 0.05)

Accessible Alternatives AA fails

These adjusted colors preserve your hue and pass WCAG AA (≥4.5:1):

Export

Help & Related Tools

Everything you need to know

FAQ Frequently Asked Questions

What WCAG criteria does this tool check?

The tool checks all six WCAG 2.1 contrast criteria: AA Normal Text (≥4.5:1), AA Large Text (≥3:1), AA UI Components (≥3:1), AAA Normal Text (≥7:1), AAA Large Text (≥4.5:1), and AAA UI Components (≥4.5:1). Large text is defined as 18pt or 14pt bold.

How do I enter colors?

You can use the visual color picker, type a HEX value (#RRGGBB or #RGB), enter RGB values (rgb(255,255,255)), or use HSL notation (hsl(0,0%,100%)). The tool accepts all standard CSS color formats and converts between them automatically.

What is the WCAG contrast ratio formula?

The contrast ratio is calculated as (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 of the darker color. Relative luminance uses the official WCAG sRGB linearization formula.

Does this tool work for all browsers and devices?

Yes. All calculations use standard JavaScript math and the browser color picker API. No server calls are made. Works on Chrome, Firefox, Safari, and Edge on desktop and mobile.

What are the accessible palette suggestions?

When your color pair fails WCAG AA, the tool suggests the nearest foreground or background adjustments (darker/lighter variants) that do pass. Suggestions preserve your hue and only adjust lightness.