Contrast Checker
Pick a foreground and background color to get the exact contrast ratio, WCAG pass/fail badges and a live preview of normal and large text.
Free Runs locally No signup
18.88: 1Contrast ratio
AA Normal text: Pass AA Large text: Pass AAA Normal text: Pass AAA Large text: Pass
Preview
Preview
The quick brown fox jumps over the lazy dog.
Presets
WCAG AA needs 4.5:1 for normal text and 3:1 for large text.
How to use it
1
Set the colors
Choose a text color and a background color, or paste HEX values.
2
Read the ratio
The tool shows the ratio and which WCAG levels pass.
3
Adjust until it passes
Tweak the colors and watch the badges update live.
Why use this tool
WCAG AA and AAA
Normal and large text thresholds are checked separately.
Live preview
See how the pair looks with body text and a large heading.
Exact ratios
Uses the WCAG relative luminance formula.
Frequently asked questions
What ratio do I need?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA raises those to 7:1 and 4.5:1.
What counts as large text?
18pt (24px) regular or 14pt (18.66px) bold and larger.
Does it check non-text contrast?
No. This tool checks text contrast; UI components have a separate 3:1 requirement.
Why does my ratio differ from another tool?
Small differences come from rounding. This tool uses the WCAG relative luminance formula with sRGB channels.
Is anything uploaded?
No. The color math runs locally in your browser.
Related tools
Color & Design Color Converter Convert colors between HEX, RGB, HSL and HSV, pick from a color wheel, and copy ready-to-use values for CSS and design tools. Image Tools Image Compressor Compress JPG, PNG and WebP images in your browser. Control quality, resize by width, compare file sizes and download the result without uploading. Image Tools Favicon Generator Generate a complete favicon set from one image: crop the square area, render 16–512 PNGs, an Apple touch icon, a web manifest and an HTML snippet. Developer Tools Base64 Encoder & Decoder Encode text to Base64 or decode Base64 back to text, with full UTF-8 and URL-safe support. Runs locally in your browser — no upload, no signup. Text Tools Case Converter Convert text between UPPER CASE, lower case, Title Case, sentence case, camelCase, PascalCase, snake_case and kebab-case instantly. Text Tools Diff Checker Compare two texts and highlight added, removed and unchanged lines, words or characters. Runs locally in your browser with no upload.
Last updated: