Contrast Checker
Check the WCAG contrast ratio of any two colors in seconds. Pick a foreground and a background color, and this contrast checker reports the exact ratio plus AA and AAA pass or fail for both normal and large text — with a live preview so you can see it before you commit. It runs privately in your browser, so nothing is uploaded.
Quick brown fox jumps over the lazy dog
Aa
Live preview shows your text color on the background color.
WCAG calculation runs locally in your browser.
What is a contrast checker?
A contrast checker measures how well text stands out against its background using the WCAG (Web Content Accessibility Guidelines) contrast ratio. The result is a number from 1 to 21 that compares the relative luminance of your chosen colours. Higher values mean the foreground is much lighter or darker than the background, which makes the text easier to read, especially for people with low vision, colour blindness, or anyone reading on a phone in bright light.
WCAG defines two levels. AA is the minimum standard for most websites and requires at least 4.5:1 for normal text and 3:1 for large text. AAA is a stricter level that requires 7:1 for normal text and 4.5:1 for large text. Large text means 18px or larger, or 14px bold and above. A contrast checker helps you hit these targets before you publish, so your content is readable and your design stays within accessibility guidelines.
This tool runs entirely on your device, so you can compare colours without sending anything to a server.
How to use the contrast checker
- Type or paste a colour into the Foreground field, or use the colour picker to choose a text colour.
- Do the same for the Background field, or pick it from the swatch.
- The contrast ratio and the AA/AAA results update instantly as you type, with the preview at the bottom.
- Read the pass or fail badges to confirm your combination meets the level you need.
Example
Set the foreground to #1a1a1a (near black) and the background to #ffffff (white). The tool returns a ratio of 21.00, passing both AA and AAA for normal and large text — the most readable combination possible. Switch the foreground to #777777 and the ratio drops to about 4.48, which fails AA for normal text yet still passes for large text.
Common use cases
- Checking that text on a marketing page or landing section meets accessibility standards.
- Picking accessible button, link and card backgrounds during a redesign.
- Making sure headings and body copy are readable before publishing a blog post.
- Auditing a client website against WCAG AA or AAA compliance guidelines.
Pro tips
- Aim for at least 4.5:1 for body text and 3:1 for large headings.
- Don't rely on colour alone — combine contrast with icons, bold weight or underlines.
- Test on a real screen, since the ratio does not account for font size, weight or screens glow.
- Use #ffffff with #1a1a1a as the safest default for long-form reading.
FAQ
What is the WCAG contrast ratio?
It is a number from 1 to 21 that compares the relative luminance of a foreground and background color. Higher numbers mean higher readability.
What ratio is required for WCAG AA?
AA requires at least 4.5:1 for normal text and 3:1 for large text (18px or 14px bold and above).
What ratio is required for WCAG AAA?
AAA requires at least 7:1 for normal text and 4.5:1 for large text.
How is the contrast ratio calculated?
The browser converts each color to relative luminance and uses the formula (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color.
Is this contrast checker private?
Yes. The calculation runs entirely in your browser and no color is uploaded or stored.
Can I use named colors like white or black?
Yes — common names such as white, black, red and blue are supported in addition to HEX codes like #ffffff.
What does the preview show?
The preview renders sample text in your foreground color on the background color so you can see the result before you commit.
Why is my ratio below 1?
A ratio is always 1 or higher because the tool divides the lighter luminance by the darker one. If you see a result below 1, check the color values.
What is a good contrast ratio for body text?
Aim for at least 4.5:1 for normal body text to meet WCAG AA, and around 7:1 for maximum legibility or AAA compliance.
Related tools
Related searches
contrast checker, wcag contrast ratio, color contrast checker, aa aaa contrast, text contrast test, accessibility contrast tool, contrast ratio calculator, wcag aa, wcag aaa, readable text color