Contraste WCAG
Verifique la relación de contraste entre dos colores según las normas WCAG 2.1. Recomendaciones AA y AAA para texto normal y grande.
Relación de contraste
13.98:1
Texto grande (24px negrita)
Texto grande (18.66px negrita)
Texto normal (16px) — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Texto pequeño (14px) — Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Resultados WCAG 2.1
| Nivel | Tipo | Relación mínima | Resultado |
|---|---|---|---|
| AA | Texto normal | 4.5:1 | Aprobado |
| AA | Texto grande | 3:1 | Aprobado |
| AAA | Texto normal | 7:1 | Aprobado |
| AAA | Texto grande | 4.5:1 | Aprobado |
¿Cómo funciona el cálculo?
La relación de contraste se calcula según la fórmula WCAG 2.1: (L1 + 0.05) / (L2 + 0.05), donde L1 y L2 son las luminancias relativas de los dos colores. La luminancia relativa usa los componentes sRGB linealizados con los coeficientes 0.2126 (rojo), 0.7152 (verde) y 0.0722 (azul). El texto «grande» corresponde a 18pt normal o 14pt negrita.
Todo sobre el contraste WCAG y la accesibilidad del color
¿Por qué verificar el contraste de colores?
Un contraste insuficiente hace que el texto sea ilegible para personas con baja visión, daltonismo o que navegan en una pantalla bajo la luz del sol. Verificar la relación de contraste garantiza que su contenido sea accesible para todos.
Las normas WCAG 2.1 definen umbrales precisos (AA y AAA) que los sitios web públicos y las aplicaciones deben cumplir para respetar las regulaciones de accesibilidad vigentes en muchos países.
Un buen contraste también mejora la experiencia general del usuario: la legibilidad reduce la fatiga visual y aumenta el tiempo de permanencia en su sitio, lo que tiene un impacto positivo en el SEO.
Casos de uso comunes
- Diseño de sitios web
- Pruebe sus combinaciones de colores texto/fondo al crear maquetas o temas CSS para asegurarse de que cada elemento de texto cumpla con los criterios WCAG AA o AAA.
- Aplicaciones móviles
- Valide los contrastes de sus interfaces iOS y Android, especialmente para botones, etiquetas y mensajes de error, que deben seguir siendo legibles en todos los dispositivos.
- Documentos y presentaciones
- Asegúrese de que sus informes PDF, diapositivas de PowerPoint y documentos impresos utilicen combinaciones de colores con suficiente contraste para ser legibles por todos.
- Auditoría de accesibilidad
- Durante una auditoría WCAG, Sección 508 o ADA, utilice esta herramienta para verificar rápidamente cada par de colores señalado y documentar las relaciones obtenidas.
¿Cómo usar el verificador de contraste?
Introduzca o seleccione el color del texto y el color de fondo utilizando los campos hexadecimales o el selector de color integrado.
La relación de contraste se muestra instantáneamente con un código de color: verde para un contraste excelente (≥ 7:1), amarillo para un contraste aceptable (≥ 4.5:1), naranja para un contraste límite (≥ 3:1), rojo para un contraste insuficiente.
Consulte la tabla de resultados WCAG 2.1 para saber si su combinación pasa los niveles AA y AAA para texto normal y texto grande. Ajuste sus colores hasta alcanzar el nivel deseado.
Preguntas frecuentes sobre el contraste WCAG
- ¿Cuál es la diferencia entre los niveles WCAG AA y AAA?
- El nivel AA exige una relación de contraste mínima de 4.5:1 para texto normal y 3:1 para texto grande. El nivel AAA es más estricto con 7:1 para texto normal y 4.5:1 para texto grande. El nivel AA es el mínimo recomendado para la mayoría de los sitios web.
- ¿Mi sitio web debe cumplir obligatoriamente con las normas WCAG?
- En muchos países, los sitios web públicos y los servicios en línea deben cumplir con un cierto nivel de accesibilidad. En España, el Real Decreto 1112/2018 se basa en las WCAG. En Estados Unidos, la Sección 508 y la ADA imponen requisitos similares. El incumplimiento puede resultar en sanciones legales.
- ¿El contraste también se aplica a los iconos y elementos gráficos?
- Sí. Las WCAG 2.1 (criterio 1.4.11) exigen una relación de contraste mínima de 3:1 para los componentes de la interfaz de usuario y los elementos gráficos informativos, como iconos, bordes de campos de formulario e indicadores de enfoque.
- ¿Cómo se calcula exactamente la relación de contraste?
- La relación utiliza la fórmula (L1 + 0.05) / (L2 + 0.05) donde L1 es la luminancia relativa del color más claro y L2 la del más oscuro. La luminancia relativa se obtiene linealizando los componentes sRGB y luego aplicando los coeficientes de ponderación ITU-R BT.709.
- ¿Puedo usar esta herramienta para verificar el contraste de colores con transparencia (RGBA)?
- Esta herramienta funciona con colores opacos en formato hexadecimal. Para colores con transparencia, primero debe calcular el color resultante después de la fusión con el fondo (alpha compositing) y luego introducir el valor hexadecimal resultante en la herramienta.