Skip to content
T
Tools.Town
Free Online Tools for Everyone
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
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