What's the difference between AA and AAA?

AA is the baseline required by most accessibility regulations. AAA is a stricter enhanced level. For normal text, AA is 4.5:1 and AAA is 7:1; for large text, AA is 3:1 and AAA is 4.5:1.

What counts as large text?

WCAG defines large text as at least 18pt (24px) regular, or 14pt (18.66px) bold. Anything smaller falls under the normal text thresholds.

How is the ratio calculated?

We follow WCAG 2.1's formula: convert each color to sRGB relative luminance, then compute (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter of the two. The ratio ranges from 1:1 to 21:1.

CSS y color

Verificador de Contraste de Color

Comprueba el contraste entre color de primer plano y fondo según los umbrales WCAG 2.1 AA y AAA.

Tus datos se quedan en tu dispositivoSin subida, sin servidorFunciona sin conexión

Color de primer plano

Color de fondo

Vista previa

El veloz murciélago hindú comía feliz cardillo y kiwi.

Relación de contraste

17.35:1

Texto normal AA

Aprobado

Texto normal AAA

Aprobado

Texto grande AA

Aprobado

Texto grande AAA

Aprobado

Componentes UI AA

Aprobado

Por qué usar esta herramienta

Introduce dos colores y obtén al instante la razón de contraste WCAG 2.1 y los resultados de aprobado/reprobado para texto normal, texto grande y componentes de interfaz no textuales.

Calcula la razón de contraste exacta basada en luminancia entre un color de primer plano y uno de fondo.

Indica el cumplimiento de los umbrales WCAG 2.1 AA y AAA para texto normal (4.5:1, 7:1), texto grande (3:1, 4.5:1) y UI no textual (3:1).

Cómo usarla

01Elige los colores de primer plano y fondo con el selector o pega un valor hex/rgb.

02Lee la razón y los indicadores AA/AAA, todos los umbrales se muestran en paralelo.

03Pulsa «Intercambiar colores» para invertir y volver a verificar rápidamente.

Revisiones rápidas antes de copiar

Confirma que el formato de entrada es el que esperabas.

Revisa el resultado antes de usarlo en un documento, URL, configuración o mensaje.

Copia solo el resultado que necesitas.

Preguntas frecuentes

¿Cuál es la diferencia entre AA y AAA?

AA es la línea base exigida por la mayoría de las normativas de accesibilidad. AAA es un nivel mejorado más estricto. Para texto normal, AA es 4.5:1 y AAA es 7:1; para texto grande, AA es 3:1 y AAA es 4.5:1.

¿Qué se considera texto grande?

WCAG define el texto grande como mínimo 18 pt (24 px) regular, o 14 pt (18,66 px) en negrita. Lo que sea menor entra en los umbrales de texto normal.

¿Cómo se calcula la razón?

Seguimos la fórmula WCAG 2.1: convertimos cada color a luminancia relativa sRGB, luego calculamos (L1 + 0,05) / (L2 + 0,05) donde L1 es el más claro. La razón va de 1:1 a 21:1.

Herramientas relacionadas

Conversor de Colores

Convierte colores entre HEX, RGB, HSL y OKLCH con muestra en vivo y control deslizante de tono.

Verificador de Contraste de Color

Conversor de Colores→

Conversor de Colores