Visual Hierarchy
The quick brown fox jumps over the lazy dog. Legibility is critical for universal accessibility and rigorous design systems.
Un comprobador de contraste es una herramienta de accesibilidad que mide la diferencia de luminancia entre colores de primer plano y fondo. Calcula la relación de contraste y evalúa si tu combinación de colores cumple con los estándares WCAG 2.1. El comprobador de contraste de Color Taste proporciona resultados instantáneos de aprobado/reprobado para los niveles AA y AAA, junto con sugerencias de corrección automática cuando tus colores no cumplen los requisitos.
Verifica que tus colores cumplan con los estándares WCAG AA: 4.5:1 para texto normal y 3:1 para texto grande y componentes de interfaz.
Comprueba contra el estándar más estricto AAA: 7:1 para texto normal y 4.5:1 para texto grande.
Prueba el contraste para texto normal, texto grande (18pt+), botones, bordes de entrada, iconos y otros elementos de interfaz.
Escribe o pega tu color de texto/primer plano en formato HEX, RGB o HSL en el primer campo de entrada.
Ingresa tu color de fondo en el segundo campo. Observa la vista previa en vivo actualizarse en tiempo real.
La relación de contraste se calcula automáticamente. Las marcas de verificación verdes indican aprobado, las cruces rojas indican niveles WCAG reprobados.
Cuando tu combinación falla, haz clic en la sugerencia de corrección automática para ajustar tus colores manteniendo la intención del diseño.
Obtén cálculos de relación de contraste en tiempo real con resultados de aprobado/reprobado para ambos estándares AA y AAA.
Cuando el contraste falla, recibe sugerencias inteligentes que ajustan tus colores mínimamente para cumplir con los requisitos de accesibilidad.
Ve exactamente cómo se ve tu texto sobre tu color de fondo con vistas previas en tiempo real para diferentes tamaños de texto.
Trabaja en tu formato de color preferido. El comprobador maneja todas las conversiones automáticamente.
Verifica la accesibilidad durante el proceso de diseño.
Valida el contraste en el código antes del lanzamiento.
Asegura que las paletas de tokens cumplan con los estándares WCAG.
Audita y corrige problemas de contraste a escala.
WCAG 2.1 define relaciones de contraste mínimas para diferentes tipos de contenido y niveles de cumplimiento:
4.5:1 para texto normal, 3:1 para texto grande (18pt o 14pt negrita). Este es el objetivo de cumplimiento más común.
7:1 para texto normal, 4.5:1 para texto grande. El estándar de oro para máxima accesibilidad.
Mínimo 3:1 para botones, bordes de entrada, iconos y cualquier elemento gráfico que transmita significado.
Para WCAG AA: el texto normal necesita al menos 4.5:1, el texto grande (18pt o 14pt negrita) necesita al menos 3:1, y los componentes de interfaz no textuales necesitan al menos 3:1.
AAA es un estándar más estricto: 7:1 para texto normal y 4.5:1 para texto grande. La mayoría de los sistemas de diseño apuntan a AA como mínimo, con AAA como objetivo aspiracional para contenido crítico.
Sí. El comprobador de contraste de Color Taste acepta formatos de color HEX, RGB y HSL. Ingresa tus colores en cualquier formato y la herramienta maneja la conversión automáticamente.
Cuando tu combinación de colores falla, Color Taste sugiere colores ajustados que cumplen con los requisitos WCAG mientras se mantienen lo más cerca posible de tu intención de diseño original. Haz clic en la sugerencia para aplicarla instantáneamente.
Sí, el comprobador de contraste de Color Taste es completamente gratuito. Sin registro, sin marcas de agua, sin límites de uso. Verifica tantas combinaciones de colores como necesites.