Saltar al contenido

Verificador de contraste de colores (WCAG AA y AAA)

Comprueba si tu texto se lee bien sobre su fondo: calcula el ratio de contraste WCAG, revisa AA y AAA para texto normal, grande y elementos de interfaz, y obtén el color más parecido que cumple.

4.64:1Bueno

Título de vista previa

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

Colores

  • Texto normal

    AA 4.5 · AAA 7

    AAAAA

  • Texto grande

    AA 3 · AAA 4.5

    AAAAA

  • Elemento UI

    AA 3

    AA

Contraste 4.64:1. Texto normal: AA Cumple, AAA No cumple. Texto grande: AA Cumple, AAA Cumple. Elemento UI: AA Cumple.

Colores que sí cumplen

Los colores más parecidos que cumplen en texto normal, con el mismo tono. Pulsa uno para aplicarlo.

AA exige 4.5:1 en texto normal y 3:1 en texto grande. AAA exige 7:1 y 4.5:1 respectivamente.

Combinaciones de ejemplo

Parejas de colores habituales: algunas cumplen y otras no. Carga una para revisarla.

Qué es el ratio de contraste y por qué importa

El ratio de contraste mide la diferencia de luminosidad entre dos colores, normalmente el color de un texto y el de su fondo. Cuanto más alto es el número, más fácil es distinguir el texto del fondo. Las Pautas de Accesibilidad para el Contenido Web (WCAG), el estándar internacional de referencia, establecen ratios mínimos según el tamaño del texto y el nivel de conformidad que se quiera cumplir.

Un contraste insuficiente no es solo un problema estético: dificulta la lectura a personas con baja visión, deficiencias de percepción del color, o simplemente a cualquiera que use su móvil bajo el sol. Cumplir con WCAG es además un requisito legal en muchos países bajo normativas de accesibilidad digital.

Niveles AA y AAA, explicados

AA (mínimo recomendado)

Es el nivel que exige la mayoría de normativas de accesibilidad, incluida la Ley Europea de Accesibilidad.

Texto normal
4,5:1
Texto grande / UI
3:1

AAA (nivel reforzado)

Recomendado para contenido crítico o audiencias con necesidades de accesibilidad más altas, pero no siempre exigible en todo el sitio.

Texto normal
7:1
Texto grande
4,5:1

Cómo comprobar el contraste en tres pasos

  1. Elige texto y fondo

    Pulsa Color de texto o Color de fondo y ajústalo con el selector, el cuentagotas o escribiendo su código. Admite transparencia.

  2. Revisa cada uso

    Verás el ratio y si cumple AA y AAA para texto normal, texto grande y elementos de interfaz como iconos o bordes de campos.

  3. Aplica una sugerencia

    Si no cumple, la herramienta propone el color más parecido que sí lo hace, con el mismo tono. Un clic y listo.

Qué cuenta como texto grande

WCAG considera texto grande el que mide al menos 18 puntos (24 px) o 14 puntos en negrita (unos 18,66 px). Como sus trazos son más gruesos, se lee con menos contraste: basta con 3:1 para AA y 4,5:1 para AAA.

Todo lo demás es texto normal, que necesita 4,5:1 para AA y 7:1 para AAA. Ojo con los textos pequeños de apoyo, como notas, etiquetas o pies de foto: suelen ser los que fallan.

Contraste en botones, iconos y campos

El contraste no es solo cosa del texto. WCAG pide un mínimo de 3:1 para los elementos de interfaz que hay que ver para usar la página: el borde de un campo de formulario, los iconos que transmiten información, el indicador de foco o los estados de un control.

Un borde gris muy claro sobre blanco puede parecer elegante, pero muchas personas no distinguirán dónde está el campo.

No necesitan cumplir

  • Logotipos
  • Texto decorativo
  • Controles desactivados
  • Imágenes y fotos

Cómo se calcula el ratio de contraste

El ratio compara la luminancia relativa de los dos colores, es decir, cuánta luz emite cada uno una vez corregida la respuesta del ojo.

L1
Luminancia relativa del color más claro, de 0 (negro) a 1 (blanco).
L2
Luminancia relativa del color más oscuro.
0.05
Compensa la luz ambiental que se refleja en la pantalla. Por eso el máximo es 21:1 (blanco sobre negro) y el mínimo 1:1 (el mismo color).

(L1 + 0.05) / (L2 + 0.05)

Aa(1 + 0.05) / (0 + 0.05) = 21:1

Preguntas frecuentes

Para texto normal, un ratio de al menos 4,5:1 cumple el nivel AA de WCAG, que es el estándar mínimo recomendado. Para un contraste reforzado (nivel AAA), se necesita un ratio de 7:1.

AA es el nivel mínimo que exige la mayoría de normativas de accesibilidad. AAA es un nivel reforzado, más exigente, recomendado para contenido crítico pero no siempre obligatorio en todo un sitio.

Porque el tamaño y el grosor de las letras grandes ya facilitan su lectura por sí solos, así que WCAG permite un ratio menor (3:1 en AA) frente al 4,5:1 que exige el texto normal.

El que mide al menos 18 puntos (24 px) o 14 puntos en negrita (unos 18,66 px). Necesita 3:1 para AA y 4,5:1 para AAA, frente al 4,5:1 y 7:1 del texto normal.

En muchos países sí, especialmente para administraciones públicas y, cada vez más, para empresas privadas bajo normativas como la Ley Europea de Accesibilidad. Aunque no te obligue legalmente, cumplir WCAG mejora la experiencia de todos tus usuarios.

Se calcula a partir de la luminancia relativa de ambos colores, una medida de cuánta luz reflejan, y se expresa como una proporción entre 1:1 (sin contraste, mismo color) y 21:1 (el máximo posible, blanco puro sobre negro puro).

No. WCAG exime a los logotipos, al texto decorativo y a los controles desactivados. Sí se aplica a botones activos, campos de formulario, iconos con significado y al indicador de foco, que necesitan al menos 3:1.

El ratio se calcula sobre el color que realmente se ve: un texto semitransparente se mezcla con su fondo antes de medirlo, y un fondo semitransparente se mezcla con blanco. Puedes añadir transparencia desde el campo de color de la herramienta.

Usa las sugerencias de la herramienta: te propone el color de texto o de fondo más parecido que cumple AA o AAA, manteniendo el mismo tono, para que tu marca no cambie. También puedes explorar variaciones del color en el selector de color.

Más herramientas