Comprobador de contraste de colores

Calcula el contraste entre dos colores opacos y los umbrales AA/AAA para texto de WCAG 2.2.

Esta página muestra las herramientas disponibles en este idioma dentro del alcance actual. Esto no significa que todas las herramientas del sitio estén traducidas a todos los idiomas.

HEX de 3/4/6/8 dígitos; RGB de 0 a 255 o porcentajes; HSL con tono de 0 a 360 y saturación/luminosidad de 0 a 100 %. Usa comas y alpha de 0 a 1. El contraste solo admite colores opacos.

WCAG 2.2: AA exige 4.5:1 para texto normal y 3:1 para texto grande; AAA exige 7:1 y 4.5:1. El texto grande es de 18pt o de 14pt en negrita. La decisión se basa en la relación sin redondear; esto no es una certificación de accesibilidad.

Cómo usarla

Introduce colores opacos para el texto y el fondo y calcula. Lee la relación y el resultado de cada umbral teniendo en cuenta el tamaño real de tu texto.

Ejemplo práctico

El negro #000000 sobre blanco #FFFFFF da 21:1; un color sobre sí mismo da 1:1.

Compatibilidad y límites

WCAG 2.2: AA exige 4.5:1 para texto normal y 3:1 para texto grande; AAA exige 7:1 y 4.5:1. Grande significa 18pt o 14pt en negrita. Las decisiones usan la relación sin redondear; la pantalla redondea a cuatro decimales. Referencias del W3C: Understanding SC 1.4.3 y SC 1.4.6.

Preguntas frecuentes

¿Cumplir un umbral significa que un sitio web cumple WCAG por completo?

No. Solo se comprueba la relación de contraste de dos colores. Las fuentes, las imágenes, los estados interactivos y los demás requisitos de accesibilidad necesitan una revisión independiente.

Herramientas relacionadas