Color Contrast

Contrast Ratio
21.00:1
Passes

WCAG 2.1 Results

AA Normal Text
4.5:1 required
AA Large Text
3.0:1 required
AAA Normal Text
7.0:1 required
AAA Large Text
4.5:1 required

Preview

Large text (24px+) or bold (18px+)
Normal text. The quick brown fox jumps over the lazy dog. Good contrast ensures text is readable for everyone, including those with visual impairments.

About Color Contrast

Color Contrast Checker calculates the contrast ratio between foreground text and background colors according to WCAG 2.1 standards for AA and AAA accessibility.

Key Capabilities & Features

✓

Calculates exact WCAG 2.1 contrast ratio (e.g. 4.5:1, 7.1:1)

✓

Tests AA and AAA compliance for normal and large text

✓

Interactive color pickers for background and text

How to Use Color Contrast

  1. 01

    Pick text color

    Select or input the foreground text color.

  2. 02

    Pick background color

    Select or input the background color.

  3. 03

    Review WCAG score

    Check AA and AAA pass/fail accessibility ratings.

100% In-Browser Privacy Guarantee

All operations in Color Contrast run locally in your web browser using HTML5, Web Cryptography, and WebAssembly APIs. Your text, files, credentials, and code never leave your computer.

Frequently Asked Questions

What is a good WCAG contrast ratio?

WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text. WCAG AAA requires 7:1 for normal text and 4.5:1 for large text.

Related Developer Tools

URL Parser

Parse URLs into host, path, and query parameters.

Use Tool
Cron Parser

Convert cron expressions to human-readable text.

Use Tool
CSS Unit Converter

Convert CSS units (px to rem).

Use Tool