Verificador de contraste WCAG
Compruebe las relaciones de contraste de colores para cumplir los requisitos de accesibilidad WCAG AA y AAA
Entrada y opciones
Ajustes rápidos y ejemplos
Se ejecuta en su navegador. Sus datos permanecen en este dispositivo.
Resultados
Ingrese sus valores para ver el resultado.
Acerca del Verificador de contraste WCAG
Nuestro verificador de contraste WCAG en línea gratuito ayuda a diseñadores, desarrolladores y profesionales de accesibilidad a comprobar que las combinaciones de color de texto y fondo cumplan los requisitos de contraste de las Pautas de Accesibilidad para el Contenido Web (WCAG) 2.1. Un contraste de color accesible garantiza que todos los usuarios, incluidos quienes tienen baja visión o deficiencias en la percepción del color, puedan leer su contenido web e interactuar con él.
La herramienta calcula la relación de contraste entre dos colores cualesquiera con la fórmula oficial de luminancia relativa del W3C e indica al instante si la combinación cumple o no los niveles de conformidad WCAG AA y WCAG AAA para texto normal y texto grande. Todos los cálculos se realizan en tiempo real directamente en su navegador, sin enviar datos a ningún servidor.
Ya sea que realice una auditoría de accesibilidad, diseñe una interfaz nueva o revise contenido existente para verificar su cumplimiento, este verificador de contraste le ofrece resultados precisos y conformes a los estándares, junto con vistas previas de texto en vivo y sugerencias prácticas para corregir las combinaciones de color que no cumplen.
Entender los requisitos de contraste de WCAG
Las Pautas de Accesibilidad para el Contenido Web (WCAG) son el estándar de accesibilidad web reconocido internacionalmente, publicado por el World Wide Web Consortium (W3C). WCAG define umbrales específicos de relación de contraste para garantizar la legibilidad del texto para usuarios con distintas capacidades visuales.
- WCAG nivel AA (texto normal): Se exige una relación de contraste mínima de 4.5:1. Se aplica al texto del cuerpo, a los párrafos y a todo texto menor de 18 pt (24 px) o de 14 pt en negrita (18.66 px en negrita).
- WCAG nivel AA (texto grande): Se exige una relación de contraste mínima de 3:1. Se considera texto grande el que mide al menos 18 pt (24 px) o 14 pt en negrita (18.66 px en negrita).
- WCAG nivel AAA (texto normal): Se exige una relación de contraste mínima de 7:1. Es el nivel más alto de conformidad de accesibilidad para texto de tamaño normal.
- WCAG nivel AAA (texto grande): Se exige una relación de contraste mínima de 4.5:1 para texto grande en el nivel de conformidad AAA.
Cumplir al menos el nivel WCAG AA se considera el estándar básico del diseño web accesible y lo exigen muchos marcos legales del mundo, entre ellos la Ley de Estadounidenses con Discapacidades (ADA), la Ley Europea de Accesibilidad y la Sección 508 de la Ley de Rehabilitación. WCAG AAA ofrece un nivel de accesibilidad superior que se recomienda cuando es viable.
Cómo se calcula la relación de contraste
La relación de contraste entre dos colores se determina con la luminancia relativa de cada color, tal como la define la especificación WCAG 2.1. La luminancia relativa mide el brillo percibido de un color en una escala de 0 (negro más oscuro) a 1 (blanco más claro).
El cálculo tiene tres pasos. Primero, cada canal de color (rojo, verde, azul) se convierte de su valor sRGB de 8 bits (0-255) a un valor sRGB normalizado (0-1) dividiéndolo entre 255. Segundo, cada valor normalizado recibe una corrección gamma: si el valor es 0.04045 o menos, se divide entre 12.92; en caso contrario, se transforma con la fórmula ((value + 0.055) / 1.055) ^ 2.4. Tercero, los valores linealizados de los canales se combinan con coeficientes ponderados: L = 0.2126 * R + 0.7152 * G + 0.0722 * B.
La relación de contraste final se calcula como (L1 + 0.05) / (L2 + 0.05), donde L1 es la luminancia relativa del color más claro y L2 es la luminancia relativa del color más oscuro. El resultado es un valor que va de 1:1 (sin contraste, colores idénticos) a 21:1 (contraste máximo, negro puro sobre blanco puro).
Características principales
- Cálculo de la relación de contraste en tiempo real con la fórmula de luminancia oficial de WCAG 2.1 del W3C
- Indicadores de aprobado o no aprobado para los niveles de conformidad WCAG AA y AAA, tanto para texto normal como para texto grande
- Selector de color interactivo y entrada hexadecimal para los colores de primer plano y de fondo
- Intercambio de colores con un clic para probar combinaciones invertidas
- Diez combinaciones de colores predefinidas, incluidos pares accesibles habituales
- Vista previa de texto en vivo que muestra cómo se ven sus colores en tamaños de texto normal y grande
- Sugerencia automática del color de primer plano más cercano que cumpla cuando la combinación actual no cumple
- Detalles técnicos de luminancia para los colores de primer plano y de fondo
- Compatibilidad total con modo oscuro para usarlo cómodamente en cualquier entorno
- Todo el procesamiento se ejecuta de forma local en el navegador, sin transmitir datos a servidores externos
Cómo usar el Verificador de contraste WCAG
- Defina el color de primer plano: Haga clic en el cuadro del selector de color o escriba un valor hexadecimal (p. ej., #1A1A2E) en el campo de texto para definir el color del texto o de primer plano.
- Defina el color de fondo: Del mismo modo, use el selector de color o la entrada hexadecimal para definir el color de fondo detrás del texto.
- Revise los resultados: La relación de contraste y los resultados de aprobado o no aprobado para los cuatro niveles de WCAG se muestran al instante al cambiar los colores.
- Consulte la vista previa en vivo: Desplácese hacia abajo para ver texto real con la combinación de colores elegida, en tamaño normal y grande.
- Aplique las sugerencias: Si la combinación no cumple WCAG AA, se muestra un color de primer plano sugerido. Haga clic en Aplicar para usarlo.
- Pruebe los valores predefinidos: Use los valores predefinidos rápidos para probar combinaciones de colores conocidas, accesibles o inaccesibles.
- Intercambie los colores: Haga clic en el botón Intercambiar colores para invertir la selección de primer plano y de fondo.
Por qué importa el contraste de color para la accesibilidad
Aproximadamente 1 de cada 12 hombres y 1 de cada 200 mujeres en el mundo tienen alguna forma de deficiencia en la percepción del color. Además, millones de personas tienen baja visión, cambios de la vista propios de la edad o limitaciones situacionales como el reflejo en la pantalla. Un contraste de color suficiente es una de las formas más eficaces y sencillas de hacer accesible el contenido web para todos estos usuarios.
El contraste deficiente entre el texto y el fondo es uno de los problemas de accesibilidad más comunes en las auditorías web. Al usar un verificador de contraste WCAG durante el diseño y el desarrollo, los equipos pueden detectar y corregir los problemas de contraste antes de llegar a producción, reducir los costos de corrección y garantizar desde el principio el cumplimiento de las normas de accesibilidad.
Un buen contraste de color también beneficia a los usuarios sin discapacidad. Mejora la legibilidad bajo la luz solar intensa, en pantallas de baja calidad y en entornos con muchas distracciones. El diseño accesible es un diseño inclusivo que crea una mejor experiencia para todos.
Preguntas frecuentes
¿Cuál es la diferencia entre WCAG AA y AAA?
WCAG AA es el nivel estándar de conformidad recomendado para la mayoría de los sitios web y aplicaciones. Exige una relación de contraste mínima de 4.5:1 para texto normal y de 3:1 para texto grande. WCAG AAA es un nivel más estricto que exige 7:1 para texto normal y 4.5:1 para texto grande. Aunque no siempre es posible lograr AAA para todo el contenido, se recomienda para los elementos de texto críticos y donde se necesite la máxima legibilidad.
¿Qué se considera texto grande en WCAG?
Según WCAG 2.1, se define como texto grande el que mide al menos 18 puntos (aproximadamente 24 píxeles CSS) o 14 puntos (aproximadamente 18.66 píxeles CSS) en negrita. El texto grande tiene requisitos de contraste menores porque su tamaño ya lo hace más fácil de leer.
¿Esta herramienta admite transparencia o canales alfa?
Esta herramienta funciona con colores hexadecimales opacos (códigos hexadecimales de 6 dígitos). En los colores con transparencia, el contraste efectivo depende del fondo que haya detrás de la capa transparente, que puede variar en la página. Para comprobar texto semitransparente, primero debe calcular el color plano efectivo que resulta de la superposición transparente sobre su fondo real y luego probar aquí ese color plano.
¿El cumplimiento de WCAG es obligatorio por ley?
En muchas jurisdicciones, sí. La ADA en Estados Unidos, la Ley Europea de Accesibilidad en la UE, la Ley de Accesibilidad para los Ontarianos con Discapacidades (AODA) en Canadá y legislaciones similares de otros países hacen referencia a WCAG 2.1 nivel AA como estándar de accesibilidad digital, o lo incorporan. Las organizaciones que no cumplan estos requisitos pueden enfrentar acciones legales, multas y daños a su reputación.