Color Contrast Checker

Check color contrast ratios for WCAG 2.1 accessibility compliance.

🔒 No uploads⚡ Instant🆓 Free

Foreground (Text) Color

Background Color

Preview Text

The quick brown fox jumps over the lazy dog.

Small text preview for readability check.

17.06:1

Normal Text (≥ 4.5)

AAA

Large Text (≥ 3.0)

AAA

WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (AA level). AAA requires 7:1 and 4.5:1 respectively.

How It Works

Enter foreground (text) and background colors using the color picker or hex input.

See the contrast ratio and WCAG compliance levels instantly.

Swap colors or adjust until you reach your desired accessibility level.

Features

✓Real-time WCAG 2.1 contrast ratio calculation

✓AA and AAA compliance badges for normal and large text

✓Live color preview with sample text

✓Hex color input and native color picker

✓One-click color swap

✓100% browser-based — no data sent anywhere

Frequently Asked Questions

What is WCAG contrast ratio?▼

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios to ensure text is readable. AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively.

What counts as large text?▼

Large text is defined as 18pt (24px) or 14pt (18.66px) bold and above.

Does this upload my data?▼

No. All calculations happen in your browser. Nothing is sent to any server.

Related Tools

🔐

Password Generator

Generate strong, secure random passwords with custom length and character options.

🆔

UUID Generator

Generate universally unique identifiers (UUID v4) instantly.

🔁

Base64 Encoder

Encode and decode text to/from Base64 format instantly in your browser.

#️⃣

SHA256 Generator

Generate SHA-256 hash for any text input using the Web Crypto API.