Don't like ads? Go Ad-Free Today 

WCAG Contrast Checker

ColorDeveloper

ADVERTISEMENT · REMOVE?

INPUT

Auto Process

OUTPUT

Client Side

Normal text (16px) — The quick brown fox jumps over the lazy dog.

Large text (18px bold) — The quick brown fox jumps.

Large text (24px) — The quick brown fox.

Contrast Ratio

21:1

Level	Normal Text	Large Text
WCAG AA
WCAG AAA

ADVERTISEMENT · REMOVE?

Guide

WCAG Contrast Checker

Check color contrast ratios for web accessibility compliance. Verify your text and background color combinations meet WCAG AA and AAA standards to ensure your content is readable for all users, including those with visual impairments.

How to Use

Enter a foreground (text) color and a background color using the color pickers or by typing HEX/RGB values. The tool instantly calculates the contrast ratio and shows whether your combination passes WCAG AA and AAA standards for both normal and large text. Use the swap button to quickly reverse the colors.

Features

Live Preview – See how your text looks on the background in real time
WCAG AA & AAA Compliance – Pass/fail badges for normal and large text at both levels
Contrast Ratio Display – Precise ratio calculation (e.g., 4.5:1)
Multiple Input Formats – Enter colors as HEX, RGB, or use the color picker
Swap Colors – Quickly reverse foreground and background with one click
Improvement Suggestions – Get recommendations when your colors fail compliance
Sample Text Sizes – Preview at normal (16px) and large (18px bold / 24px) sizes