Contraste y Colores
Garantiza una legibilidad óptima para todos los usuarios
Criterios WCAG EN 301 549
Contraste de texto
Mal ejemplo
Texto gris claro sobre blanco (2.2:1) - Falla
Ratio: 2.2:1Texto gris medio sobre blanco (3.8:1) - Falla
Ratio: 3.8:1Texto amarillo sobre blanco (1.9:1) - Falla
Ratio: 1.9:1Naranja sobre rojo (1.2:1) - Falla
Ratio: 1.2:1Gris oscuro sobre fondo negro (2.5:1) - Falla
Ratio: 2.5:1Azul sobre fondo oscuro (1.8:1) - Falla
Ratio: 1.8:1Buen ejemplo
Texto gris oscuro sobre blanco (7.0:1) - Pasa AAA
Ratio: 7.0:1Texto negro sobre blanco (21:1) - Pasa AAA
Ratio: 21:1Texto azul oscuro sobre blanco (5.9:1) - Pasa AA
Ratio: 5.9:1Blanco sobre azul oscuro (8.6:1) - Pasa AAA
Ratio: 8.6:1Blanco sobre fondo negro (21:1) - Pasa AAA
Ratio: 21:1Amarillo sobre fondo oscuro (12.3:1) - Pasa AAA
Ratio: 12.3:1Explicación: El ratio de contraste WCAG AA requiere un mínimo de 4.5:1 para texto normal y 3:1 para texto grande (18pt+ o 14pt+ en negrita). El nivel AAA es más estricto con 7:1 y 4.5:1.
Información por color
Mal ejemplo
Formulario de registro
🔴 Rojo = Error, Verde = Válido
Estado del pedido
Buen ejemplo
Formulario de registro
Estado del pedido
Explicación: La información nunca debe depender únicamente del color. Siempre agrega indicadores visuales adicionales (iconos, patrones, texto).
Daltonismo y accesibilidad
Mal ejemplo
Gráfico de rendimiento
Buen ejemplo
Gráfico de rendimiento
Explicación: Aproximadamente el 8% de los hombres y el 0.5% de las mujeres son daltónicos. Las combinaciones rojo-verde son particularmente problemáticas.
Selector de tema accesible
Mal ejemplo
Contenido de la página
Este texto cambia de color según el tema.
Tarjeta de información
Información importante para leer.
Buen ejemplo
Contenido de la página
Este texto mantiene buen contraste en todos los temas.
Tarjeta de información
Información importante siempre legible.
Explicación: Un selector de tema debe mantener los ratios de contraste, preservar la legibilidad y respetar las preferencias del sistema del usuario.
Enlaces - Subrayado e identificación
Mal ejemplo
Enlaces basados únicamente en color
La accesibilidad web es esencial para crear sitios inclusivos. Aprende más sobre accesibilidad puede ayudarte a entender las mejores prácticas. Las pautas WCAG proporcionan un marco completo para mejorar la accesibilidad.
Visita nuestra página de recursos para encontrar herramientas y tutoriales.
Buen ejemplo
Enlaces basados únicamente en color
La accesibilidad web es esencial para crear sitios inclusivos. Aprende más sobre accesibilidad puede ayudarte a entender las mejores prácticas. Las pautas WCAG proporcionan un marco completo para mejorar la accesibilidad.
Visita nuestra página de recursos para encontrar herramientas y tutoriales.
Explicación: Los enlaces deben ser identificables sin depender únicamente del color. El subrayado, diferencias de patrón u otros indicadores visuales son esenciales.