◐

Contrast Checker

WCAG AA/AAA contrast ratio between two colors.

Foreground (text)

Background

The quick brown fox jumps over the lazy dog

Normal text preview at 15px — 0123456789

Small text preview at 11px — readability sample

Contrast ratio

4.83:1

WCAG checks

Normal text (AA) (needs 4.5:1)✓ Pass

Normal text (AAA) (needs 7:1)✕ Fail

Large text (AA) (needs 3:1)✓ Pass

Large text (AAA) (needs 4.5:1)✓ Pass

UI components (AA) (needs 3:1)✓ Pass

About the Contrast Checker

Measure the WCAG contrast ratio between a text color and a background color and see at a glance whether you pass AA and AAA for normal text, large text and UI components. Includes a live text preview rendered in your actual colors.

How to use the Contrast Checker

Set the foreground (text) color and background color with the color inputs or by pasting values.
Read the contrast ratio, for example 4.5:1, in the stat card.
Check the pass/fail list for each WCAG requirement — normal text AA needs 4.5:1, large text AA needs 3:1.
Preview real text in your colors above the results, and swap the colors with one click.

Contrast Checker FAQ

What contrast ratio do I need?

WCAG 2.1 requires 4.5:1 for normal body text (AA) and 3:1 for text at least 24px or 19px bold. AAA raises these to 7:1 and 4.5:1. UI components such as input borders need 3:1.

How is the ratio calculated?

Using the WCAG relative luminance formula: the lighter color’s luminance plus 0.05 divided by the darker color’s luminance plus 0.05, producing a value between 1:1 and 21:1.

My ratio is 3.9:1 — what can I do?

Darken the text color, lighten the background (or vice versa), or increase the font size and weight so it qualifies as large text, which only needs 3:1.