Skip to content
Tools.Town
290+ free online tools
21:1 AAA

Contrast Checker

100% Free

WCAG 2.1 contrast ratio for any fg/bg pair — pass/fail for AA-normal (4.5), AA-large (3.0), AAA-normal (7.0), AAA-large (4.5).

Real-time
Client-Side
WCAG 2.1
Be the first to rate
Foreground (text)
Background
Sample heading text
The quick brown fox jumps over the lazy dog.
Smaller body text at the default size.
Contrast ratio
14.679:1

Passes AA-normal, AA-large, AAA-normal, AAA-large

WCAG 2.1 tier breakdown
✓AA · Large text (≥ 18pt or 14pt bold) — needs 3.0
✓AA · Normal text — needs 4.5
✓AAA · Large text — needs 4.5
✓AAA · Normal text — needs 7.0

Embed This Tool

Easy to Embed

Add Contrast Checker to your website or blog in seconds.

  • Responsive design
  • Lightweight & fast
  • No backend required
  • Always up-to-date 
<iframe
  src="https://tools.town/embed/contrast-checker/"
  width="100%"
  height="600"
  style="border:none; border-radius:12px;"
  loading="lazy"
  title="Contrast Checker">
</iframe>

Share This Tool

Share Instantly

Share Contrast Checker with anyone — no login required.

  • Shareable link
  • No login required
  • Works on any device
  • No account needed

Share via

Advertisement

How to Use

  1. 1 Pick foreground (text) and background colors
  2. 2 Live preview shows real text rendering
  3. 3 Ratio + WCAG tier pass/fail update instantly

Features

  • WCAG 2.1 §1.4.3 / §1.4.6 compliant
  • All 4 tiers (AA + AAA × normal + large)
  • Live text preview
  • Color pickers + hex inputs
  • 100% client-side

Frequently Asked Questions

What counts as 'large text'?
Per WCAG: ≥ 18pt regular OR ≥ 14pt bold. Anything smaller is 'normal text' and needs the higher 4.5:1 (AA) or 7:1 (AAA) ratio.
Why is the max ratio 21:1?
That's pure black on pure white — the maximum possible luminance contrast. Most real-world pairs land between 1 and 21.
Does this account for color blindness?
WCAG luminance ratios are designed to be color-blind-safe — they use luminance (perceived brightness), not hue. A passing ratio works for all common color-vision deficiencies.
📖

Want to understand the math?

Browse all guides →
How to Use Contrast Checker
accessibility

How to Use Contrast Checker — Complete Guide

Learn how to check WCAG color contrast ratios for text and background combinations using Tools.Town's free Contrast Checker.

8 May 2026

5 min read

Related Tools You Might Like

Border Radius Generator

Visually craft CSS border-radius with per-corner sliders, live preview, unit toggle (px/em/rem/%), and shorthand collapsing.

Color Palette Generator

Generate harmonious palettes from any base color — complementary, analogous, triadic, tetradic, split-complementary, monochromatic.

CSS Gradient Generator

Build linear and radial CSS gradients with up to 6 color stops, custom angle/position/shape, live preview, and ready-made presets.

Color Converter

Parse any color (hex, rgb, hsl, named) and get all 4 representations — HEX, RGB, HSL, HSV — with one-click copy.

Color Picker

Native color picker with HEX/RGB/HSL output and recent-colors history. Click the swatch or type a hex — values update instantly.

Browse more free tools
More Design Tools All categories