Verifique las relaciones de contraste WCAG 2.1 para pares de colores de primer plano/fondo y obtenga resultados de aprobado/reprobado al instante.
Cargando la herramienta…
Acerca de esta herramienta
Ingrese un color de primer plano y de fondo usando selectores de color hexadecimal o campos de texto. La herramienta calcula la relación de contraste WCAG 2.1 y muestra insignias de aprobado/reprobado para los cuatro umbrales: AA Texto normal (4.5:1), AA Texto grande (3:1), AAA Texto normal (7:1) y AAA Texto grande (4.5:1). Una vista previa en vivo renderiza texto de muestra en tamaños normal y grande con los colores elegidos. También se muestra la luminancia relativa de cada color. Si los colores actuales no superan el nivel AA, la herramienta sugiere colores ajustados (oscurecidos o aclarados) que cumplen el estándar.
Cómo usar
1Elija un color de primer plano usando el selector de color o escriba un valor hexadecimal.
2Elija un color de fondo de la misma manera.
3Lea la relación de contraste y verifique qué niveles WCAG aprueban o reprueban.
4Vea la vista previa de texto en vivo y use los colores sugeridos si es necesario para lograr el cumplimiento del nivel AA.
Preguntas frecuentes
Las Pautas de Accesibilidad al Contenido Web (WCAG) definen una fórmula de relación de contraste basada en la luminancia relativa de dos colores. Las relaciones van de 1:1 (sin contraste, mismo color) a 21:1 (negro sobre blanco). Las relaciones más altas significan mejor legibilidad para usuarios con discapacidades visuales.
El nivel AA de WCAG 2.1 es el estándar comúnmente requerido: 4.5:1 para texto normal y 3:1 para texto grande (18pt o 14pt negrita). El nivel AAA es una mejora más estricta: 7:1 para texto normal y 4.5:1 para texto grande. La mayoría de las auditorías de accesibilidad apuntan al cumplimiento AA.
WCAG define texto grande como al menos 18pt (24px) de peso regular, o al menos 14pt (aproximadamente 18.67px) en negrita. La vista previa en esta herramienta muestra ambos tamaños para que pueda juzgar visualmente.
Si sus colores no superan el nivel AA, la herramienta incrementalmente oscurece el color más oscuro (o aclara el más claro) hasta que la relación de contraste alcanza 4.5:1, luego muestra el valor hexadecimal ajustado como sugerencia.
{# Alpine.js — self-hosted. (The previous jsdelivr CDN tag had a stale SRI
integrity hash, so the browser refused to run it and window.Alpine was
never defined — silently breaking every FAQ accordion and Alpine tool.) #}