Skip to content

Color Contrast Checker

Compare two opaque sRGB colors using WCAG text contrast ratios. See precise ratio estimates, unrounded threshold decisions and clear invalid-color feedback.

Was this tool helpful?

Projects using Color Contrast Checker

This tool is part of these guided projects. Each project provides step-by-step instructions with checklists and all the tools you need in one place.

Website Color System Decision Record

Coordinate one website color system through content, people, component states, current accessibility requirements, bounded color/token scenarios, implementation tests, and named acceptance.

6 steps11 toolsStart project

Related Tools

Tools you might need next

Color Picker

Professional color picker with HEX, RGB, and HSL conversion, WCAG contrast checking, and palette generation. Pick colors and copy CSS-ready values instantly.

Recommended next stepColor
Color Palette Generator

Generate harmonious color palettes from a base color. Complementary, analogous, triadic, tetradic, monochromatic. CSS variables, Tailwind config, WCAG contrast.

Recommended next stepColor
Hex to RGB Converter

Convert HEX color to RGB. #ff5733 to rgb(255,87,51). For CSS and design. Free design tool with instant browser-based results — no account, works on desktop

Recommended next stepColor

Reference & details

How it works

Opaque sRGB relative luminance

Convert each 8-bit sRGB channel to linear light, calculate relative luminance and divide (lighter + 0.05) by (darker + 0.05). The display is rounded; threshold decisions use the unrounded ratio.

Text-specific thresholds

Normal text requires 4.5:1 for AA and 7:1 for AAA. Large text, at least 18pt or 14pt bold, requires 3:1 for AA and 4.5:1 for AAA. Check actual rendered size and backgrounds separately.

Updated: September 2026

Example Scenarios

Enter the actual foreground and opaque background colors, inspect the sample and copy the values and threshold results.

Compare a text color with its opaque backing, then check the overlay at the real player size and over representative footage.

Common Mistakes to Avoid

Treating a rounded ratio as a pass

Use the unrounded threshold result. A displayed approximation alone does not establish a pass.

Applying one color pair to a changing or translucent background

This tool accepts opaque #RGB or #RRGGBB sRGB colors. Check the actual rendered background and text size.

FAQ

Opaque sRGB colors in three- or six-digit hexadecimal form. Transparent colors and other color spaces require a compatible separate calculation.

The displayed ratio is rounded for readability. AA and AAA badges compare the unrounded value with the stated threshold.

No. Text size, backgrounds, keyboard operation, focus, structure and other applicable requirements need their own checks.

The current color fields use this browser’s existing local persistence. Copy summary includes both colors and the ratio decisions; Print Results opens the browser print dialog. There is no account synchronization.

About Color Contrast Checker

Compare two opaque sRGB colors using WCAG text contrast ratios. See precise ratio estimates, unrounded threshold decisions and clear invalid-color feedback.