🎨 Color Contrast Checker — WCAG AA/AAA

Check foreground/background color contrast ratios against WCAG AA and AAA accessibility standards. Instant pass/fail results for normal and large text. Free color contrast checker.

Foreground (Text)

Background

The quick brown fox jumps over the lazy dog

Normal body text — can you read this clearly?

Large Text (24px bold)

—

Contrast Ratio

—

AA Normal ≥4.5:1

—

AA Large ≥3:1

—

AAA Normal ≥7:1

—

AAA Large ≥4.5:1

How to Use

Pick your colors

Use the color pickers or type HEX codes for both the foreground (text) color and background color.

Read the contrast ratio

The tool instantly calculates the contrast ratio and shows Pass/Fail for all four WCAG 2.1 standards (AA/AAA × normal/large text).

Adjust until you pass

Tweak colors until you reach the standard you need. The preview text updates in real time so you can see the actual readability.

Frequently Asked Questions

What contrast ratio does WCAG require? +

WCAG 2.1 Level AA requires a minimum ratio of 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text.

What counts as large text? +

Large text is defined as 18pt (24px) or larger, or 14pt bold (18.67px bold) or larger. Below these sizes the stricter AA 4.5:1 requirement applies.

How is the contrast ratio calculated? +

The tool calculates relative luminance for each color using the WCAG formula, then divides the lighter luminance by the darker: (L1 + 0.05) / (L2 + 0.05).

Can I check transparent overlays? +

This tool checks opaque colors. For semi-transparent text, first compute the final rendered color by blending with the background, then paste that result into the checker.

Guía: Verificador de Contraste WCAG

¿Qué es?

Comprueba si la combinación de color de texto y fondo cumple las pautas WCAG: AA normal (ratio ≥4.5:1), AA texto grande (≥3:1), AAA (≥7:1). Un contraste insuficiente hace el texto ilegible para personas con baja visión o daltonismo.

Cómo usar

Selecciona el color de texto (primer plano).
Selecciona el color de fondo.
El ratio y resultados WCAG aparecen instantáneamente.
Ajusta colores hasta pasar los niveles requeridos.

Consejos

Apunta al mínimo WCAG AA — estándar legal en muchos países.
El texto blanco sobre colores oscuros suele ser más fácil de hacer accesible.
Usa HSL para ajustar luminosidad manteniendo el mismo tono.