How to Check Colour Contrast for Accessibility (WCAG Explained)

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.