BYTETOOLS

Contrast Checker

Check the contrast ratio between text and background colors against WCAG AA and AAA standards. Live preview, pass/fail badges and a one-click color swap.

13.98:1
Contrast ratio
Pass
WCAG AA (normal)
Pass
WCAG AAA (normal)
AA — normal text (≥ 4.5:1)✓ Pass
AA — large text (≥ 3:1)✓ Pass
AAA — normal text (≥ 7:1)✓ Pass
AAA — large text (≥ 4.5:1)✓ Pass

Live preview

Large heading text (24px)

Normal body text at 16px. The quick brown fox jumps over the lazy dog — check whether this remains comfortable to read at your chosen colors.

Fine print at 12px needs even more care than the WCAG minimums suggest.

What is the Contrast Checker?

The Contrast Checker measures the contrast ratio between a foreground (text) color and a background color using the official WCAG relative-luminance formula, then grades it against the AA and AAA success criteria for both normal and large text.

  • Exact WCAG 2.x contrast ratio calculation
  • AA and AAA badges for normal and large text
  • Live sample text preview in your colors
  • One-click foreground/background swap
  • HEX input and visual pickers
  • Free, private, client-side

How to use the Contrast Checker

  1. 1

    Pick or paste the foreground (text) color.

  2. 2

    Pick or paste the background color.

  3. 3

    Read the contrast ratio and the WCAG AA/AAA badges.

  4. 4

    Check the live sample text, and use Swap to flip the colors.

About the Contrast Checker

The Contrast Checker measures the contrast ratio between a foreground (text) color and a background color using the official WCAG relative-luminance formula, then grades it against the AA and AAA success criteria for both normal and large text.

You see the exact ratio (like 4.62:1), clear pass/fail badges for each criterion, and a live sample rendered in your actual colors so you can judge readability yourself. A swap button flips foreground and background instantly.

Everything is computed locally in your browser — ideal for checking unreleased brand palettes without uploading anything.

Frequently asked questions

What is the contrast ratio for WCAG AA?

WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt/24px regular, or 14pt/18.66px bold). User interface components and graphics also need 3:1 against adjacent colors.

What contrast ratio does WCAG AAA require?

AAA, the strictest level, requires 7:1 for normal text and 4.5:1 for large text. AAA is recommended for body text in reading-heavy products, but many organizations target AA as the practical legal and accessibility baseline.

How is the contrast ratio calculated?

Each color is converted to relative luminance using the sRGB formula, then the ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color. The result ranges from 1:1 (identical colors) to 21:1 (black on white).

What counts as large text for WCAG?

Large text is at least 18pt (about 24px) in regular weight, or 14pt (about 18.66px) in bold. Because larger glyphs are easier to read, WCAG allows a lower ratio for them: 3:1 at AA and 4.5:1 at AAA.

Does swapping foreground and background change the ratio?

No — the contrast ratio is symmetric, so black on white and white on black both measure 21:1. The swap button is for previewing which arrangement looks and reads better, not for changing the score.

Is 4.5:1 contrast enough for buttons and icons?

For text inside buttons, yes (AA). For the button's boundary, icons and other non-text UI parts, WCAG 1.4.11 requires only 3:1 against adjacent colors. Aim higher than the minimum when your audience includes low-vision users.

Guides for Contrast Checker

Related tools