Contraste de Color
Asegúrate de que el texto sea legible para todos los usuarios
¡Aprende cómo estamos utilizando inteligencia artificial para esta regla!
Qué Comprobamos
Asegúrate de que el contraste de color entre el texto y su fondo cumpla con los umbrales mínimos de la relación WCAG 2 AA.
Según 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 texto normal y 3:1 para texto grande. El texto grande se define como al menos 18pt o 14pt en negrita.
Ejemplo Fallido ❌
La relación de contraste está por debajo del mínimo de 4.5:1 para texto normal y 3:1 para 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 supera el mínimo de 4.5:1 para texto normal
El texto es claramente distinguible del fondo
Los usuarios con baja visión pueden leer este texto sin dificultad
En Resumen
- 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 el 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 impacta en cuán 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 cualquier persona en condiciones de poca luz, al aire libre bajo la luz del sol, o usando una pantalla antigua — pero es especialmente un problema para los usuarios con baja visión. Lo que parece una etiqueta legible para un usuario puede aparecer como un borrón casi invisible para otro.
Confirmar Problema de Contraste de Color
- Haz una de las siguientes acciones:
- Abre tu aplicación en un simulador, O
- Toma una captura de pantalla de la aplicación en tu dispositivo físico. Envíate la captura y ábrela en tu computadora.
- Usa un selector de color para:
- Obtener el color verdadero del elemento de texto.
- Obtener el color verdadero de cada fondo distinto detrás del texto.
- Introduce cada color en el Comprobador de Contraste de Paleta de Colores de Deque.
- Encontrarás una de las siguientes:
- 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.
Corregir Problemas
Los problemas de contraste de color ocurren cuando el color del texto y el del 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 ya sea el color del texto o el del fondo hasta lograr 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 debería ser una prioridad corregirlo. En raras ocasiones puede ser aceptable ignorar esta regla — por ejemplo, si el texto es puramente 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, imagen o fondo semitransparente. Si crees que un hallazgo es incorrecto, utiliza el Analizador de Contraste de Color Deque para confirmar la relación entre los colores del texto y del fondo.
- La regla de Contraste de Color utiliza el marco Vision de Apple (Reconocimiento Óptico de Caracteres, o OCR) para leer el texto dentro de los límites de un elemento. OCR puede identificar ocasionalmente glifos similares a iconos pequeños, como chevrones de flechas hacia atrás (<), viñetas, símbolos decorativos, como texto. Cuando eso sucede, la regla de Contraste de Color se ejecuta en un elemento que no contiene texto legible, lo que puede producir un resultado para un botón solo de icono. Dado que la salida de OCR no es determinista entre escaneos, el mismo elemento puede aparecer en los resultados de Contraste de Color en un escaneo y ser reportado como "NO APLICABLE" en el siguiente. Esta es una característica conocida de OCR, no un error en la regla. Para solucionar este problema, puedes utilizar las
ignoreAPIs para suprimir los resultados de Contraste de Color para los elementos afectados. Aprende más sobre ignorando reglas.
Recursos
Páginas de Cursos de Deque University
Nota: El acceso completo a los recursos de Deque University requiere una suscripción.