Comprobador de Contraste de Color
Asegúrate de que tu sitio web sea legible para todos. Nuestro Comprobador de Contraste de Colores gratuito calcula la proporción exacta entre los colores de tu texto y fondo, verificando el cumplimiento de las directrices de accesibilidad WCAG.
Sample Heading
This is an example paragraph to test readability and visual contrast.
WCAG 2.1 Compliance Status
¿Qué es el Verificador de Contraste de Color - Herramienta de Accesibilidad WCAG?
El Comprobador de Contraste de Color es una utilidad de accesibilidad web. Evalúa matemáticamente la luminancia relativa de un color de primer plano (texto) frente a un color de fondo para determinar si hay suficiente diferencia visual para que los usuarios con discapacidad visual puedan leer el texto cómodamente.
Cómo usar el Verificador de Contraste de Color - Herramienta de Accesibilidad WCAG
- Introduce el código HEX para el color de tu texto/frontal.
- Introduce el código HEX para tu color de fondo.
- La herramienta calcula la proporción de contraste (por ejemplo, 4,5:1).
- Muestra una calificación de Aprobado/No aprobado para los estándares WCAG AA y AAA.
Ejemplo
Pruebas texto negro puro (#000000) sobre un fondo blanco puro (#FFFFFF). La herramienta calcula la relación de contraste máxima posible de exactamente 21:1, cumpliendo fácilmente con todos los requisitos de accesibilidad AAA.
Entendiendo sus resultados
Un mayor ratio significa que el texto es más fácil de leer. Las Pautas de Accesibilidad para el Contenido Web (WCAG) requieren un ratio mínimo de 4,5:1 para texto normal (estándar AA) y de 7:1 para accesibilidad estricta (estándar AAA).
Casos de uso comunes
- Auditorías de Accesibilidad Web: Asegurando que un sitio web corporativo no viole las leyes de cumplimiento de la ADA en cuanto a la legibilidad.
- Diseño UI/UX: Comprobar si un texto de marcador de posición gris claro dentro de un campo de entrada blanco es demasiado difícil de leer.
- Guías de la marca: Verificando que los colores de la marca se puedan superponer de manera segura en gráficos de marketing.
Cómo funciona
La herramienta convierte ambos códigos HEX a RGB, aplica una fórmula matemática específica para calcular la 'luminancia relativa' de ambos colores y luego divide la luminancia más clara por la más oscura. El resultado es una proporción entre 1:1 (sin contraste) y 21:1 (máximo contraste).
Consejos y notas de precisión
- •El texto grande (más de 18 pt o 14 pt en negrita) es más fácil de leer, por lo que WCAG solo requiere una proporción menor de 3:1 para cumplir con el estándar AA.
- •El daltonismo afecta la percepción del tono, pero el contraste de luminancia relativa sigue siendo el factor más importante para la legibilidad.
Preguntas frecuentes
¿Qué pasa si mis colores no pasan la verificación?
Si ellos fallan, tu texto será muy difícil de leer para personas con baja visión o daltonismo. Deberías oscurecer el color del texto o aclarar el color de fondo hasta que la proporción alcance al menos 4.5:1.
¿Es 21:1 el mejor contraste?
Matemáticamente, sí. Sin embargo, el texto negro puro sobre fondos blancos puros (21:1) puede causar fatiga ocular o 'halo' en algunos usuarios con dislexia. A menudo se prefiere el gris muy oscuro (por ejemplo, #222222) sobre un blanco roto.
Herramientas relacionadas
Selector de color
¿Buscas el tono exacto de azul para el fondo de tu sitio web? Nuestro selector de colores en línea gratuito te permite seleccionar colores visualmente y te proporciona los formatos de código exactos que los desarrolladores y diseñadores necesitan.
Generador de Paleta de Colores
¿Comenzando un nuevo proyecto de diseño pero atascado con los colores? Nuestro Generador de Paletas de Colores gratuito crea automáticamente esquemas de color impresionantes y matemáticamente equilibrados para impulsar tu creatividad.
Convertidor de HEX a RGB
¿Tienes un código de color hexadecimal pero necesitas los valores RGB para agregar un canal de opacidad en CSS? Nuestro convertidor gratuito de HEX a RGB traduce instantáneamente cadenas de colores hexadecimales en enteros estándar de Rojo, Verde y Azul.
Formateador JSON en Línea Gratis
Trabajar con datos JSON desordenados y sin formato puede ser un dolor de cabeza para los desarrolladores. Nuestro Formateador JSON gratuito en línea hace que sea sencillo embellecer, validar y analizar tus cadenas JSON al instante. Ya sea que estés depurando una respuesta de API o escribiendo archivos de configuración, esta herramienta formatea tus datos con la sangría adecuada y resalta los errores de sintaxis para que puedas corregirlos de inmediato.
Popular
Calculadora de Edad
¿Quieres saber exactamente cuántos años tienes, hasta el día? Nuestra calculadora de edad gratuita te da una respuesta precisa en segundos: años, meses, días, el número total de días que has vivido y una cuenta regresiva hasta tu próximo cumpleaños. Todo se procesa en tu navegador, así que tu fecha de nacimiento nunca sale de tu dispositivo.
Calculadora de porcentajes
¿Tienes problemas con las matemáticas de porcentajes? Nuestra Calculadora de Porcentajes gratuita maneja todas las preguntas estándar sobre porcentajes al instante, desde calcular descuentos hasta averiguar impuestos.
Descargo de responsabilidad: Esta herramienta calcula el contraste basado en el algoritmo estándar WCAG 2.1 para luminancia relativa.