Cómo se ve
Texto grande, 24 px
Texto normal a 16 píxeles, que es el tamaño en el que se lee casi todo.
Texto pequeño, 14 px
¿Qué exige cada nivel?
Tres criterios de WCAG 2.2 dependen del contraste de color. Estos son sus umbrales y a qué se aplican, que es la parte que más se confunde.
| Criterio | Nivel | Umbral | A qué se aplica |
|---|---|---|---|
| 1.4.3 Contraste (mínimo) | AA | 4,5:1 · 3:1 en texto grande | Todo el texto de la interfaz |
| 1.4.6 Contraste (mejorado) | AAA | 7:1 · 4,5:1 en texto grande | Cuando el pliego pide AAA |
| 1.4.11 Contraste no textual | AA | 3:1 | Controles, iconos y partes de un gráfico que hagan falta para entenderlo |
Comprobarlo una vez no basta
Esta página te dice si dos colores cumplen hoy. El problema llega después: alguien aclara un gris porque se ve más elegante, aparece una tarjeta con otro fondo, entra un rediseño… y lo que estaba bien deja de estarlo sin que nadie se dé cuenta.
En este sitio esa comprobación no depende de que alguien se acuerde. Cada vez que publicamos una versión nueva, un programa repite este mismo cálculo con todos los colores de texto contra todos los fondos, en el modo claro y en el oscuro, incluidos los casos difíciles: un texto sobre un panel translúcido, donde el color que se ve es una mezcla de dos. Si una sola combinación baja de 4,5:1, la publicación se detiene y el cambio no llega a la web.
Esa es la diferencia entre una revisión y una garantía. Una revisión dice cómo estaban las cosas el día que se miró; una garantía es que el fallo, sencillamente, no se puede publicar.
Preguntas frecuentes
¿Qué significa exactamente «4,5:1»?
Es la razón entre las luminancias relativas de los dos colores, más un pequeño desplazamiento que evita dividir por cero. Va de 1:1 —dos colores idénticos— a 21:1, que es el negro puro sobre el blanco puro. El 4,5 sale de compensar la pérdida de contraste de sensibilidad de alguien con visión 20/40, que es lo que la norma toma como referencia.
¿Qué cuenta como texto grande?
Desde 24 píxeles (18 puntos), o desde 18,66 píxeles (14 puntos) si está en negrita. Por debajo de eso es texto normal y el umbral sube a 4,5:1. Ojo con el detalle: una tipografía de trazo muy fino a 24 px cumple la norma y sigue siendo difícil de leer; la norma es el suelo, no el objetivo.
¿Por qué el resultado cambia si pongo transparencia?
Porque lo que se compara es lo que se ve. Un texto gris al 60% sobre blanco no contrasta como el gris que escribiste, sino como la mezcla que resulta. La herramienta compone el color de delante sobre el de detrás antes de medir, que es justo el paso que se olvida cuando se hace a ojo.
¿Se aplica a los iconos y a los bordes?
Sí, por el criterio 1.4.11: los elementos de interfaz y las partes de un gráfico que hacen falta para entenderlo necesitan 3:1 contra lo que tengan al lado. El borde de un campo de formulario, el contorno de un botón fantasma o el trazo de un icono informativo entran ahí. Lo puramente decorativo, no.
¿Y el color del foco del teclado?
También, y es de lo que más se incumple. El indicador de foco necesita contraste suficiente contra el fondo y, desde WCAG 2.2, tiene además su propio criterio de tamaño y visibilidad (2.4.11). Un contorno azul sobre fondo azul cumple el diseño y deja fuera a quien navega con teclado.
¿La razón de contraste lo dice todo?
No, y conviene saberlo: la fórmula de WCAG 2.x es un modelo sencillo que se queda corto sobre todo en fondos muy oscuros, donde dos pares con la misma razón se leen distinto. El borrador de WCAG 3 propone otro cálculo, APCA, que modela mejor la percepción. Mientras tanto, lo exigible en un contrato es esto, así que esto es lo que se mide aquí.
¿Los colores se envían a algún sitio?
No. El cálculo es aritmética y ocurre en tu navegador. Lo único que sale de la página es lo que tú decidas compartir: la dirección lleva los dos colores en el fragmento, así que puedes pasarle el enlace a alguien y verá exactamente el mismo caso.
¿Cómo elegís el color que proponéis?
Se conserva el tono y la saturación del tuyo y solo se mueve la luminosidad, hacia donde haga falta, hasta el primer valor que alcanza el umbral. La respuesta útil para quien trae una marca no es «usa negro», es «tu mismo azul, un poco más oscuro»: sigue siendo tu color.
El contraste es el criterio fácil
Es el que se mide con una fórmula. Los que cuestan son el foco del teclado, el orden de tabulación y que un formulario se pueda rellenar sin ratón. Eso se audita y se arregla.
Respondemos en menos de 24 horas hábilesBogotá · UTC−5