Comprobador de contraste (verificación de conformidad WCAG)

Introduce dos colores para calcular la relación de contraste WCAG (Web Content Accessibility Guidelines) y comprobar su conformidad con los niveles AA y AAA.

Resumen de los requisitos de contraste WCAG

Nivel Elemento Contraste requerido
AA (mínimo) Texto normal 4.5:1 o superior
AA (mínimo) Texto grande (18pt o más, o 14pt o más en negrita) 3:1 o superior
AA (mínimo) Componentes de interfaz y objetos gráficos 3:1 o superior
AAA (avanzado) Texto normal 7:1 o superior
AAA (avanzado) Texto grande 4.5:1 o superior

Consejos de uso

  • Puedes definir el color del texto y del fondo con el selector de color o escribiendo directamente el código hexadecimal (se admiten los formatos `#RRGGBB` y `#RGB`).
  • Pulsa "Intercambiar colores" para invertir rápidamente el texto y el fondo y compararlos; resulta muy útil al probar varias combinaciones de color para un logotipo o un icono.
  • El nivel AAA es más estricto que el AA. Cumplir el nivel AA suele considerarse el mínimo recomendable para un sitio web, pero conviene aspirar al nivel AAA en contenidos donde la legibilidad es especialmente importante.
  • El requisito de 3:1 para los componentes de interfaz y objetos gráficos, como bordes de botones e iconos, corresponde al criterio de éxito 1.4.11, añadido en WCAG 2.1.

Preguntas frecuentes

WCAG (Web Content Accessibility Guidelines) es un conjunto de pautas internacionales para que el contenido web sea accesible para más personas. La relación de contraste expresa la diferencia de luminosidad entre el color del texto y el del fondo mediante un número que va de 1:1 (sin diferencia) a 21:1 (la diferencia máxima entre blanco y negro). Se utiliza como medida objetiva de la legibilidad del texto en distintas condiciones, como para personas con discapacidad visual, usuarios de edad avanzada o al ver la pantalla de un smartphone bajo la luz intensa del sol al aire libre.

Cuanto más grande es el texto, más fácil resulta distinguir la forma de las letras, por lo que sigue siendo legible incluso con algo menos de contraste. WCAG define como "texto grande" el texto normal de 18pt (unos 24px) o más, o el texto en negrita de 14pt (unos 18.66px) o más, y le aplica un requisito más flexible (3:1 o superior en el nivel AA) que al texto normal.

El nivel AA de WCAG 2.1 es el estándar mínimo al que hacen referencia las leyes y directrices de muchos países, por ejemplo la ADA de Estados Unidos o la Directiva de Accesibilidad Web de la UE. El nivel AAA es más exigente y no es obligatorio, pero a veces se recomienda para contenidos donde la legibilidad es especialmente crítica, como los sitios web de organismos públicos.

WCAG 2.x calcula primero la "luminancia relativa" de cada color eliminando la corrección gamma de sus valores sRGB. A continuación, tomando L1 como la luminancia del color más claro y L2 como la del más oscuro, calcula la relación de contraste con la fórmula (L1+0.05)/(L2+0.05). Este método de cálculo está publicado como especificación técnica del W3C.
ツールくん

A propósito — El origen de los estándares de accesibilidad

WCAG (Web Content Accessibility Guidelines) es una guía internacional desarrollada principalmente por el W3C (World Wide Web Consortium). Su primera versión, WCAG 1.0, se publicó en 1999. Ya entonces se reconocía como un reto importante reducir las barreras que encontraban los usuarios con discapacidad visual al utilizar la web con tecnologías de asistencia como los lectores de pantalla.

Los estándares de contraste ganaron relevancia por varios motivos relacionados con la diversidad de la visión humana: la deficiencia en la visión de los colores afecta a una parte significativa de la población (se estima que a aproximadamente 1 de cada 20 hombres), el envejecimiento amarillea el cristalino y reduce la sensibilidad al contraste, y las pantallas de los smartphones se vuelven difíciles de ver bajo la luz solar directa al aire libre. Establecer criterios numéricos permitió a los diseñadores verificar la accesibilidad de forma objetiva, en lugar de basarse únicamente en juicios subjetivos sobre la legibilidad.

Hoy en día, la accesibilidad web es un requisito legal en muchos países. Por ejemplo, en Japón, la reforma de abril de 2024 de la Ley para la Eliminación de la Discriminación contra las Personas con Discapacidad hizo obligatoria la provisión de ajustes razonables por parte de las empresas. Comprobar la relación de contraste se ha convertido en uno de los controles de calidad básicos e ineludibles a la hora de crear un sitio web corporativo.

Más herramientas en esta categoría