WCAG Color Contrast Checker

Test any foreground/background color combination against WCAG 2.1 accessibility standards — shows the exact contrast ratio and AA/AAA pass/fail status.

Normal Text Sample (18px)

Small body text sample (14px)

Large Bold Text (24px Bold)

What Does This Tool Do?

Test any text and background color combination against WCAG 2.1 accessibility guidelines. Shows the exact contrast ratio and AA/AAA compliance for both normal and large text sizes, with a live preview.

Key Features

♿
WCAG 2.1
Tests AA and AAA levels for normal and large text.
👁️
Live Preview
See the actual text rendered with your colors.
📊
Exact Ratio
Precise contrast ratio displayed to 2 decimal places.
⚡
Instant
Updates as you change colors.

How to Use

  1. Enter or pick the foreground (text) color.
  2. Enter or pick the background color.
  3. Read the contrast ratio and pass/fail results.

Frequently Asked Questions

What is WCAG?▾
Web Content Accessibility Guidelines (WCAG) is an international standard for making web content accessible. Level AA is the standard legal requirement in many countries.
What contrast ratio do I need?▾
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18px+ or 14px bold). AAA (enhanced) requires 7:1 and 4.5:1 respectively.
What counts as large text?▾
Text at 18pt (24px) or larger in normal weight, or 14pt (approximately 18.67px) or larger in bold weight is considered large text under WCAG.

Complete Guide to WCAG Color Contrast Checker

When To Use This Tool

Use WCAG Color Contrast Checker whenever you need fast, accurate output without installing software. This tool is designed for speed, clarity, and repeatable results for day-to-day work.

Best Practices for Accurate Results

  • Double-check the format of your input before running the tool.
  • Test with a small sample first, then process larger data.
  • Use Related Tools to verify, convert, or transform the output.

Why Users Prefer AdeDX

AdeDX tools are browser-based, free to use, and built to work across desktop and mobile devices. Most processing happens directly in your browser for fast performance and improved privacy.