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.
