Comprobador de contraste de colores (WCAG AA/AAA)

• Cálculo instantáneo del contraste WCAG: el comprobador de contraste de colores calcula el ratio de contraste WCAG y todos los resultados de aprobado/suspenso con cada pulsación de tecla. No hay que pulsar ningún botón: introduce tus colores y ve los resultados al instante.
• Seguro y 100% privado: todos los cálculos de contraste se ejecutan por completo en tu navegador con la fórmula de luminancia relativa de WCAG 2.1. Ningún dato de color se envía jamás a ningún servidor.
• Cobertura completa de WCAG 2.1: AA y AAA: comprueba todos los criterios relevantes de WCAG 2.1: AA y AAA para texto normal, AA y AAA para texto grande, y AA para componentes de interfaz (SC 1.4.11). Incluye una vista previa en vivo que muestra cómo se ven tus colores en cada tamaño de texto.
• 100% gratis y sin registro: totalmente gratis, sin cuenta, sin plan premium, sin límites de uso y sin anuncios que bloqueen la interfaz. Comprueba el contraste de colores tantas veces como necesites.

• Desarrollo web y diseño de interfaces: los desarrolladores front-end y los diseñadores de UI usan el comprobador de contraste de colores para verificar que las combinaciones de color de texto y fondo cumplen los requisitos WCAG AA antes de publicar. Detectar los fallos de contraste a tiempo evita costosas correcciones de accesibilidad.
• Validación de colores de marca: los diseñadores usan el comprobador de contraste de colores para validar que los colores de marca cumplen los estándares de accesibilidad cuando se usan como texto sobre fondos. Muchas paletas de marca no superan WCAG AA, y el comprobador identifica qué combinaciones son seguras.
• Comercio electrónico y páginas de producto: los equipos de comercio electrónico usan el comprobador de contraste de colores para asegurarse de que las descripciones de producto, los precios y los botones de llamada a la acción cumplen los requisitos de contraste WCAG AA, mejorando la legibilidad para todos los usuarios, incluidos quienes tienen baja visión.
• Diseño de documentos y presentaciones: los creadores de contenido y los diseñadores de presentaciones usan el comprobador de contraste de colores para verificar que el texto de las diapositivas, las etiquetas de los gráficos y el texto de las infografías son legibles sobre los fondos elegidos.
• Diseño de apps móviles: los diseñadores de apps móviles usan el comprobador de contraste de colores para asegurarse de que los elementos de la interfaz cumplen los requisitos WCAG AA tanto en temas claros como oscuros, algo fundamental para los usuarios con discapacidad visual en pantallas pequeñas.
• Auditorías y cumplimiento de accesibilidad: los consultores de accesibilidad y los equipos de QA usan el comprobador de contraste de colores como herramienta rápida de primera pasada durante las auditorías WCAG. Identifica los fallos de contraste que hay que corregir antes de las pruebas formales con tecnologías de asistencia.

El contraste de color WCAG se refiere al ratio de contraste mínimo entre los colores de primer plano (texto) y de fondo que exigen las Pautas de Accesibilidad para el Contenido Web (WCAG) para garantizar que el contenido sea legible por personas con baja visión o deficiencias de color. El ratio de contraste se calcula usando la luminancia relativa de cada color, un valor derivado de los valores de canal sRGB linealizados. Los ratios van de 1:1 (sin contraste, colores idénticos) a 21:1 (contraste máximo, negro sobre blanco). Nuestro comprobador de contraste de colores basado en el navegador calcula este ratio al instante y lo evalúa frente a todos los criterios de conformidad relevantes de WCAG 2.1.

1. Introduce tus colores: escribe un valor HEX (p. ej., #0066cc ) o un valor RGB (p. ej., rgb(0, 102, 204) ) en los campos de primer plano y fondo, o usa el selector de color nativo. También puedes seleccionar un par de colores predefinido para empezar rápidamente.
2. Cálculo instantáneo: el comprobador de contraste de colores calcula la luminancia relativa WCAG 2.1 de cada color y obtiene el ratio de contraste. Todos los cálculos se ejecutan localmente en tu navegador: ningún dato de color se envía jamás a un servidor.
3. Revisa los resultados: la tabla de resultados muestra el estado de aprobado/suspenso para todos los criterios relevantes de WCAG 2.1. La vista previa en vivo muestra cómo se ven tus colores en texto normal, texto grande y tamaños de componentes de interfaz.

• AA - Texto normal (4,5:1): el ratio de contraste mínimo para el cuerpo de texto, las etiquetas y los pies de foto menores de 18 pt (24 px) en grosor normal o 14 pt (18,67 px) en negrita. Necesario para el cumplimiento del nivel AA de WCAG 2.1.
• AA - Texto grande (3:1): el ratio de contraste mínimo para texto de 18 pt (24 px) o más en grosor normal, o 14 pt (18,67 px) o más en negrita. Los encabezados suelen considerarse texto grande.
• AA - Componentes de interfaz (3:1): el ratio de contraste mínimo para la presentación visual de componentes de interfaz (botones, campos de formulario, indicadores de foco) y objetos gráficos. Definido en WCAG 2.1 SC 1.4.11.
• AAA - Mejorado (7:1 / 4,5:1): los requisitos de contraste mejorados para el cumplimiento AAA: 7:1 para texto normal y 4,5:1 para texto grande. AAA es el nivel más alto y no es obligatorio para todo el contenido.

El comprobador de contraste de colores evalúa los ratios de contraste frente a los umbrales matemáticos de WCAG 2.1. Superar la comprobación del ratio de contraste no garantiza una accesibilidad completa: el cumplimiento de WCAG también requiere HTML semántico correcto, navegación por teclado, compatibilidad con lectores de pantalla y otros factores no relacionados con el color. Además, la fórmula de contraste de WCAG no tiene en cuenta todos los tipos de deficiencia de visión del color. La validación completa de la accesibilidad requiere pruebas manuales con tecnologías de asistencia (lectores de pantalla, software de ampliación) y una revisión experta en accesibilidad.