WCAG Color Contrast Checker

Calculates the WCAG 2.2 contrast ratio between a text color and a background color (HEX, RGB, HSL, or a visual picker), showing whether it meets AA and AAA for normal and large text, with a button, link, and paragraph preview, and suggestions for a lighter or darker color to reach a target. Contrast is only one part of an interface's accessibility — the tool states this explicitly.

Processed on your device, no AI

Text color

Background color

Contrast ratio: 18.88:1

✓ AA normal text (4.5:1)✓ AA large text (3:1)✓ AAA normal text (7:1)✓ AAA large text (4.5:1)

Paragraph preview with this contrast.

Contrast is only one part of an interface's accessibility.

The data is processed on your device and is never sent to the server.

Use cases

Check whether a button meets the minimum AA contrast
Choose a readable text color over a brand background
Find the lightest or darkest variant of a color that meets a target

How to use this tool

Enter or pick the text and background color
Review the contrast ratio and the AA/AAA levels
Copy the CSS variables or try a suggested color

Frequently asked questions

Does meeting the contrast requirement make my site accessible?

Not by itself. Contrast is only one part of an interface's accessibility; focus order, labels, alt text, and many other factors matter too.

Does it round the contrast ratio before deciding whether it passes?

No. It calculates the exact ratio and only rounds the number it displays; the AA/AAA pass is decided using the unrounded value.

Related tools

Color Palette Extractor

Favicon Generator

Universal Unit Converter

← Back to home