Comprobar contraste
El comprobador de contraste mide un color de texto frente a su fondo e informa de la relación WCAG 2.2, de los niveles que supera y, junto a ellos, del contraste de claridad APCA. Antes de medir, compone un primer plano translúcido —por eso la mayoría de comprobadores no coinciden con el navegador— y, cuando una pareja no supera la prueba, busca el color aprobado más cercano moviendo la claridad en OKLCh, de modo que el resultado conserva el tono de partida.
Relación5.13:1
Este es un ejemplo de texto normal. El párrafo usa el tamaño que WCAG considera texto normal.
Y este es un texto grande.
Texto normal: menos de 18pt (24 px CSS) con grosor normal, o menos de 14pt (aprox. 18,67 px CSS) en negrita. WCAG 1.4.3.
Nivel reforzado para los mismos tamaños. WCAG 1.4.6.
Al menos 18pt (24 px CSS) con grosor normal, o 14pt (aprox. 18,67 px CSS) en negrita. WCAG 1.4.3.
Iconos, indicadores de foco, bordes de campos y leyendas de gráficos. WCAG 1.4.11.
Texto normal de 18 px o más con grosor normal. APCA es un modelo propuesto para WCAG 3; no tiene aprobado o suspenso. El valor orienta sobre el tamaño y el grosor del texto.
5.13:1#6d6d74#ffffff¿Cómo funciona Comprobar contraste?
El contraste es una razón entre dos luminancias relativas. Cada canal se extrae de su codificación sRGB —la función de transferencia por tramos de IEC 61966-2-1, no una gamma plana de 2.2— y se pondera 0.2126 para el rojo, 0.7152 para el verde y 0.0722 para el azul, que es aproximadamente cuánto aporta cada uno a lo que el ojo lee como brillo. Las dos luminancias entran en (lighter + 0.05) / (darker + 0.05), y ese 0.05 es un margen por destello que representa la luz que tu pantalla refleja desde la habitación.
Por qué un color translúcido necesita componerse antes
Un color con 50% de alfa no tiene una relación de contraste propia. Lo que ve quien lee es la mezcla de ese color con lo que hay detrás, así que lo que se mide es la mezcla. Los comprobadores que se saltan este paso informan de la relación del color sin mezclar, que siempre sale mejor que la verdad —y es la causa más común de que una herramienta no coincida con el inspector del propio navegador.
Dónde se sabe que WCAG 2.x falla
La fórmula 2.x nunca se derivó de investigaciones sobre legibilidad; es una simple razón de luminancias y falla en ambos sentidos. Aprueba algún gris claro sobre blanco que nadie puede leer y no supera algunas parejas oscuras que se leen perfectamente. Además, trata negro sobre blanco y blanco sobre negro como idénticos con 21:1, cuando el texto claro sobre fondo oscuro es, de forma medible, más difícil de leer con la misma relación.
APCA es el modelo detrás del borrador de WCAG 3. Tiene en cuenta la polaridad —el signo del número te dice en qué orden está la pareja— y devuelve un valor de contraste de claridad, Lc, en lugar de una razón. Aquí se informa junto a la razón 2.x y nunca en su lugar, porque la conformidad todavía se mide contra 2.x y una herramienta que cambiara la métrica sin avisar diría a la gente que ha superado una auditoría que no ha superado.
Cómo se encuentra la sugerencia
Cuando una pareja no supera la prueba, el color aprobado más cercano se busca recorriendo la claridad en OKLCh y manteniendo fijos el tono y el croma. Si en cambio se recorren los canales sRGB, el tono se desvía al oscurecerse el color, y la sugerencia vuelve siendo un color distinto al de tu paleta. La búsqueda se aleja primero del fondo —más oscuro en una página clara, más claro en una oscura—, de modo que un color de marca oscuro sigue siendo oscuro en lugar de volverse casi blanco.
Los dos colores
foreground #6d6d74 background #ffffff
Lo que se informa
ratio 5.13 : 1 normal AA pass (needs 4.5) normal AAA fail (needs 7) large AA pass (needs 3) APCA Lc 75.4
¿Qué opciones y casos límite admite Comprobar contraste?
| Parámetro | Tipo | Valor predeterminado | Comportamiento y casos límite |
|---|---|---|---|
| 4.5:1 | AA | 1.4.3 | Texto normal: menos de 18pt (24 px CSS) con grosor normal, o menos de 14pt (aprox. 18,67 px CSS) en negrita. El nivel AA exige al menos 4,5:1. |
| 3:1 | AA | 1.4.3 | Texto grande: al menos 18pt (24 px CSS) con grosor normal, o 14pt (aprox. 18,67 px CSS) en negrita. Utiliza el tamaño y el grosor calculados de la fuente, en lugar de la declaración de un elemento padre. |
| 7:1 | AAA | 1.4.6 | Contraste mejorado para texto normal. Rara vez es requerido fuera de la contratación pública, y es difícil de alcanzar con una paleta de marca. |
| 3:1 | AA | 1.4.11 | Elementos no textuales: iconos, indicadores de enfoque, bordes de entrada, series de gráficos, el borde de un botón. Añadido en WCAG 2.1 y sigue siendo la regla más olvidada. |
| Lc 60 | APCA | borrador | Aproximadamente donde 16px negrita o 24px normal se vuelve cómodo. APCA no tiene aprobado o reprobado — el número se mapea a un tamaño y peso. |
| Lc 90 | APCA | borrador | Suficiente para cualquier tamaño y peso, incluidas las fuentes finas y el texto largo del cuerpo. |
| Alfa | 0–1 | 1 | Un primer plano translúcido se compone sobre el fondo antes de medir, porque eso es lo que ve el lector. |
| Texto deshabilitado | — | exento | WCAG exime por completo los controles inactivos de 1.4.3. Es legal dejarlos ilegibles, pero aún vale la pena arreglarlo. |
Preguntas frecuentes
¿Qué relación de contraste necesito para superar WCAG?
En el nivel AA se exige 4,5:1 para texto normal y 3:1 para texto grande. Se considera grande a partir de 18pt (24 px CSS) con grosor normal, o 14pt (aprox. 18,67 px CSS) en negrita. El nivel AAA eleva estos valores a 7:1 y 4,5:1. WCAG 1.4.11 exige por separado 3:1 para la información visual necesaria para identificar los componentes de la interfaz y sus estados, y para las partes significativas de los gráficos, con las excepciones previstas.
¿Por qué aquí sale una relación distinta a la de otro comprobador?
Casi siempre es el alfa. Un primer plano con menos de 100% de opacidad no tiene relación propia: lo que ve quien lee es ese color mezclado con el fondo, así que lo que se mide es la mezcla. Esta herramienta compone primero; varios comprobadores populares no lo hacen e informan de una relación mejor de la que la página tiene en realidad. Si ambos colores son opacos y las cifras siguen sin coincidir, una de las dos herramientas está aplicando una gamma plana de 2.2 en lugar de la función de transferencia por tramos de sRGB.
¿Basta 4.5:1 para una fuente de 14px?
Es lo que exige AA, y es un margen estrecho. 4.5:1 se fijó como mínimo, no como objetivo, y a 14px con un trazo fino, en un teléfono a la luz del día, es de verdad difícil. Si el texto importa, apunta a pasar de 7:1 o sube el tamaño. APCA resulta aquí más útil que la razón 2.x, porque ata el número a un tamaño y un peso en lugar de tratar todo el texto igual.
¿Debo usar APCA o WCAG 2.x?
Ambas, para fines distintos. WCAG 2.x es contra lo que hoy se mide la conformidad, así que es lo que declaras. APCA es la mejor guía de si algo se lee de verdad, y es hacia donde va la norma. Cuando discrepan —normalmente grises claros sobre blanco, o tonos medios sobre oscuro—, APCA es en la que conviene confiar con tus propios ojos.
¿Se aplica el contraste a los botones deshabilitados y al texto placeholder?
Los controles deshabilitados quedan exentos de WCAG 1.4.3 sin más. El texto placeholder no: es texto, transmite información y necesita 4.5:1 como cualquier otro texto de lectura. El patrón habitual de un placeholder gris en torno a 2.5:1 no supera la prueba, y falla justo con la gente que más necesita esa pista.
¿Funciona con un color que tiene transparencia?
Sí. Introduce un hex de 8 dígitos o un valor rgba y el primer plano se compone sobre el fondo antes de calcular la relación, que es lo que el navegador pinta. El color compuesto se muestra para que veas el valor al que se refiere realmente la relación.
¿Qué herramientas relacionadas debería usar después?
- Test de daltonismoHaz un test de daltonismo y simula cómo ve las imágenes quien lo tiene
- Elegir colorElige un color y léelo en HEX, RGB, HSL, OKLCH o CMYK
- Códigos de colorTodos los nombres de color CSS con su HEX, RGB y HSL
- Convertir coloresConvierte entre HEX, RGB, HSL, HSV, OKLCH y CMYK en ambos sentidos