MicroTools

WCAG Contrast Checker

Check AA/AAA contrast ratio for any two colors. Get fix suggestions instantly.

Preview — Normal text (16px)

Large text (24px bold)

About WCAG Contrast Checker

Free WCAG color contrast checker. Enter any two colors (hex, RGB, or HSL) to instantly calculate the contrast ratio and check AA/AAA compliance for normal text, large text, and UI components. Includes a "nearest compliant color" suggester.

How to Use

  1. 1Enter your foreground (text) color and background color in any format — hex, rgb(), hsl(), or rgba().
  2. 2The contrast ratio is calculated instantly.
  3. 3See which WCAG levels (AA normal, AA large, AAA) pass or fail.
  4. 4If you fail, click "Suggest fix" to get the nearest AA-compliant color.
  5. 5Copy the fixed color to use in your design.

Frequently Asked Questions

What contrast ratio do I need to pass WCAG AA?
For normal text (under 18pt / 14pt bold) you need at least 4.5:1. For large text (18pt+ / 14pt+ bold) the requirement is 3:1. UI components and graphical objects require 3:1.
What is WCAG AAA?
WCAG AAA is the highest accessibility level. It requires 7:1 for normal text and 4.5:1 for large text. Meeting AAA is optional but recommended for critical content.
Does this tool support alpha/transparency?
Yes — enter colors with alpha channel (e.g. rgba(0,0,0,0.5)) and the tool calculates effective contrast against a white or specified background.
What does "nearest compliant color" mean?
When your combination fails, the tool adjusts the foreground color's lightness until it just passes AA, showing you the minimum change needed.

Tool Info

Category
compliance
Usage
Unlimited

Related Tools

Non-Text Contrast Checker

Validate 3:1 contrast for borders, icons, focus rings, and UI states.

Accessible Color Palette Generator

Generate a full AA-compliant color palette from your brand color.

A11y Issue Triage Board

Turn accessibility audit findings into a prioritized fix plan with severity scoring.

More compliance tools

Non-Text Contrast Checker

Validate 3:1 contrast for borders, icons, focus rings, and UI states.

Heading Structure Auditor

Detect skipped levels, duplicate H1s, and broken heading hierarchy in HTML/Markdown.

Link Text Quality Checker

Find "click here", duplicate links, and empty anchors that fail WCAG 2.4.4.

Alt-Text Linter

Find missing, redundant, or low-quality alt text in your HTML instantly.