Asegure un Diseño Accesible con el Verificador de Contraste de Color de ReadyTools
Asegura que tus diseños digitales sean accesibles para todos. Analiza las relaciones de contraste y verifica el cumplimiento de WCAG al instante.
Extraer colores de la imagen
Subir imagen
Detecta automáticamente los colores dominantes
Seleccionar colores
Color del texto
#000000
Color de fondo
#ffffff
Puntuación de contraste
Excelente21.00
Ratio
Texto normal (AA)
PASSTexto normal (AAA)
PASSTexto grande (AA)
PASSComponentes de UI
PASSVista previa en tiempo real
Modern UI Design
This simulates a real component. Good contrast improves readability for everyone.
Image Placeholder
Simulación de daltonismo
Preview
Readable text example.
Protanopía
Preview
Readable text example.
Deuteranopía
Preview
Readable text example.
Tritanopía
Preview
Readable text example.
Monocromatismo
¡Comparte esta herramienta con tus amigos!
Diseña para todos con un contraste de color perfecto.
Elimina las dudas y asegura que tu sitio web sea legalmente accesible y visualmente claro. Comprueba relaciones de contraste, corrige automáticamente colores no conformes y extrae paletas directamente de imágenes en segundos.
Puntuación instantánea de cumplimiento WCAG AA y AAA
Extracción de colores dominantes de cualquier imagen subida
Autocorrección inteligente para combinaciones de color no conformes
Analizador de contraste
ExcelentePRIMER PLANO
#1c274a
FONDO
#FFFFFF
7.14
Relación de contraste
WCAG AA (Texto normal)
WCAG AAA (Texto grande)
Arrastra y suelta una imagen aquí
hero-banner.jpg
Paleta extraída
Extrae colores directamente de los recursos de tu marca.
¿No conoces los códigos HEX exactos de tu logotipo o imágenes de marketing? Simplemente arrastra y suelta cualquier imagen en nuestra herramienta: el algoritmo de extracción construirá al instante una paleta y verificará el contraste entre los colores más dominantes.
Detección automática de colores dominantes
Nuestro sistema analiza los píxeles de la imagen y determina matemáticamente los mejores colores primarios y secundarios para el fondo y el texto.
Validación de contraste instantánea
Una vez extraídos, los colores se integran automáticamente en el comprobador de contraste para saber de inmediato si los colores de tu marca son seguros para la web.
Todo lo necesario para un diseño accesible.
Ve más allá de una simple verificación de ratios. Nuestro conjunto de herramientas está diseñado para flujos de trabajo modernos donde la inclusión es un requisito fundamental, no una ocurrencia tardía.
Autocorrección inteligente
¿No superas las pruebas WCAG? Deja de adivinar qué tono de gris funciona. Nuestro algoritmo de autocorrección inteligente calcula al instante el tono accesible más cercano al color seleccionado, ahorrándote tiempo mientras preserva tu intención de diseño.
Read More
FAIL 2.1:1Read More
PASS 5.8:1Simulación de daltonismo
Asegúrate de que tus combinaciones de colores sigan siendo legibles para los más de 300 millones de usuarios con discapacidades visuales. Simulamos protanopía, deuteranopía, tritanopía y acromatopsia en tiempo real.
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
Pautas WCAG integradas
No vuelvas a memorizar ratios de cumplimiento. Evaluamos automáticamente tus colores según los estándares legales exactos requeridos para accesibilidad AA y AAA.
AA Normal
4.5:1
AAA Normal
7.0:1
Vistas previas contextuales de UI
Una relación de contraste es solo un número hasta que la ves aplicada. Nuestra vista previa contextual de interfaz muestra con precisión cómo lucen tus selecciones de primer plano y fondo en componentes web reales, botones y bloques de texto.
Preview Context
See exactly how your chosen colors will look on real interface elements.
Por qué comprobar el contraste de color es crítico en los sitios web modernos
La accesibilidad digital ya no es opcional. Según las Pautas de Accesibilidad para el Contenido Web (WCAG), el texto debe tener una relación de contraste específica contra su fondo para considerarse legible. No cumplir con estos estándares no solo frustra a los usuarios, sino que impide activamente que personas con dificultades visuales, vista cansada o incluso usuarios bajo luz solar directa puedan leer tu contenido.
Nuestro comprobador de contraste de color online soluciona esto comparando matemáticamente la luminancia relativa de los colores de primer plano y fondo. Proporciona una puntuación entre 1:1 (sin contraste) y 21:1 (máximo contraste, como texto negro sobre fondo blanco).
Entendiendo WCAG AA frente a AAA
Las WCAG definen distintos niveles de conformidad. El nivel AA es el estándar global para la mayoría de sitios web comerciales y cumplimiento legal (como la ley ADA en EE. UU.). Requiere una relación de contraste de al menos 4.5:1 para texto normal y 3:1 para texto grande. El nivel AAA es un estándar más estricto que exige 7:1 para texto normal, utilizado comúnmente por organismos gubernamentales y plataformas especializadas.
Extracción de paletas a partir de imágenes
Las guías de marca suelen entregarse como imágenes planas o logotipos. Nuestro extractor de color integrado utiliza algoritmos avanzados para aislar los colores dominantes de cualquier JPG o PNG subido. Esto permite a los desarrolladores convertir un recurso visual en una paleta CSS lista para la web y con contraste verificado, sin necesidad de software de diseño externo.
Preguntas frecuentes
Respuestas a preguntas comunes sobre accesibilidad del color y verificación de contraste.