Verificador de contraste de color WCAG
Define un color de texto y un color de fondo y observa la relación de contraste, qué niveles WCAG aprueba y cómo se ve realmente el texto en tres tamaños. Si falla, un botón sube o baja el color del texto hasta que pase.
El color de las letras en sí, incluido el texto de enlaces y botones.
El color que está justo detrás del texto, que no siempre es el fondo de la página.
Texto grande, 24 px en negrita
Texto normal a 16 px. Es el tamaño en el que se compone la mayor parte de una página, y el tamaño para el que se escribió el umbral de 4.5:1.
Letra chica a 13 px: pies de foto, ayudas de formulario, notas al pie, la tipografía pequeña que nadie prueba.
Cómo se calcula la relación
El número no es una diferencia entre dos colores. Es una relación entre dos luminancias, y llegar hasta ella toma tres pasos.
Primero cada canal se divide por 255 y se deshace la curva gamma sRGB, porque el valor guardado en un código hexadecimal no es proporcional a la luz que emite una pantalla. Después los tres canales lineales se ponderan y se suman: 0.2126 × R + 0.7152 × G + 0.0722 × B. El verde carga con la mayor parte del peso porque la visión humana es abrumadoramente sensible a él, y por eso un verde puro y un azul puro que se ven igual de "medios" tienen luminancias muy distintas. Por último los dos resultados entran en (más claro + 0.05) / (más oscuro + 0.05).
Vale la pena conocer ese 0.05. Representa la luz ambiente que se refleja en la pantalla, y es la razón por la que la escala llega como máximo a 21:1 en vez de a infinito, y por la que dos colores muy oscuros siempre quedan cerca de 1:1 por distintos que se vean en una habitación a oscuras.
Como la fórmula ordena las dos luminancias antes de dividir, es simétrica. Intercambiar texto y fondo da exactamente el mismo número. El botón de intercambio de aquí cambia la vista previa, no el resultado.
Para qué sirve cada umbral
- 4.5:1 — WCAG AA para texto normal. Es el número al que se refiere la mayoría de la legislación de accesibilidad, y el primero que revisa una auditoría.
- 3:1 — AA para texto grande, que WCAG define como 18pt (24px) normal o 14pt (18.66px) en negrita. Ten en cuenta que lo que vale es el tamaño renderizado, no el de tu archivo de diseño.
- 7:1 — AAA para texto normal, y 4.5:1 para texto grande. Vale la pena apuntar a él en lecturas largas.
- 3:1 — el mínimo para componentes de interfaz y gráficos con significado bajo WCAG 2.1. Bordes de campos, estados de interruptores, iconos e indicadores de foco caen aquí, y son los que más se pasan por alto.
Dos cosas están exentas de forma explícita: los logotipos y el texto que forma parte de un control inactivo o deshabilitado. Un botón atenuado puede fallar sin problema. Un placeholder dentro de un campo no, porque la gente lo lee.
Dónde se equivoca el número de WCAG 2
Dicho sin rodeos: se sabe que la fórmula es imprecisa en algunos casos, y aun así es con la que te miden.
Su punto más débil es el texto claro sobre fondos oscuros. El mismo par de colores recibe un solo número sin importar cuál de los dos sea el texto, pero en la práctica claro sobre oscuro se lee distinto de oscuro sobre claro, en parte porque el texto claro se expande ópticamente sobre el fondo en tamaños pequeños. Hay paletas de modo oscuro que aprueban con holgura y aun así cansan la vista; otras fallan y se leen perfectamente.
Tampoco sabe nada del grosor de la fuente más allá de la división burda entre texto normal y texto grande. Una tipografía de peso 300 y trazo fino a 4.5:1 cuesta más de leer que una de peso 600 a 4:1, porque el anti-aliasing adelgaza todavía más esos trazos. Trata el umbral como un piso para tipografías de texto sólidas, y deja margen para todo lo que sea ligero o condensado.
APCA, el método de contraste que se está desarrollando para WCAG 3, resuelve las dos cosas: distingue la dirección y toma en cuenta el tamaño y el grosor. Todavía no es un requisito de conformidad, así que esta herramienta implementa WCAG 2, que es lo que citan hoy tus obligaciones legales y tus auditores.
Lo que esta herramienta no puede ver
Funciona con dos colores opacos. Si tu texto o su fondo tienen canal alfa, aplana el color primero — un texto blanco al 70% de opacidad sobre un panel azul es un color distinto del blanco, y pegar #FFFFFF aquí te dará una respuesta demasiado optimista.
Tampoco puede ayudarte con texto sobre una fotografía, un degradado o un video. Ahí la relación cambia píxel a píxel, y el único número que importa es el peor que haya en cualquier punto bajo el texto. Las soluciones habituales son una capa sólida detrás del texto o una sombra en las letras, y ninguna se puede medir aquí.
Por último, el contraste no es daltonismo. Dos colores pueden aprobar a 7:1 y seguir siendo confundibles para alguien con una deficiencia en la visión del color, porque la relación solo mide luminosidad. Si un rojo y un verde de tu interfaz significan cosas distintas, necesitan además una forma, un icono o una etiqueta diferentes.
Preguntas frecuentes
¿Qué relación de contraste necesito para aprobar WCAG?
Al menos 4.5:1 para texto normal y 3:1 para texto grande para cumplir AA, el nivel al que se refiere la mayoría de las leyes de accesibilidad. AAA pide 7:1 y 4.5:1. Los componentes de interfaz, como los bordes de los campos y los anillos de foco, necesitan 3:1.
¿Por qué la relación muestra 4.49 cuando otras herramientas dicen 4.5?
Esta herramienta trunca en vez de redondear, porque un 4.5 redondeado que en realidad es 4.497 falla la prueba aunque parezca que aprueba. Si aquí ves 4.49, estás por debajo del umbral y una herramienta de auditoría lo dirá.
¿Intercambiar el texto y el fondo cambia algo?
El número no. La fórmula de WCAG ordena las dos luminancias antes de dividir, así que la relación es idéntica en los dos sentidos. Lo que sí cambia es cómo se ve el par, y por eso está la vista previa.
¿Qué tamaño cuenta como texto grande?
24px, o 18.66px en negrita, al tamaño que el navegador realmente renderiza. WCAG lo expresa como 18pt y 14pt en negrita. Recuerda que un usuario que hace zoom, o una página con un tamaño de fuente raíz menor, puede sacar al texto de la categoría de texto grande.
¿Cómo compruebo texto semitransparente?
Calcula primero el color aplanado. Mezcla el color del texto con lo que haya detrás a la opacidad que estés usando, toma el hexadecimal resultante y prueba ese. Esta herramienta asume que los dos colores son totalmente opacos.
Última actualización 19 de septiembre de 2026