Verificador de Contraste de Color
Asegúrate de que tu texto e interfaz cumplan con los requisitos de contraste de WCAG 2.1, parte esencial de la conformidad EAA/EN 301 549. Pega los colores de marca, previsualiza combinaciones y obtén una evaluación clara para texto normal, texto grande y componentes UI.
Color Contrast Checker
The quick brown fox jumps over the lazy dog
Contrast Ratio
8.67:1
Confiado por organizaciones de toda Europa que trabajan para cumplir con la conformidad WCAG y EAA
¿Qué es un verificador de contraste y por qué usarlo?
Un contraste suficiente mejora la legibilidad para todos, especialmente para quienes tienen baja visión, deficiencias en la percepción de color o pantallas de baja calidad.
Verifica 1.4.3 Contraste (Mínimo), 1.4.6 Contraste (Mejorado) y 1.4.11 Contraste no textual para componentes UI y gráficos.
La Ley de Accesibilidad Europea hace referencia a EN 301 549, que a su vez remite a WCAG, el contraste es clave para cumplir obligaciones.
Paletas accesibles crean interfaces robustas y legibles que funcionan en temas claros/oscursos y en varios dispositivos.
Umbrales de contraste WCAG 2.1 (referencia rápida)
Ratio mínimo: 4,5:1 (texto menor de 24 px normal / 19 px negrita).
Ratio mínimo: 3:1 (≥ 24 px normal o ≥ 19 px negrita).
Contraste mínimo con colores adyacentes: 3:1 (bordes de foco, campos de formulario, iconos etc.).
Comprender el contraste de color WCAG para la accesibilidad web
Un verificador de contraste de color es una herramienta esencial para diseñadores y desarrolladores web para garantizar que su contenido digital cumpla con los estándares de accesibilidad. Las pautas de contraste de color WCAG ayudan a crear interfaces que son legibles y utilizables por todos, incluidas las personas con discapacidad visual.
¿Qué es el contraste de color WCAG?
Las WCAG (Pautas de Accesibilidad del Contenido Web) definen ratios de contraste específicos entre los colores del texto y del fondo para garantizar la legibilidad. El verificador de contraste calcula estos ratios utilizando valores de luminancia relativa, proporcionando una medida matemática de cuán distinguibles son los colores entre sí. Cumplir con estos estándares es crucial para la conformidad con WCAG 2.1 y está referenciado por regulaciones como la Ley Europea de Accesibilidad (EAA) a través de EN 301 549.
¿Cómo funciona un verificador de contraste?
Nuestro verificador de contraste de color WCAG analiza la diferencia de luminancia entre los colores de primer plano (texto) y de fondo. Calcula automáticamente la relación de contraste y la compara con los criterios de éxito de WCAG 4,5:1 para texto normal (Nivel AA), 3:1 para texto grande y 7:1 para contraste mejorado (Nivel AAA). Esta retroalimentación instantánea te ayuda a tomar decisiones de diseño informadas sin cálculos manuales.
Mejores prácticas para el contraste de color
Comienza probando los colores de tu marca temprano en el proceso de diseño usando un verificador de contraste. Asegúrate de que todos los elementos de texto, botones, campos de formulario e iconos cumplan con los requisitos mínimos. No confíes únicamente en el color para transmitir información: usa también etiquetas de texto, iconos o patrones. Las pruebas regulares con un verificador de contraste WCAG ayudan a mantener los estándares de accesibilidad durante todo el ciclo de vida de tu proyecto.
Contraste mínimo WCAG 2.2 (W3C oficial): 4.5:1, 3:1 y no texto 3:1
Los requisitos oficiales de contraste mínimo de WCAG 2.2 usados en auditorías de accesibilidad son claros: el texto de tamaño normal debe tener al menos 4.5:1, el texto de gran escala al menos 3:1, y los componentes de interfaz no textuales y objetos gráficos al menos 3:1 frente a colores adyacentes. Estos son los umbrales de contraste definidos por WCAG 2.2 y validados habitualmente por herramientas de pruebas de accesibilidad.
| Tipo de elemento | Mínimo WCAG | Criterio de éxito |
|---|---|---|
| Texto de tamaño normal | 4.5:1 | 1.4.3 (AA) |
| Texto de gran escala | 3:1 | 1.4.3 (AA) |
| Componentes de interfaz no textuales y objetos gráficos | 3:1 | 1.4.11 (AA) |
WCAG 2.2 vs WCAG 2.1: reglas de contraste
WCAG 2.2 mantiene las mismas ratios de contraste base que WCAG 2.1, por lo que tus umbrales de aprobado/reprobado no cambian. Lo que sí cambia en equipos de alto rendimiento es la ejecución: producto, diseño y QA que formalizan WCAG 2.2 en su flujo suelen pasar más rápido de resultados de escaneo a correcciones aprobadas, reducen riesgo de lanzamiento y protegen interfaces críticas para la conversión.
Requisitos de contraste WCAG por tipo de elemento
Los requisitos de contraste WCAG varían por tipo de elemento. El texto principal, subtítulos y texto de ayuda se evalúan como contraste de texto. Botones, bordes de formularios, indicadores de foco, iconos y gráficos de estado se evalúan como contraste no textual. Para una conformidad práctica, prueba ambas categorías en QA de diseño, confirma de nuevo antes del lanzamiento y vuelve a probar tras cualquier cambio de paleta o componente.
Verificador de contraste de color WCAG
Tanto si tu equipo usa color como colour, las reglas WCAG son las mismas. Este verificador de contraste de color WCAG evalúa combinaciones de primer plano y fondo frente a umbrales oficiales de W3C y devuelve un resultado claro de aprobado/reprobado para que diseñadores y desarrolladores actúen de inmediato.
Requisitos ADA de contraste de color y mapeo con WCAG
En programas de accesibilidad de EE. UU., el trabajo de remediación ADA suele medirse con criterios de éxito WCAG. Si tu organización necesita un proceso ADA para verificar contraste, usa umbrales WCAG como línea base medible y conserva evidencia en revisiones de diseño, aprobación de QA y documentación de lanzamiento.
Verificador WCAG vs verificador de contraste
Un verificador de contraste valida un área crítica: ratios de color legibles para texto y elementos de interfaz. Un verificador WCAG completo cubre una superficie de conformidad más amplia, incluyendo soporte de teclado, semántica de formularios, etiquetas, encabezados y comportamiento ARIA. Los equipos de accesibilidad más sólidos usan ambos: comprobaciones rápidas de contraste en el trabajo diario y pruebas WCAG de sitio completo antes del lanzamiento.
Probar el verificador de contraste
Ingresa colores de primer plano y fondo (HEX). La herramienta calcula la proporción de contraste y muestra apto/no apto para niveles WCAG. Los resultados se actualizan conforme escribes.
Preguntas frecuentes
¿Cambia WCAG 2.1 los ratios de contraste?
¿Requiere la EAA el contraste WCAG?
¿Qué se considera “texto grande”?
Incorpora controles de contraste a tu flujo de trabajo
Realiza controles de contraste durante revisiones de diseño y código. Combínalos con escaneo automático para detectar problemas a gran escala.