Por qué existen las relaciones de contraste
Cómo se relacionan el ojo y las matemáticas detrás de 4.5 a 1.
Por qué existen las relaciones de contraste es una lección gratuita de Web Accessibility Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Web Accessibility Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Web Accessibility Academy incluye 4 lecciones en total.
Qué significa realmente el contraste
Al leer un texto, sus ojos comparan la claridad u oscuridad de las letras con la del fondo. Esa diferencia es el contraste. 👀
Por qué necesitamos un número
Un diseñador dice que un color se ve bien y otro entrecierra los ojos. Para resolverlo, la accesibilidad utiliza una relación de contraste, un único número medible que cualquiera puede comprobar.
La escala de proporciones
La proporción va de 1:1 a 21:1. El negro sobre blanco alcanza el máximo, 21:1, mientras que un color sobre sí mismo es 1:1 y resulta completamente invisible.
Luminancia, no solo color
El cálculo se basa en la luminancia, es decir, el brillo percibido de un color. Dos tonos muy distintos pueden chocar si su brillo es demasiado parecido.
No todos los ojos son iguales
Las reglas de contraste existen porque la visión varía. Las personas con baja visión, los ojos de más edad y quienes leen cansados necesitan una diferencia mayor que un diseñador joven ante una pantalla luminosa.
El mundo real se lo pone difícil
El resplandor del sol, los monitores baratos y los teléfonos con el brillo reducido disminuyen el contraste. Una proporción que resiste esas condiciones mantiene el texto legible en cualquier lugar.
De dónde sale 4.5 a 1
WCAG eligió 4.5:1 para el texto normal como umbral mínimo respaldado por la investigación. Tiene en cuenta aproximadamente una baja visión moderada sin exigir blanco y negro puros.
Texto más grande, menor exigencia
El texto grande es más fácil de leer, por lo que el mínimo baja a 3:1. Las letras grandes y gruesas toleran una diferencia de brillo menor que el texto pequeño del cuerpo.
Combinación de primer plano y fondo
Una proporción siempre se refiere a dos colores juntos. Un gris nunca es legible o ilegible por sí solo, sino únicamente en relación con la superficie sobre la que aparece.
No se aplica solo al texto
La misma idea se extiende a los componentes de la interfaz. Los bordes de los botones, los iconos y los contornos de los formularios también necesitan suficiente contraste para que los usuarios puedan encontrarlos.
Una proporción en CSS real
Estos dos colores forman aproximadamente una proporción de 4.6:1, lo que supera por poco el mínimo para texto normal y permite una lectura cómoda.
p {
color: #595959;
background: #ffffff;
}Comprobación rápida
Comprobemos por qué existe la proporción.
Repaso: por qué existen las proporciones
Ha aprendido que una relación de contraste convierte la legibilidad en un único número objetivo basado en la luminancia, para que el texto funcione para todos. A continuación: alcanzar los umbrales AA. ✅
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 30
- Lecciones
- 120
Preguntas frecuentes
¿La lección «Por qué existen las relaciones de contraste» es gratis?
Sí — el texto completo de «Por qué existen las relaciones de contraste» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Web Accessibility Academy, actualiza a CoddyKit PRO. El curso de Web Accessibility Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Por qué existen las relaciones de contraste»?
Cómo se relacionan el ojo y las matemáticas detrás de 4.5 a 1. Practicas Web Accessibility Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Web Accessibility Academy?
No se requiere experiencia previa. Web Accessibility Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Por qué existen las relaciones de contraste»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Web Accessibility Academy?
Sí. Cada lección de Web Accessibility Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Por qué existen las relaciones de contraste
- Alcance AA: umbrales para texto y texto grande
- Nunca dependa solo del color
- Compruebe el contraste con herramientas gratuitas