Diseño · Guía práctica
Texto gris sobre blanco: dos colores casi iguales pueden quedar a distinto lado del contraste mínimo
Un cálculo propio con #767676 y #777777 muestra por qué no conviene redondear una razón de contraste para darla por suficiente.
Elegir un gris por su aspecto en una pantalla no basta para comprobar el contraste del texto de una web. La explicación de WCAG 2.2 para el criterio 1.4.3 utiliza una razón entre luminancias relativas: el umbral AA general es 4,5:1 y para texto grande es 3:1, con las excepciones que describe el criterio. Los logotipos tienen un tratamiento específico; no conviene extenderlo a todo el texto que rodea una marca.
Hemos calculado dos parejas de colores sólidos sRGB mediante la fórmula publicada por W3C, sobre fondo blanco #FFFFFF y sin transparencia. El gris #767676 resulta aproximadamente 4,54:1; #777777 ronda 4,48:1. Los dos valores se parecen visualmente, pero el segundo no alcanza 4,5. Son cálculos de esos códigos, no medidas físicas de una pantalla ni resultados de pruebas con lectores.
El criterio explica que los umbrales no deben alcanzarse redondeando un valor inferior. Mostrar 4,48 con un único decimal como 4,5 no cambia la comparación matemática. Para una ficha de diseño, conserva el código de ambos colores, la razón con precisión suficiente y la regla que estás comprobando. Separar el dato del formato evita convertir una casilla redondeada en una aprobación que no corresponde.
En nuestro ejemplo, elegir #767676 en lugar de #777777 cambia el resultado de esta comprobación concreta para texto normal sobre blanco. No certifica toda una página ni convierte ese gris en una elección universal. Si cambian el fondo, la opacidad, un degradado o el estado del control, hay que volver a examinar la combinación que realmente utiliza el texto.
Una revisión práctica puede recorrer cuerpo de texto, enlaces, ayuda de formularios y mensajes de error, anotando el fondo de cada estado. No basta con medir el titular y asumir que todos los demás componentes heredan la misma pareja. También hay otros criterios sobre interacción y contenido que esta cuenta no evalúa. Para texto grande debe comprobarse que realmente entra en esa categoría, sin decidirlo solo porque parezca destacado.
La fórmula toma los canales sRGB, los convierte a valores lineales, calcula la luminancia y forma la razón con el término 0,05. Esa secuencia se ha utilizado para los dos cálculos indicados. Un contraste próximo al límite deja poco margen a cambios del diseño; revisar valores y contexto es más útil que perseguir un redondeo favorable. Esta guía aporta un ejemplo reproducible, sin afirmar una auditoría completa de accesibilidad ni una prueba humana.
Comprobación práctica
- Identifica colores y fondo reales
- Calcula sin perder precisión
- Compara con el umbral aplicable
- Revisa cada estado del diseño