Why does contrast matter?

Sufficient color contrast ensures text is readable for people with low vision or color blindness, and is a legal requirement in many jurisdictions under accessibility laws.

Color Contrast Checker

WCAG AA/AAA accessibility compliance in real time

DeveloperFREEYour data never leaves your browser

Foreground (Text)

Background

Contrast Ratio

17.72:1

AA Normal

AAA Normal

AA Large

AAA Large

1:1AA 4.5 · AAA 7.021:1

Live Text Preview

The quick brown fox jumps over the lazy dog

Pass

The quick brown fox jumps over the lazy dog

Pass

The quick brown fox jumps over the lazy dog

Pass

The quick brown fox jumps over the lazy dog

Pass

AA Normal

4.5:1

Small text

AAA Normal

7.0:1

Enhanced small text

AA Large

3.0:1

18pt or 14pt bold

AAA Large

4.5:1

Enhanced large text

How to Use

Enter foreground and background colors as hex, RGB, or HSL

See the contrast ratio and WCAG AA/AAA pass/fail status instantly

Read the live preview text to visually verify legibility

Frequently Asked Questions

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios: 4.5:1 for normal text (AA), 3:1 for large text (AA), and 7:1 for normal text (AAA).

More Free Tools

View all

Developer

JSON Formatter & Validator

Format, validate, diff, and convert JSON

Developer

Regex Playground

Test, visualize, and understand regex patterns

Developer

Color System Generator

One color in, full design system out

Developer

Cron Expression Builder

Build cron jobs visually — no syntax to memorize

Developer

.env File Validator & Converter

Validate, compare, and convert .env files

Learn More

All articles

AI Tools & Tutorials14 min read

7 Prompt Engineering Secrets That 99% of People Don't Know (2026 Edition)

Most people are still writing prompts like it's 2023. These seven advanced techniques — from tree-of-thought reasoning to persona stacking — will transform your AI output from mediocre to exceptional.

Read article

AI Tools & Tutorials14 min read

Claude Code: The Complete 2026 Guide for Developers

Claude Code has evolved from a simple CLI tool into a full agentic development platform. This comprehensive guide covers everything from basic setup to advanced features like subagents, worktrees, and custom skills.

Read article

AI Tools & Tutorials12 min read

How to Use Gemini Canvas to Build Full Apps Without Coding

Google's Gemini Canvas lets anyone build working web applications by describing what they want in plain English. This step-by-step tutorial shows you how to go from idea to working app without writing a single line of code.

Read article