◑

Contrast Checker

Check the contrast between two colors against the WCAG guidelines. See whether text and background pass the AA and AAA levels.

Live·100% in your browser — no upload
Sample text
This is how text will look on this background.
Contrast ratio 21.00:1
AA · normal text
Pass
AA · large text
Pass
AAA · normal text
Pass
AAA · large text
Pass

What is Contrast Checker

The Contrast Checker measures the contrast ratio between a text color and a background color following the WCAG accessibility guidelines. It tells you instantly whether the combination is readable enough to pass the AA and AAA levels, for both normal and large text.

The calculation uses the official relative-luminance formula and runs entirely in the browser: no data is sent anywhere.

How it works

  1. Choose the text color and the background color with the pickers or by pasting HEX values.
  2. Watch the live preview with your chosen colors.
  3. Read the contrast ratio (e.g. 4.5:1) and the Pass/Fail badges for AA and AAA.
  4. Adjust the colors until you clear the level you need.

Frequently Asked Questions

What do the AA and AAA levels mean?
They are WCAG conformance levels. AA requires a contrast of at least 4.5:1 for normal text (3:1 for large text); AAA is stricter and requires 7:1 (4.5:1 for large text).
When is text considered 'large'?
Per WCAG, from 18pt (about 24px) up, or from 14pt bold (about 18.7px). Contrast thresholds are lower for large text.
Is the calculation reliable?
Yes. It uses the official WCAG formula for relative luminance and contrast ratio, the same one used by professional accessibility tools.

Related tools

◐

CSS Border Radius Generator

Live

Create CSS border-radius shapes visually. Control each corner independently. Generate circles, pills, blobs and custom shapes. Free border radius tool.

css
▦

CSS Box Shadow Generator

Live

Create CSS box shadows visually with live preview. Adjust offset, blur, spread, color and opacity. Multiple shadows support. Free box shadow maker.

css
👁️

Color Blindness Simulator

Live

See how colors look to people with color blindness. Simulate Protanopia, Deuteranopia, Tritanopia and more.

css
🎨

Color Converter

Live

Convert colors between HEX, RGB, HSL and HSV formats. Color picker with live preview. Free online color converter tool.

css