Cómo Verificar el Contraste de Color para Accesibilidad (WCAG Explicado)

Actualizado el 1 de septiembre de 2026

Si el texto no se destaca lo suficiente del fondo, las personas con baja visión, daltonismo, o simplemente con el celular bajo sol fuerte no pueden leerlo. El contraste es uno de los problemas de accesibilidad más fáciles de medir y corregir.

Qué significa “relación de contraste”

El contraste se expresa como una razón entre la luminosidad de dos colores, desde 1:1 (idénticos, invisible) hasta 21:1 (negro puro sobre blanco puro). Se calcula a partir de la luminancia relativa de cada color, que le da más peso al verde que al rojo o al azul porque así funciona la visión humana. No necesitas hacer el cálculo — un verificador lo hace — pero por eso dos colores que parecen diferentes pueden seguir fallando.

Los umbrales del WCAG

AA, texto normal: 4,5:1 — el mínimo común, y lo que la mayoría de las organizaciones deben cumplir.
AA, texto grande: 3:1 — “grande” significa alrededor de 24px, o 19px en negrita, en adelante.
AAA, texto normal: 7:1 — un objetivo más estricto para contenido que necesita ser legible por la mayor cantidad de personas posible.

Estos umbrales se aplican al texto y a elementos de interfaz con significado, como íconos y bordes de formulario. Los elementos gráficos puramente decorativos están exentos.

Cómo verificar un par de colores

Toma el color del texto y el color directamente detrás de él (no el fondo de la página, si hay una tarjeta o superposición en medio) y pon ambos en un verificador de contraste. Te dará la relación y te dirá qué niveles pasan. Revisa los estados que la gente realmente ve: hover, enlaces visitados, texto de marcador de posición, botones deshabilitados, y texto sobre imágenes.

Corrigiendo un par que falla

Oscurece el texto o aclara el fondo — normalmente solo necesitas ajustar un poco la luminosidad, manteniendo el tono, para que la marca siga viéndose bien.
Agrega un fondo sólido detrás del texto que está sobre una foto o degradado.
Aumenta el grosor o el tamaño — el texto grande tiene un umbral más bajo, así que poner un subtítulo en negrita puede hacer que cumpla el criterio.
Nunca dependas solo del color para transmitir significado (por ejemplo, rojo/verde para error/éxito) — agrega un ícono o etiqueta para quienes no pueden distinguirlos.

Verifica la tuya ahora

Pega cualquier color en HEX, RGB o HSL en nuestro Conversor de Colores y muestra la relación de contraste contra texto blanco y negro con una insignia AA/AAA, además de una paleta a juego si necesitas un color de acento accesible. Funciona completamente en tu navegador.

Más guías

Amigo invisible (amigo secreto) online: cómo organizarlo, presupuesto y sorteo por WhatsApp