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 |
¿Qué es la relación de contraste?
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 posible, negro sobre blanco). Cuanto mayor sea el número, más fácil resulta leer el texto. WCAG (Web Content Accessibility Guidelines) define, a partir de este valor, dos niveles de conformidad: AA y AAA. Esta herramienta toma dos códigos de color y calcula automáticamente la relación, mostrando de un vistazo si se cumplen cada uno de los cinco requisitos distintos.
El cálculo se basa en un valor llamado "luminancia relativa" (relative luminance). A diferencia de una simple medida de luminosidad, como el valor L del modelo HSL, la luminancia relativa se obtiene eliminando primero la corrección gamma de los valores sRGB y, después, ponderando y sumando los canales rojo, verde y azul según la sensibilidad del ojo humano a cada uno, lo que da un resultado más cercano a la impresión visual real de claridad. Los colores parecidos tienden casi por definición a producir una relación de contraste baja, así que un resultado "No aprobado" no significa que los colores en sí sean incorrectos, sino simplemente que conviene ampliar la diferencia de luminosidad entre ellos.
Cómo usar el comprobador de contraste
- Introduce el color del texto Elige el color con el selector o escribe directamente un código hexadecimal. El valor predeterminado es un gris oscuro (#333333).
- Introduce el color de fondo Procede igual, mediante el selector de color o un código hexadecimal. El valor predeterminado es blanco (#ffffff).
- Consulta el resultado A medida que introduces valores, la relación de contraste y las insignias de aprobado/no aprobado para cada requisito AA y AAA se actualizan en tiempo real.
- Intercambia los colores si lo necesitas Usa el botón "Intercambiar colores" para invertir el texto y el fondo y así comparar también la combinación en su forma invertida.
Consejos para aprovecharla mejor
- 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.
Dónde se utiliza esta herramienta
Comprobar el color de botones y enlaces
Introduce el color del texto y del fondo de los botones de acción principales o los enlaces de un sitio para confirmar que cumplen el requisito AA (4.5:1 o superior).
Verificar logotipos y banners frente a su fondo
Permite confirmar de antemano si el color de un logotipo o el texto principal de un banner promocional sigue siendo claramente legible sobre el fondo en el que se colocará.
Auditar la paleta de colores de un sistema de diseño
Revisa una por una las combinaciones existentes de colores de marca y de texto para comprobar si toda la interfaz cumple los requisitos de accesibilidad, y deja constancia de los resultados.
Validar el esquema de colores del modo oscuro
Resulta útil para comprobar, combinación por combinación, si los colores invertidos para el modo oscuro siguen cumpliendo los mismos requisitos de contraste que el esquema del modo claro.
Glosario
- Luminancia relativa
- Una medida de luminosidad que se calcula eliminando la corrección gamma de los valores sRGB y ponderando después los canales rojo, verde y azul según la sensibilidad del ojo humano a cada uno. Es la base del cálculo de la relación de contraste.
- Relación de contraste
- Un número de 1:1 a 21:1 obtenido a partir de la luminancia relativa de un color claro y otro oscuro. Cuanto mayor sea el valor, mayor será la diferencia de luminosidad entre ambos colores y más legible el texto.
- WCAG
- Siglas de Web Content Accessibility Guidelines, el estándar internacional de accesibilidad web mantenido por el W3C. En él se definen también los criterios de aprobación de la relación de contraste.
- Nivel AA
- El segundo nivel de conformidad más alto de WCAG. El texto normal debe alcanzar una relación de contraste de 4.5:1 o superior. Se considera ampliamente el mínimo al que hacen referencia muchas leyes y directrices.
- Nivel AAA
- El nivel de conformidad más alto de WCAG. El texto normal debe alcanzar una relación de contraste de 7:1 o superior. No es obligatorio, pero se recomienda cuando la legibilidad es especialmente crítica.
- Texto grande
- Una categoría que WCAG define como texto normal de 18pt (unos 24px) o más, o texto en negrita de 14pt (unos 18.66px) o más. Se le aplica un requisito más flexible que al texto normal.
- Componente de interfaz
- Elementos visuales que indican que algo es interactivo, como los bordes de los botones, el contorno de los campos de entrada o los iconos. WCAG 2.1 añadió un nuevo requisito de 3:1 o superior específicamente para ellos.
Preguntas frecuentes
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.