¿Qué es un verificador de contraste de colores?
Un verificador de contraste de colores mide la diferencia de luminancia entre un color de primer plano (texto) y un color de fondo, produciendo una tasa de contraste según lo definido por las Web Content Accessibility Guidelines (WCAG) 2.1. Esa tasa indica si el texto es legible para personas con baja visión o deficiencia en la percepción de colores. Las WCAG definen dos niveles de conformidad — AA (mínimo) y AAA (aprimorado) — con límites diferentes para textos de tamaño normal y grande. Esta herramienta calcula la tasa instantánea y también simula la apariencia de la combinación de colores en formas comunes de daltonismo.
Cómo usar el verificador de contraste de color
- 1Introduzca el color de primer plano (texto) como un valor HEX (por ejemplo, #1e293b) o use el selector Pick.
- 2Introduzca el color de fondo como un valor HEX (por ejemplo, #ffffff) o use el selector Pick.
- 3Vea la anterior en tiempo real del texto en diferentes tamaños sobre el plano de fondo.
- 4Consulte la tasa de contraste y los resultados de aprobación o de reprobación en los niveles AA/AAA de las WCAG mostradas a continuación.
- 5Utilice el botón Swap Colors para invertir rápidamente los colores de primer plano y de fondo.
- 6Role para abajo para ver simulaciones de daltonismo para protanopia, deuteranopia y tritanopia.
Casos de uso comunes
Cumplimiento de accesibilidad en la web
Compruebe si las combinaciones de colores de texto y fondo de su sitio web cumplen con los requisitos AA o AAA de las WCAG 2.1 antes de la implantación.
Validación de diseño systems
Prueba todas las combinaciones de tokens de color de su diseño system para garantizar que sean accesibles y estén en conformidad.
Prueba de daltonismo
Visualize como personas con protanopia, deuteranopia o tritanopia perciben sus opciones de colores y haga los ajustes necesarios.
Informes para clientes y stakeholders
Produce pruebas claras de aprobación o reprobación para auditorías de accesibilidad, análisis de conformidad con la ADA o evaluaciones de Section 508.
Preguntas frecuentes
¿Qué tasa de contraste se requiere de conformidad con el nivel AA de las WCAG?
El nivel AA de las WCAG exige una tasa de contraste mínima de 4,5:1 para textos de tamaño normal y 3:1 para textos grandes (18px o más, o 14px o más en negrita). Estos límites ayudan a garantizar la legibilidad para la mayoría de las personas con discapacidades visuales moderadas.
¿Cuál es la diferencia entre los niveles AA y AAA de las WCAG?
El nivel AAA de WCAG es más riguroso: exige 7:1 para textos normales y 4,5:1 para textos grandes. Aunque el nivel AA se considera el mínimo aceptable, AAA ofrece legibilidad mejorada y se recomienda para los textos corridos en sitios web gubernamentales o con alto tráfico.
¿Cómo actúa la simulación de daltonismo?
La herramienta aplica matrices de transformación de colores derivadas de estudios científicos para aproximarse como personas con protanopia (dificultad con rojo), deuteranopia (dificultad con verde) y tritanopia (dificultad con azul) perciben los colores. Recalcula la tasa de contraste de cada combinación simulada para permitir la verificación de la accesibilidad en diferentes condiciones visuales.
¿Puedo usar valores RGB o HSL en lugar de HEX?
Actualmente, la herramienta acepta códigos de colores HEX en formato #rrggbb. Primero, utilice la herramienta complementaria Color Converter & Picker para convertir valores RGB o HSL en HEX y luego recoger el resultado aquí.
¿Los colores informados se envían a un servidor?
No. El cálculo de contraste y las simulaciones se procesan localmente en el navegador, sin enviar los valores de color a un servidor.