Contraste de Color
Asegúrate de que el texto sea legible para todos los usuarios
¡Aprende cómo utilizamos inteligencia artificial para esta regla!
Qué Verificamos
Asegúrate de que el contraste de color entre el texto y su fondo cumpla con los umbrales mínimos de relación según WCAG 2 AA.
De acuerdo con WCAG 2.0 1.4.3 AA, la presentación visual del texto debe tener una relación de contraste de al menos 4.5:1 para el texto normal y 3:1 para el texto grande. El texto grande se define como de al menos 18pt o 14pt en negrita.
Ejemplo Fallido ❌
La relación de contraste cae por debajo del mínimo de 4.5:1 para el texto normal y 3:1 para el texto grande
El texto es difícil de distinguir del fondo
Los usuarios con baja visión pueden no ser capaces de leer este texto
Ejemplo Aprobado ✅
La relación de contraste cumple o excede el mínimo de 4.5:1 para el texto normal
El texto se distingue claramente del fondo
Los usuarios con baja visión pueden leer este texto sin dificultad
De un Vistazo
- Esta regla tiene un impacto serio para los usuarios
- El texto normal debe tener una relación de contraste de al menos 4.5:1 contra su fondo
- El texto grande (al menos 18pt o 14pt en negrita) debe tener una relación de contraste de al menos 3:1
- Esta regla verifica el contraste de color de los elementos de texto estáticos y del texto dentro de elementos interactivos
- Esta regla utiliza IA para detectar problemas de contraste; los resultados pueden necesitar verificación manual en fondos complejos
Impacto en los Usuarios
El nivel de contraste de color afecta qué tan fácil o difícil es distinguir el texto de su fondo. Cuando los colores del texto y el fondo son demasiado similares en brillo, el texto se vuelve difícil o imposible de leer.
Esto afecta a cualquiera en condiciones de poca luz, al aire libre con luz solar, o usando una pantalla antigua — pero es especialmente problemático para usuarios con baja visión. Lo que parece ser una etiqueta legible para un usuario puede aparecer como una mancha casi invisible para otro.
Confirmar Problema de Contraste de Color
- Haz una de las siguientes acciones:
- Abre tu aplicación en un emulador, O
- Toma una captura de pantalla de la aplicación en tu dispositivo físico. Mándatela y ábrela en tu computadora.
- Usa un selector de color para:
- Obtener el color más exacto del elemento de texto.
- Obtener el color más exacto de cada color de fondo distinto detrás del texto.
- Introduce cada color en el Verificador de Contraste de Paleta de Color de Deque.
- Encontrarás una de las siguientes opciones:
- Accesible: La relación de contraste de color cumple el mínimo requerido para su tamaño de texto.
- Inaccesible: La relación de contraste de color no cumple el mínimo requerido para su tamaño de texto.
Solucionar Problemas
Los problemas de contraste de color ocurren cuando el color del texto y el color de fondo son demasiado similares en brillo. Para solucionar el problema, usa el Analizador de Contraste de Color de Deque para encontrar colores que cumplan con el mínimo requerido según el tamaño del texto. Ajusta el color del texto o el color de fondo hasta que se logre la relación de contraste requerida.
¿Puedo Ignorar Esta Regla?
El Contraste de Color tiene un impacto serio para los usuarios. Un contraste de color adecuado es un requisito de WCAG AA, por lo que este debería ser una prioridad para solucionar. En casos raros, puede ser aceptable ignorar esta regla — por ejemplo, si el texto es meramente decorativo y no transmite información. Aprende más sobre ignorando reglas.
Preguntas Frecuentes
¿Existen limitaciones conocidas con esta regla?
Sí. Esta regla puede producir resultados inexactos cuando el texto está sobre un fondo con muchos colores, como un degradado, una imagen o un fondo semitransparente. Si crees que un resultado es incorrecto, utiliza el Verificador de Contraste de Color de Deque para confirmar la relación entre los colores del texto y el fondo.
Recursos
Páginas del Curso de Deque University
Nota: El acceso completo a los recursos de Deque University requiere una suscripción.