La relación de contraste va de 1:1, donde el texto es invisible sobre su fondo, hasta 21:1, que es negro puro sobre blanco puro. Entre esos extremos, importan cuatro umbrales.
| Relación | Nivel | Se aplica a |
|---|---|---|
| 4.5:1 | AA | Texto normal del cuerpo. Trátalo como el piso. |
| 3:1 | AA | Texto grande, y componentes de interfaz y anillos de foco. |
| 7:1 | AAA | Texto del cuerpo, reforzado. |
| 4.5:1 | AAA | Texto grande, reforzado. |
AA es el nivel que cita la mayoría de la legislación de accesibilidad, así que 4.5:1 para el texto del cuerpo es el requisito práctico, no una aspiración.
Qué cuenta como "texto grande"
Esta es la parte que la gente entiende mal, casi siempre a su favor.
Grande significa 24 px o más, o 19 px o más si está en negrita. (La especificación dice 18.66px y 14px en puntos; las cifras en píxeles son el redondeo habitual.) Eso es realmente grande: más que casi todo el texto del cuerpo, más que la mayoría de los subtítulos.
La trampa es razonar al revés: tu gris sobre blanco queda en 3.4:1, eso no pasa AA para texto normal, así que decides que 18 px cuenta como grande y sigues adelante. No cuenta, y a alguien que usa un lector de pantalla o que tiene baja visión no le importa lo que decidiste. Si la relación no pasa, cambia el color.
De dónde sale el número
La relación de contraste se calcula a partir de la luminancia relativa: cuánta luz emite cada color, ponderada por lo sensible que es la visión humana al rojo, al verde y al azul. El verde aporta alrededor del 72% del brillo percibido, el rojo el 21% y el azul el 7%.
Esa ponderación explica algo que de otro modo parece un error. El azul puro sobre blanco da 8.6:1 y pasa todo, mientras que el amarillo puro sobre blanco da 1.07:1 y es prácticamente invisible, aunque los dos sean "un color saturado sobre blanco". El azul es oscuro para el ojo; el amarillo es casi tan brillante como el blanco. La saturación no tiene nada que ver.
Así que esto no se puede calcular a ojo. Hay que medirlo, que es lo que hace el verificador de contraste de aquí: le das un color de texto y un fondo, y te informa la relación, marca AA y AAA como aprobado o no en los dos tamaños de texto, y muestra el par a tamaños reales para que veas qué significa el número. Si solo tienes un color y quieres la relación contra texto negro y blanco puros, el conversor de color también lo muestra.
Las dos cosas que la relación no te dice
1. No dice nada sobre el daltonismo
Un texto rojo y un texto verde pueden tener los dos un contraste excelente sobre un fondo blanco y ser completamente indistinguibles entre sí para cerca del 8% de los hombres. La relación mide cada color contra su fondo, no los colores entre sí.
La regla que sale de ahí: nunca uses el tono por sí solo para transmitir significado. Agrega un icono, una etiqueta, un patrón, una posición. "Haz clic en el botón verde" es una instrucción que algunos de tus usuarios no pueden seguir.
2. Pasar es un piso, no una meta
Un texto exactamente en 4.5:1 cumple y aun así cansa leerlo durante un rato largo. Si estás componiendo el cuerpo de un artículo, apunta más alto: 7:1 o mejor es cómodo, y no te cuesta más que un gris un poco más oscuro.
La moda del texto de cuerpo en gris claro sobre blanco es la falla de accesibilidad más común de la web moderna, y es totalmente autoinfligida. #999 sobre blanco es 2.8:1. No pasa.
Casos que agarran a la gente desprevenida
- Texto de placeholder. Es texto. Necesita 4.5:1. Los valores por defecto del navegador normalmente no lo alcanzan, así que si dependes de los placeholders para etiquetar campos —que ya es un problema en sí mismo— tienes dos fallas apiladas.
- Controles deshabilitados. Están exentos del requisito, lo que es un hueco real de la especificación y no un permiso para volverlos ilegibles.
- Texto sobre imágenes. La relación tiene que cumplirse contra el peor píxel que hay detrás del texto, no contra el promedio. Una capa de oscurecimiento o un panel sólido suele ser el único arreglo confiable.
- Indicadores de foco. Necesitan 3:1 contra lo que tienen al lado. El contorno por defecto del navegador normalmente pasa; el
outline: noneque la gente agrega para "dejarlo limpio" es una regresión de accesibilidad real. - Logos. Realmente exentos.
- Modo oscuro. Revisar el tema claro y dar por hecho que el oscuro está bien es la razón por la que la mitad de los modos oscuros salen rotos. Son sistemas de color separados y necesitan revisiones separadas.
Un atajo que funciona
En lugar de probar colores de a uno hasta que alguno pase, fija el tono y barre la luminosidad. Elige el tono de tu marca, genera una escala que vaya de muy claro a muy oscuro y revisa la relación en cada paso. Terminas con un conjunto pequeño de combinaciones que sabes que funcionan —este color de texto sobre ese fondo— en vez de volver a decidirlo cada vez.
Así es como lo resuelven los design systems, y es mucho más rápido que el ciclo de prueba y error.
La forma más rápida de revisar un par concreto es el verificador de contraste: pon el color del texto y el del fondo, lee la relación y ajusta uno de los dos hasta que AA deje de fallar. Para la escala de luminosidad descrita arriba, el conversor de color la genera, así que puedes encontrar el paso en el que el color de tu marca empieza a pasar en vez de adivinarlo.
Si te quedaste con la duda de por qué la herramienta ofrece HSL cuando piensas en hex, vale la pena dedicarle diez minutos: HEX, RGB y HSL explicados cuenta por qué hex está bien para guardar un color y es pésimo para ajustarlo, que es exactamente el problema que te encuentras en cuanto falla una revisión de contraste.
Preguntas frecuentes
¿Qué relación de contraste exige la accesibilidad?
4.5:1 para el texto normal del cuerpo y 3:1 para el texto grande, para cumplir WCAG AA, que es el nivel que cita la mayoría de la legislación de accesibilidad. AAA pide 7:1 en el texto del cuerpo y 4.5:1 en el texto grande.
¿Qué cuenta como texto grande a efectos de contraste?
24px o más, o 19px o más si está en negrita. Eso es más grande que la mayoría del texto del cuerpo y que la mayoría de los subtítulos, así que en la práctica el requisito de 4.5:1 se aplica a casi todo el texto de una página típica.
¿Una buena relación de contraste significa que mis colores son seguros para el daltonismo?
No. El contraste mide cada color contra su fondo, no contra otros colores. Un texto rojo y uno verde pueden pasar los dos y seguir siendo indistinguibles para cerca del 8% de los hombres. Nunca uses el tono por sí solo para transmitir significado.
¿El texto gris sobre blanco es accesible?
Depende del gris. #999 sobre blanco es 2.8:1 y no pasa. #767676 sobre blanco es alrededor de 4.5:1 y pasa por poco. El texto de cuerpo en gris claro es la falla de accesibilidad más común de la web moderna.
¿Hay que revisar el contraste por separado en modo oscuro?
Sí. El tema claro y el oscuro son sistemas de color separados, y una combinación que pasa en uno falla habitualmente en el otro. Revisar solo el tema claro es la razón por la que salen rotos la mayoría de los modos oscuros.
Última actualización 19 de septiembre de 2026