Los números que necesitas
Las Pautas de Accesibilidad para el Contenido Web (WCAG; las versiones 2.1 y 2.2 tienen las mismas reglas de contraste) definen tres criterios de contraste. La mayoría de las leyes y licitaciones se refieren al nivel AA, así que ese es el objetivo práctico para sitios web y aplicaciones.
Para revisar una combinación, escribe el color del texto en la herramienta de abajo (sirve cualquier color CSS: un código hex, rgb(), hsl() o un nombre), pon el color de fondo en Fondo y mira el resultado de cada línea. Intercambiar invierte los dos colores, algo útil para el modo oscuro.
| Qué estás revisando | Nivel AA | Nivel AAA |
|---|---|---|
| Texto normal (párrafos, etiquetas, enlaces) | 4,5:1 | 7:1 |
| Texto grande (24 px normal o unos 19 px en negrita o más) | 3:1 | 4,5:1 |
| Iconos, bordes de campos, indicadores de foco, líneas de gráficos | 3:1 | Sin nivel AAA aparte |
| Logotipos, imágenes decorativas, controles desactivados | Sin requisito | Sin requisito |
Pruébalo aquí: Comprobador de contraste de color
Abrir la herramienta completaCómo se calcula el ratio de contraste
El ratio compara la luminancia relativa, es decir, lo brillante que se ve un color en una pantalla sRGB estándar, de 0 para el negro a 1 para el blanco. Primero cada canal rojo, verde y azul pasa de la escala de 0 a 255 a la de 0 a 1 y se linealiza (los valores se elevan aproximadamente a 2,4, porque los valores de pantalla llevan corrección gamma). Después se ponderan: luminancia = 0,2126 x rojo + 0,7152 x verde + 0,0722 x azul.
Esos pesos explican muchas sorpresas. El verde es el que más aporta al brillo percibido y el azul el que menos, por eso un texto azul puro sobre negro sale muy mal y el amarillo sobre blanco es casi invisible (alrededor de 1,07:1). El ratio en sí es (luminancia del color claro + 0,05) / (luminancia del color oscuro + 0,05). El 0,05 representa el reflejo de la pantalla y evita dividir entre cero.
El tono no aparece en la fórmula. Dos colores pueden verse claramente distintos, como el rojo y el verde, y tener casi la misma luminancia, que es justo la combinación que las personas con daltonismo rojo verde no logran distinguir.
Combinaciones reales y sus ratios
El texto gris es donde fallan la mayoría de los diseños. El límite sobre blanco está en torno a #767676: un paso más claro y el texto normal ya no cumple AA.
| Color del texto sobre blanco #FFFFFF | Ratio | Resultado |
|---|---|---|
| #000000 negro | 21:1 | Cumple AA y AAA |
| #333333 gris oscuro | 12,63:1 | Cumple AA y AAA |
| #595959 gris | 7,0:1 | Cumple AAA para texto normal |
| #767676 gris | 4,54:1 | Cumple AA, el gris más claro que lo logra |
| #777777 gris | 4,48:1 | No cumple AA para texto normal |
| #999999 gris claro | 2,85:1 | No cumple ni para texto grande |
| #007BFF azul brillante | 3,98:1 | Solo texto grande |
| #0066CC azul | 5,57:1 | Cumple AA |
| #FF0000 rojo | 4,0:1 | Solo texto grande |
Qué ratio necesita cada elemento
- Texto de párrafos, etiquetas de formularios, texto de enlaces, placeholders que dan información, mensajes de error: 4,5:1.
- Títulos y otros textos de 24 px o más, o texto en negrita de unos 19 px o más (18,66 px, es decir 14 pt): 3:1.
- Texto sobre imágenes o degradados: revisa el peor punto detrás de las letras, no el promedio. Si hace falta, añade una capa sólida o semitransparente.
- Bordes de campos, contornos de casillas, estados de interruptores, iconos sin texto, anillos de foco y líneas de gráficos: 3:1 frente al color de al lado (criterio 1.4.11, contraste sin texto).
- Botones desactivados, controles inactivos, logotipos y elementos puramente decorativos están exentos. Exento no significa invisible: la gente debe poder ver que el botón desactivado existe.
- Los enlaces dentro de un texto que solo se distinguen por el color también necesitan 3:1 frente al texto que los rodea, o un subrayado.
Cómo corregir colores que no cumplen
Cambiar el tono rara vez ayuda; cambiar la luminosidad sí. Mantén el tono de la marca y oscurece el texto (sobre fondos claros) o acláralo (sobre fondos oscuros) hasta que cumpla. La fila Tonos bajo el comprobador muestra nueve versiones más claras y más oscuras de tu color, creadas en OKLCH para que los pasos se vean parejos; elige la primera que cumpla y pégala en tu diseño.
Si el color de marca debe quedarse exactamente igual, úsalo en títulos grandes, bordes o fondos de botones con texto blanco o negro, y usa una variante más oscura para el texto pequeño. Muchos sistemas de diseño guardan dos versiones de cada color de marca por esta razón: una para rellenos y otra para texto.
El texto semitransparente, por ejemplo blanco al 60 por ciento de opacidad, se mezcla primero con el fondo. El comprobador hace esa mezcla, así que el ratio que ves coincide con lo que la gente percibe. Una sorpresa frecuente: texto gris con opacidad reducida sobre una tarjeta gris no cumple aunque cada color, por separado, cumpla frente al blanco.
Modo oscuro, APCA y la ley
Los temas oscuros necesitan su propia revisión. Blanco puro sobre negro puro (21:1) es técnicamente perfecto, pero a algunas personas les produce un efecto de halo; un texto blanco roto como #E6E6E6 sobre un gris oscuro suele ser más cómodo y aun así cumple AAA. No des por hecho que una paleta que funciona en modo claro cumple en modo oscuro: los colores de acento apagados bajan a menudo de 3:1 sobre superficies oscuras.
Quizá leas sobre APCA, un modelo de contraste nuevo propuesto para un futuro WCAG 3. Tiene en cuenta el grosor de la letra y la polaridad, pero sigue siendo un borrador. Hoy la conformidad se mide con el ratio de WCAG 2, que es lo que calcula esta herramienta.
El nivel AA de WCAG 2.1 es la referencia de leyes y normas de accesibilidad en muchos países, entre ellas la norma europea EN 301 549, usada para la Ley Europea de Accesibilidad y para el sector público, y suele tomarse como criterio en casos de la ADA en Estados Unidos. Si vendes en línea al público, el contraste es uno de los requisitos más fáciles de cumplir y uno de los fallos que más reportan las auditorías automáticas.