Verificador de Contraste — Contraste de Color WCAG
Comprueba la relación de contraste entre texto y fondo según WCAG AA/AAA y ve el resultado al instante.
El veloz murciélago hindú comía feliz cardillo.
El veloz murciélago hindú comía feliz cardillo.
Se calcula en local
Seguro para marcas sin lanzar
Sin cuenta
Conexión segura
Cómo funciona
- 1
Fija el color del texto
Pega el código HEX del primer plano o elígelo en la muestra.
- 2
Fija el color del fondo
Haz lo mismo con lo que quede detrás del texto: el fondo real, no blanco por defecto.
- 3
Lee el resultado
La relación y el resultado de cada nivel WCAG aparecen juntos, con texto de muestra en vivo.
Por qué usar esta herramienta
Un número, no una opinión
El contraste es una relación medible entre 1:1 y 21:1. La herramienta la calcula, así que «a mí me parece bien» deja de ser el argumento decisivo.
Todos los umbrales a la vez
AA y AAA, para texto normal y grande, evaluados juntos: ves al instante para qué usos es segura una pareja.
Vista previa en vivo
Texto real dibujado con la pareja que estás probando, para comprobar el número y el aspecto a la vez.
Corrígelo en la herramienta
Ajusta cualquiera de los dos colores y la relación se actualiza sobre la marcha, así encuentras el tono más cercano que pasa en vez de adivinarlo.
No se sube nada
El cálculo es aritmética en tu navegador: ningún valor de color se envía a ningún sitio.
Gratis y sin cuenta
Sin registro, sin límite y sin marca de agua en nada.
Qué mide realmente la relación de contraste
La relación compara la luminancia relativa de dos colores: cuánta luz refleja o emite cada uno, ponderada según la sensibilidad de la visión humana al rojo, el verde y el azul. Va de 1:1, donde los dos colores son idénticos y el texto resulta invisible, a 21:1, que es negro puro sobre blanco puro. Y lo decisivo: mide diferencia de luminosidad, no diferencia de tono. Un rojo saturado y un verde saturado de luminosidad parecida se sitúan cerca de 1:1 y son casi ilegibles juntos, aunque a alguien con visión cromática típica le parezcan lo más distinto posible. Por eso «estos dos colores contrastan mucho» es un juicio poco fiable, y por eso existe la fórmula.
Los umbrales y cuál te toca a ti
WCAG define dos niveles de conformidad. El nivel AA, que es el que apuntan la mayoría de organizaciones y de exigencias legales, pide 4,5:1 para texto de cuerpo normal y 3:1 para texto grande, entendiendo por grande 18 puntos, o 14 en negrita. El nivel AAA sube esas cifras a 7:1 y 4,5:1 y es realista para el cuerpo de un sitio de documentación, pero rara vez para una página de marketing guiada por la marca. Hay dos cosas que despistan. La primera, que la holgura del texto grande es tan generosa que un titular puede pasar mientras el párrafo de debajo, en el mismo color, no. La segunda, que los componentes de interfaz y los gráficos con significado —el borde de un campo, un icono que aporta información— tienen su propio requisito de 3:1, y una revisión que solo mire el texto se los salta por completo.
Por qué los colores de marca suspenden tan a menudo
Las paletas de marca se eligen por su carácter en superficies grandes, no por su legibilidad a 16 píxeles. Los tonos medios suelen ser la víctima: un naranja, un turquesa o un lima de marca que resulta rotundo como relleno de botón aterriza a menudo entre 2:1 y 3:1 sobre blanco, y eso no pasa nada. El impulso es discutir con el número, y el número no se mueve. La respuesta productiva es dejar el color de marca donde funciona —rellenos, bordes, tipografía grande de display— y derivar una variante más oscura para el texto de cuerpo bajando la luminosidad en HSL hasta que la relación pase, algo que el conversor de color convierte en un trabajo de dos pasos. Así se conserva la identidad del tono y el texto queda legible.
El texto gris es el fallo más habitual de la web
El texto de cuerpo gris claro sobre blanco se convirtió en convención de diseño porque queda sereno y caro en un buen monitor y una sala luminosa. Medido, `#999999` sobre blanco es unos 2,8:1 y suspende AA sin discusión; `#767676` ronda 4,5:1 y es el gris más claro que pasa para texto normal. La diferencia entre esos dos códigos hex es invisible en una revisión de diseño y decisiva para quien lee en el móvil a plena luz o con la vista algo mermada. Si una maqueta usa gris para marcar jerarquía, la solución suele estar en el tamaño y el grosor, no en la luminosidad: un gris oscuro más pequeño y de trazo más fino se lee como secundario sin bajar del umbral.
Lo que la relación no te dice
Pasar 4,5:1 es un suelo, no una garantía de buena tipografía. La fórmula ignora el tamaño de letra más allá del tramo de texto grande, ignora el grosor del trazo —una tipografía de línea finísima a 4,6:1 se lee peor que un grosor medio con la misma relación— e ignora la propia pareja cromática. Texto rojo sobre verde pasa con holgura si la luminosidad difiere lo suficiente, y sigue siendo una mala elección para aproximadamente uno de cada doce hombres con una deficiencia de visión al rojo y verde, porque pierden la distinción de tono en la que se apoya el resto del diseño. El contraste es necesario y no suficiente: supéralo primero y luego juzga la tipografía.
Comprobar texto sobre imágenes y degradados
La fórmula toma dos colores sólidos, y el texto colocado sobre una fotografía o un degradado no tiene un fondo: tiene uno distinto detrás de cada letra. El enfoque práctico es medir contra el punto más claro y el más oscuro que el texto atraviesa de verdad; si alguno suspende, lo que necesita ayuda es la maquetación y no otro color de texto. Los remedios habituales son una capa semitransparente entre imagen y texto, un panel sólido detrás del bloque, o una sombra de texto, y todos crean en la práctica un fondo controlable que ya sí se puede medir. Comprobar solo contra el brillo medio de la imagen es lo que produce titulares que desaparecen sobre una zona clara de cielo.
Errores comunes que conviene evitar
- Juzgar el contraste a ojo en un buen monitor y una sala luminosa. Es la condición más benévola a la que se enfrentará tu diseño; el umbral existe para quien lee en el móvil a pleno sol o con la vista mermada.
- Comprobar el titular y suponer que el cuerpo está bien. El texto grande supera 3:1 mientras el normal necesita 4,5:1: el mismo color puede pasar para uno y suspender para el otro en la misma página.
- Comprobar solo los colores de texto. Los bordes de campo, los anillos de foco y los iconos con significado tienen su propio requisito de 3:1, y una auditoría centrada en el texto los pasa por alto todos.
- Medir texto sobre foto contra el brillo medio de la imagen. Mide contra los puntos más claro y más oscuro que el texto atraviesa, o añade una capa para tener un único fondo medible.
- Tomar el aprobado como el final del asunto. 4,5:1 es un suelo: una tipografía de trazo finísimo, un interlineado apretado o una pareja rojo-verde pueden seguir siendo difíciles de leer con una relación que técnicamente cumple.
Comparativa
| KeroTools | Herramientas de desarrollo del navegador | Plugins de diseño | |
|---|---|---|---|
| AA y AAA juntos | Sí | Normalmente solo AA | Varía |
| Texto normal y grande | Se muestran los dos | A veces | Normalmente |
| Funciona antes de construir | Sí | No — necesita una página renderizada | Sí |
| Valores enviados a un servidor | Nunca | No | Según el plugin |
| Cuenta o licencia | Ninguna | Ninguna | A menudo requerida |
| Coste | Gratis | Gratis | Gratis / de pago |
Características
Cálculo de la relación WCAG
La fórmula oficial de luminancia relativa, no una aproximación a ojo.
Niveles AA y AAA
Se evalúan ambos niveles de conformidad, así sabes cuánto margen tiene una pareja.
Texto normal y grande
El texto grande tiene un umbral menor; se muestran los dos en vez de dejarte recordar cuál aplica.
Texto de muestra en vivo
Caracteres reales con la pareja probada, lo que detecta problemas que un número por sí solo no revela.
Ajustar y recomprobar al instante
Mueve cualquiera de los colores y observa cómo cambia la relación, para dar con el cambio mínimo que pasa.
Entrada en HEX
Pega los códigos directamente desde un documento de marca o una hoja de estilos.
Sin instalación
Nada que descargar ni instalar: funciona en la propia página web.
Compatible con árabe y RTL
Interfaz completa en ocho idiomas, incluido el árabe de derecha a izquierda.
Seguro por defecto
Servido por HTTPS, sin rastreo de archivos ni subidas a terceros.
Quién la usa
Desarrolladores front-end
Zanjar una cuestión de color con una relación medida en vez de un debate en la revisión de diseño.
Diseñadores
Encontrar el tono más cercano de un color de marca que sí pasa, antes de que llegue a una biblioteca de componentes.
Equipos de accesibilidad y cumplimiento
Documentar qué parejas cumplen AA y cuáles requieren corrección, con las relaciones exactas.
Sector público y educación
Cumplir requisitos de accesibilidad que son una obligación legal y no una preferencia.
Preguntas Frecuentes
WCAG AA requiere al menos 4.5:1 para texto normal y 3:1 para texto grande; AAA requiere 7:1 y 4.5:1 respectivamente.
No. Todo se ejecuta localmente en tu navegador — nada se sube, guarda ni comparte.
Sí — totalmente gratis, sin cuenta y sin límites.