Color Contrast Checker
Check text and background color contrast against WCAG accessibility standards.
Color Contrast Checker Features
WCAG-compliant contrast checking for accessible design.
Tests against both AA and AAA contrast requirements.
Ratio updates instantly as you change colors.
Visual color picker or hex/RGB input.
Key Takeaways
- The checker computes the contrast ratio for a foreground and background color pair entirely in your browser, so your color values stays on your device.
- It tests against all four WCAG 2.1 thresholds at once: AA Normal needs 4.5:1, AA Large needs 3:1, AAA Normal needs 7:1, and AAA Large needs 4.5:1, with separate Pass or Fail badges for each.
- Body text should target AA Normal at 4.5:1, while headings and large buttons only need AA Large at 3:1 as long as the text is at least 18pt or 14pt bold.
- Enter a full six-digit hex value with a leading hash, and for transparent or RGBA colors enter the final blended hex, since the tool only calculates contrast for solid colors.
How to Check a Color Pair for WCAG Compliance
Set your foreground color
Pick the text color using the foreground color picker, or type a six-digit hex code such as #1a1a1a into the hex field. The picker and the hex field stay in sync, so editing one updates the other. The contrast runs entirely in your browser, so your color values stay on your device.
Set your background color
Choose the background color the same way, with the background picker or by entering a hex value like #ffffff. The live preview immediately renders your sample text in the foreground color over the chosen background so you can see the real pairing, not just numbers.
Read the ratio and Pass or Fail badges
The contrast ratio updates instantly and is shown as a value like 4.5:1. Below it, four badges report Pass or Fail for AA Normal, AA Large, AAA Normal, and AAA Large. Nudge either color until the levels you care about turn green.
WCAG Contrast Thresholds the Tool Checks
This checker evaluates your foreground and background pair against the four WCAG 2.1 success criteria for text contrast. Each badge passes only when the computed ratio meets or exceeds the threshold below. Large text is defined as 18pt and larger, or 14pt bold and larger.
| Badge | Level | Text size | Minimum ratio | Typical use |
|---|---|---|---|---|
| AA Normal | AA | Body text | 4.5:1 | Paragraphs, labels, captions |
| AA Large | AA | Large text | 3:1 | Headings, large buttons |
| AAA Normal | AAA | Body text | 7:1 | Strict accessibility targets |
| AAA Large | AAA | Large text | 4.5:1 | Large text at the highest level |
| Foreground luminance | Reference | n/a | 0 to 1 | Relative brightness of the text color |
| Background luminance | Reference | n/a | 0 to 1 | Relative brightness of the background |
Which Contrast Level Should You Target
Body text on a website
Aim for AA Normal at 4.5:1 or higher. This is the practical baseline that most accessibility audits and legal guidelines expect for ordinary paragraph and label text.
Headings and large buttons
Large text only needs AA Large at 3:1. If a heading fails AA Normal but passes AA Large, it is still compliant as long as it is rendered at 18pt, or 14pt bold, or larger.
High-readability content
For long-form reading, low-vision users, or strict internal standards, target AAA Normal at 7:1. The extra margin keeps text legible in bright light and on lower-quality screens.
Disabled or decorative text
Purely decorative text and inactive controls are exempt from WCAG contrast rules. Use the luminance values to judge a subtle look, but do not rely on low-contrast text to carry meaning.
Common Problems and Fixes
The hex field is ignored
The tool only accepts a full six-digit hex value with a leading hash, such as #0066cc. Three-digit shorthand or missing characters are rejected and the tool falls back to the color picker value. Type all six digits to apply your color.
The ratio does not change when I type
An incomplete or invalid hex code leaves the previous valid color in place, so the ratio stays the same. Finish the six digits, or use the color picker, and the ratio and badges recalculate instantly.
A heading shows AA Normal as Fail but I think it is fine
AA Normal uses the 4.5:1 threshold. If your heading is genuinely large text, look at the AA Large badge instead, which uses 3:1. Confirm the text is at least 18pt, or 14pt bold, in your actual layout.
My color has transparency or uses RGBA
The checker computes contrast for solid colors only. If your text or background uses opacity, the visible color is a blend with whatever is behind it. Enter the final blended hex value so the ratio reflects what users actually see.
About Color Contrast Checker
Check the contrast ratio between foreground and background colors for WCAG accessibility compliance.
Frequently Asked Questions
Is this tool free to use?
Yes, this tool is completely free.
No account or registration is required.
You can use it as many times as you like.
Is my data private?
Browser-side workflows run locally.
Your data is never sent to any server.
We do not store, log, or share your input.
Does it work on mobile?
Yes, the tool is fully responsive.
It works on phones, tablets, and desktops.
No app download is needed.
Do I need to install anything?
No installation is required.
It runs entirely in your web browser.
Works on any modern browser without plugins.
Is there a file size limit?
There is no strict file size limit.
Very large inputs may be limited by browser memory.
For best performance, keep inputs under a few MB.
Can I use the output commercially?
Yes, there are no restrictions on usage.
The output belongs entirely to you.
Use it for personal or commercial projects freely.
What browsers are supported?
All modern browsers are supported.
This includes Chrome, Firefox, Safari, and Edge.
Keep your browser updated for best results.
How accurate is the result?
Results are highly accurate for standard inputs.
Edge cases may produce unexpected output.
Always review the output before using it in production.
Sources and References
Format and tool details on this page are based on the official specifications and documentation below.
- WCAG 2.1 Contrast (Minimum)- W3C
- CSS color values- MDN Web Docs
- CSS Color Module- W3C