Comprobador de contraste
Comprueba si el texto, los iconos, los botones, los bordes de los campos y los estados de la interfaz se mantienen legibles sobre su fondo. Introduce un color de primer plano y uno de fondo y la herramienta muestra la relación de contraste WCAG, los resultados AA / AAA para texto normal y grande, el AA de componentes de UI, el aplanado de colores transparentes, colores de primer plano recomendados, candidatos de corrección y CSS o notas de auditoría listos para copiar. Todo se ejecuta en el navegador, así que los colores de marca sin publicar y los archivos de diseño confidenciales permanecen a salvo. Encaja en la revisión de diseño, la QA de componentes, el ajuste del modo oscuro, el despliegue de colores de marca y la corrección de accesibilidad.
- Muestra a la vez los resultados de texto normal AA, AAA, texto grande y componentes de UI, para que una sola puntuación no oculte el caso de uso real
- Admite entradas HEX, RGB, HSL, HWB, Lab, LCH, OKLab y OKLCH, listas para valores de archivos de diseño y de las DevTools
- Aplana primero los primeros planos o fondos semitransparentes, para que la relación coincida con lo que ven los usuarios
- Cuando un par no cumple, ofrece un color base recomendado más candidatos de primer plano AA y AAA generados
- Copia las declaraciones de color y un informe de auditoría completo con un clic para PRs, revisiones de diseño y tickets de accesibilidad
color: #111827; background-color: #ffffff;
Resumen
De un par de colores a una decisión que puedes llevar de vuelta a la base de código, todo el flujo ocurre en un solo panel. Cada comprobación cubre varias dimensiones WCAG y trae correcciones aplicables, para que una sola puntuación nunca oculte el caso de uso real.
- 01
Matriz de resultados WCAG AA / AAA
Los resultados de texto normal AA, AAA, texto grande y componentes de UI se muestran uno junto a otro, para que ningún número aislado apruebe un par en el contexto equivocado.
- 02
Entrada de color en varios formatos
Pega HEX, RGB, HSL, HWB, Lab, LCH, OKLab u OKLCH directamente, sin unificar antes la sintaxis.
- 03
Aplanado automático de colores transparentes
Cuando hay alpha, la herramienta compone primero contra el fondo efectivo, así la relación coincide con overlays flotantes, botones semitransparentes y tarjetas tipo cristal.
- 04
Color de texto recomendado
Compara el negro y el blanco sobre el fondo actual y devuelve el primer plano base más seguro, útil para decisiones rápidas o correcciones urgentes.
- 05
Generación de candidatos que cumplen
Si el par actual no cumple, la herramienta busca a lo largo del eje de luminosidad el primer plano AA y AAA más cercano, para conservar el tono de marca mientras mejora la accesibilidad.
- 06
CSS e informe listos para copiar
Copia las declaraciones color y background-color para implementar, o copia un informe de contraste completo para descripciones de PR, tickets de QA y registros de corrección de accesibilidad.
- 07
Preajustes de interfaz comunes
Incluye combinaciones de texto de cuerpo, texto atenuado, botones primario, de éxito y de peligro, insignias de aviso, enlaces y texto en modo oscuro como referencia rápida.
- 08
Objetivo de comprobación según el escenario
Cambia entre texto normal, texto grande y componentes de UI para aplicar el umbral correcto. El panel de resultados se actualiza al instante, así nunca se aplica por error la regla de 4.5:1 al borde de un botón.
Cómo usarla
El flujo es deliberadamente corto. Encaja en recorridos de diseño, QA de componentes, correcciones por ticket o depuración rápida en el navegador, y los resultados se pueden llevar directamente al proyecto.
- 01
Pon el color del texto, el icono o el control en el campo de primer plano, y el color de la superficie que lo rodea en el campo de fondo.
- 02
Elige el objetivo de comprobación: texto normal para el cuerpo, texto grande para etiquetas y titulares grandes, y componente de UI para bordes, iconos o estados de control.
- 03
Lee la relación de contraste y la matriz de resultados WCAG para ver qué objetivos AA y AAA cumple el par.
- 04
Si el par no cumple, prueba el primer plano recomendado; cuando quieras conservar el tono de marca, genera un candidato AA o AAA en su lugar.
- 05
Copia el CSS en tu hoja de estilos, o copia el informe de contraste completo en la descripción de un PR, una revisión de diseño, una nota de QA o un registro de corrección de accesibilidad.
Detalles
La salida está pensada para debatirse, reproducirse y consolidarse en un sistema de diseño, no solo para verse como una única puntuación.
- Muestra Texto normal AA, AAA, Texto grande AA, AAA y Componente de UI AA a la vez, para juzgar un par de colores en su contexto
- Muestra los colores de cálculo aplanados para overlays translúcidos, tarjetas tipo cristal, botones semitransparentes y capas de modo oscuro
- Intercambia primer plano y fondo con una sola acción para botones invertidos, estados seleccionados, etiquetas invertidas y variantes de modo oscuro
- Los informes incluyen el primer plano, el fondo, la relación de contraste y todos los resultados WCAG, listos para documentación y flujos de equipo
- Preajustes de interfaz integrados como referencia rápida para texto de cuerpo, texto atenuado, enlaces, botones, insignias y texto en modo oscuro
- El objetivo de comprobación activo actualiza al instante el estado de cumple y no cumple, para no aplicar el umbral equivocado a texto de cuerpo pequeño
- Combina de forma natural con la conversión de color y la generación de paletas para pasar de valores normalizados a una escala de color estable y accesible
- Todo el análisis, el aplanado y el cálculo de contraste se ejecuta en local, apto para colores de marca sin publicar y archivos de diseño confidenciales
- Los mensajes de resultado distinguen los pares seguros para texto de cuerpo, solo para texto grande, solo para componentes de UI y no recomendados, para evitar un uso indebido de accesibilidad
- Los candidatos AA y AAA se ajustan a lo largo del eje de luminosidad para conservar el tono de marca, lo que los hace más útiles para tokenizar que un recurso brusco a blanco o negro
Casos de uso
Las comprobaciones de contraste aportan más valor antes de que un par de colores se congele en CSS. Cuanto más cerca ocurran de la elección del color, más barata es la conversación y menos probable es que los problemas de accesibilidad reaparezcan tras el lanzamiento.
-
Comprobaciones antes de la entrega de diseño
Valida el texto de cuerpo, los titulares, los botones, los enlaces y las etiquetas de estado antes de que un diseño visual pase a implementación, para que ingeniería no herede deuda de accesibilidad oculta.
-
QA de la biblioteca de componentes
Audita Button, Input, Badge, Alert, Tabs y componentes similares en los estados default, hover, focus, disabled, selected y error, y luego integra la legibilidad en la especificación del componente.
-
Ajuste de color del modo oscuro
Comprueba el texto de cuerpo, las etiquetas secundarias, los bordes y los iconos sobre superficies oscuras, confirmando que la escala de luminosidad está bien separada y que los colores de acento siguen legibles.
-
Despliegue de colores de marca
Antes de aplicar un color de marca a botones, enlaces o énfasis, confirma si cumple los requisitos de contraste y decide si conviene preparar una escala tonal a su alrededor.
-
Corrección de problemas de accesibilidad
Reproduce los problemas de bajo contraste detectados por Lighthouse, axe, la QA manual o los usuarios, y documenta la corrección elegida para dejar registrada la decisión, no solo parchearla.
-
Páginas de contenido con mucha lectura
Mejora la legibilidad de blogs, documentación, centros de ayuda, páginas de producto y formularios largos, donde la lectura sostenida es la interacción dominante.
-
Comprobaciones de landing pages y campañas
Revisa el texto de portada, los botones de CTA, las etiquetas de precio y los banners promocionales, donde los tratamientos visuales pueden erosionar en silencio la legibilidad del texto.
-
Mantenimiento del tema del panel de administración
Mantén las tablas, los filtros, los indicadores de estado, las barras laterales y las tarjetas de analítica alineados con una única línea base de contraste, en vez de dejar que cada módulo derive por su cuenta.
-
Alineación de paletas de visualización de datos
Comparte una línea base de contraste entre los colores de las series de gráficos, los colores de estado y las etiquetas de apoyo, para que las leyendas y los puntos de datos sigan igual de legibles.
-
Verificación de correos y materiales exportados
Las plantillas de correo, los informes en PDF y los materiales impresos pasan por distintas cadenas de renderizado; validar el contraste primero reduce el retrabajo una vez que los colores se consolidan aguas abajo.
Ver también
Cuando los colores llegan de archivos de diseño, capturas o CSS heredado en formatos mezclados, normalízalos primero en Conversor de colores y luego vuelve a comprobar el par aquí. Cuando el mismo color no cumple en muchos estados, construye una escala más limpia en Generador de paletas en lugar de aplicar parches de color puntuales por toda la interfaz.
Términos de contraste explicados
Estos términos aparecen en auditorías de accesibilidad, documentación de sistemas de diseño y notas de revisión de frontend. Compartir las mismas definiciones facilita hablar de por qué un par de colores no cumple, en lugar de recurrir a frases como «a mí me parece bien».
-
Relación de contraste
WCAG mide el contraste de 1:1 a 21:1. Una relación de 1:1 significa casi ninguna diferencia, mientras que 21:1 es el contraste más alto, normalmente negro puro sobre blanco puro.
-
Luminancia relativa
El contraste no es una comparación directa de números RGB. WCAG convierte los valores sRGB en luminancia relativa y luego calcula la relación entre el color más claro y el más oscuro.
-
WCAG AA
El objetivo de accesibilidad de referencia que usan la mayoría de webs y aplicaciones web. El texto normal necesita al menos 4.5:1, mientras que el texto grande y los componentes de UI suelen necesitar 3:1.
-
WCAG AAA
Un objetivo más estricto. El texto normal necesita 7:1, lo que encaja con la lectura extensa, los servicios públicos, el contenido educativo, la documentación y las interfaces con mucha lectura.
-
Texto normal frente a texto grande
El texto normal abarca el cuerpo habitual, las etiquetas y el texto de ayuda. El texto grande suele ser de 18pt normal o 14pt en negrita y más, que se percibe con más facilidad y por eso admite un umbral menor.
-
Contraste de componentes de UI
Los bordes de botones, los contornos de campos, los iconos, los estados seleccionados y los indicadores de error también deben ser reconocibles, aunque no sean texto.
-
Aplanado de colores transparentes
Los colores escritos con alpha, como rgba, hsla y los valores alpha de OKLCH, dependen de la superficie que hay debajo. Aplanar primero da un resultado que coincide con la página renderizada.
-
OKLCH y luminosidad percibida
La luminosidad de OKLCH sigue la percepción humana de forma más predecible que HSL, lo que resulta útil para construir escalas de color accesibles, paletas de modo oscuro y sistemas de color de marca.
Buenas prácticas
Las comprobaciones de contraste rinden más cuando forman parte del proceso de diseño y desarrollo, y no como un arreglo de última hora. Las prácticas siguientes han funcionado en muchos tipos de producto; elige las que encajen con tu contexto.
- Toma el Texto normal AA como base para el cuerpo, las etiquetas, el texto de ayuda y los mensajes de error, y acerca las zonas de mucha lectura hacia AAA cuando tenga sentido
- No confíes solo en el bajo contraste para señalar un estado deshabilitado; combínalo con opacidad, iconos, etiquetas o el comportamiento de interacción
- En modo oscuro, ajusta primero la escala de luminosidad y luego sube la saturación. La saturación por sí sola rara vez mejora la legibilidad
- Comprueba los botones, los enlaces y los indicadores de estado en los estados default, hover, focus, selected, error y disabled, no solo en una captura estática
- Valida los overlays translúcidos, las tarjetas tipo cristal y los paneles flotantes contra el fondo real de la página, no contra un color de superficie genérico
- Promueve las combinaciones aprobadas a tokens de diseño como text-primary, text-muted, surface-card y border-subtle, para que dejen de ser decisiones puntuales
- Cuando un color de marca no cumple, construye pasos tonales conformes en lugar de elegir aproximaciones arbitrarias en páginas distintas
- Añade las comprobaciones de contraste a la revisión de diseño, a las listas de PR y a la QA de lanzamiento, para que las regresiones aparezcan antes y cuesten menos de corregir
Limitaciones
El contraste de color es importante, pero es solo una parte de la accesibilidad de la interfaz. Trata el resultado como una señal fuerte, no como un veredicto final, y combínalo siempre con páginas reales, dispositivos reales y una revisión de accesibilidad completa.
- Cumplir el contraste WCAG no garantiza una accesibilidad completa; la estructura semántica, el acceso por teclado, la visibilidad del foco, el manejo de errores y el comportamiento con lector de pantalla también deben revisarse
- El texto sobre imágenes, vídeos, texturas complejas o degradados debe muestrearse de la región real de la página; un único color de fondo es solo una aproximación
- Los candidatos AA y AAA generados son útiles para explorar rápido, pero los colores finales deben revisarse frente a las reglas de marca, las escalas de tema y la jerarquía visual
- Distintas pantallas, navegadores, ajustes de gestión de color y luz ambiental pueden cambiar la legibilidad percibida; las páginas importantes deberían revisarse en dispositivos reales
- La herramienta evalúa los colores que introduces y no inspecciona automáticamente variables CSS, la configuración de Tailwind ni las fuentes de tokens de diseño
- APCA y WCAG 2.x usan modelos de contraste distintos. Esta herramienta muestra actualmente relaciones de contraste WCAG 2.x
- El movimiento, los fondos animados y el texto sobre vídeo en reproducción deben observarse mientras se reproducen; una relación estática no puede capturar del todo esas experiencias
Preguntas frecuentes
Las preguntas que más surgen cuando los equipos usan la comprobación de contraste en el trabajo diario, el cumplimiento de accesibilidad y la colaboración entre disciplinas, desde la introducción hasta los umbrales, las estrategias de corrección y los límites.
¿Qué problema resuelve un comprobador de contraste de color?
Confirma si el texto, los iconos y los controles siguen siendo legibles sobre su fondo, algo esencial durante la revisión de diseño, el desarrollo frontend y la corrección de accesibilidad, y te da una dirección clara para cualquier arreglo.
¿Por qué se exige 4.5:1 para el texto normal AA?
WCAG 2.x define 4.5:1 como la relación de contraste mínima para el cuerpo de texto normal. Se calcula a partir de la luminancia relativa, no de la opinión subjetiva, lo que da a los equipos un estándar compartido y estable.
¿Cuándo debería apuntar a AAA?
AAA es apropiado para la lectura extensa, los sitios de servicio público, el contenido educativo, la documentación y las áreas de producto donde la legibilidad es especialmente importante. La mayoría de las interfaces empiezan con AA como base.
¿Por qué el texto grande cumple a 3:1?
El texto grande o en negrita se percibe con más facilidad, así que WCAG permite un umbral menor. Las tipografías finas, los fondos recargados o las pantallas pequeñas pueden requerir aún así un contraste mayor.
¿Qué comprueba el Componente de UI AA?
Se aplica a elementos no textuales como los bordes de botones, los contornos de campos, los iconos, los estados seleccionados y los indicadores de error, que es donde viven muchos problemas de formularios e interfaces de administración.
¿Los colores transparentes afectan al resultado?
Sí. Los primeros planos o fondos semitransparentes dependen de la superficie que hay debajo. Esta herramienta aplana los colores primero y luego calcula el contraste a partir del resultado efectivo.
¿Por qué un diseño puede parecer legible y no cumplir el contraste?
La tipografía, el grosor, los elementos que rodean, el brillo y el renderizado de la herramienta de diseño afectan a la percepción. En su lugar, la relación de contraste ofrece al equipo un estándar estable y reproducible.
¿Cómo ayuda OKLCH al diseño de color accesible?
La luminosidad de OKLCH se comporta de forma más predecible para la percepción humana, lo que facilita construir escalas de color accesibles para temas, modo oscuro y sistemas de marca.
¿Recomendar solo negro o blanco es demasiado limitado?
El negro y el blanco sirven para comprobaciones base rápidas. Para una UI acabada, trata el candidato AA o AAA generado como punto de partida y encájalo en la escala de color de marca.
¿Puedo usar el informe en los flujos de equipo?
Sí. El informe incluye el primer plano, el fondo, la relación y cada resultado de cumple y no cumple, lo que lo hace útil para descripciones de PR, notas de QA, revisiones de diseño y seguimiento de accesibilidad.
¿Se sube algún dato de color?
No. El análisis, el aplanado y el cálculo de contraste se ejecutan en local en el navegador, así que los colores de marca sin publicar y los archivos de diseño confidenciales permanecen privados.
¿Qué debería comprobar después de que el contraste cumpla?
Revisa la visibilidad del foco, la navegación por teclado, los mensajes de error de formulario, ARIA y el HTML semántico, la respuesta a estados dinámicos y el comportamiento con lector de pantalla. El contraste es una parte de un cuadro más amplio.
¿Esta herramienta admite APCA?
De momento muestra el contraste WCAG 2.x. Si tu proyecto requiere APCA, puedes mantener esta herramienta como comprobación base y usar una herramienta APCA dedicada para la revisión secundaria.
¿Cómo trato el texto sobre fondos con degradado o imagen?
Muestrea por separado las regiones más clara y más oscura del fondo y comprueba cada par. Si ambos extremos quedan justo por debajo del umbral, considera añadir un velo más oscuro o mover el texto a una zona más tranquila.
Herramientas relacionadas
Encadena el comprobador de contraste con la conversión de color, la generación de paletas y el generador de degradados para pasar de «elegimos un par de colores» a «publicamos tokens de diseño accesibles», de modo que la legibilidad viva en la base de código y no solo en los comentarios de revisión.