Color Contrast Checker

Check WCAG contrast ratios for accessible text and UI.

The Color Contrast Checker measures the WCAG contrast ratio between two colors, shows AA and AAA pass badges for normal and large text, and suggests darker or lighter foreground colors that reach AA.

Foreground

Background

Preview

The quick brown fox jumps over the lazy dog

Contrast ratio: 17.72:1

AA PassAA Large PassAAA PassAAA Large Pass

AA suggestions

#0a0a0b

Contrast ratio 19.79:1 · darker

#000000

Contrast ratio 21:1 · darker

#26262b

Contrast ratio 15.06:1 · lighter

#35353b

Contrast ratio 12.18:1 · lighter

#43434c

Contrast ratio 9.79:1 · lighter

How to use

Enter or pick a foreground color.
Enter or pick a background color.
Review the ratio, pass badges, and the suggested AA-compliant alternatives.

Frequently asked questions

What is a good contrast ratio?

For normal text, WCAG AA requires at least 4.5:1 and AAA requires at least 7:1.

What counts as large text?

Large text is usually 18pt or 14pt bold, which has a lower AA threshold of 3:1.

How are the suggestions generated?

The tool adjusts the foreground lightness toward white or black until the ratio reaches 4.5:1.

Color Palette Generator

Create harmonious color palettes with random, analogous, complementary and triadic modes.

Color Converter

Convert colors between HEX, RGB, HSL and HSV instantly.

Color Blindness Simulator

Preview how images look for common types of color blindness.

Color Gradient Generator

Create CSS linear gradients with custom colors and directions.

Color Shade Generator

Generate tint and shade scales with exportable CSS variables.

Color Name Finder

Find the closest CSS color name for any color value.