Inicio / Biblioteca / Glosario / Contraste de color
← Volver al glosario

Contraste de color

Diferencia de luminosidad entre el color del texto y su fondo. WCAG 2.1 requiere ratios mínimos: 4.5:1 para texto normal (AA) y 3:1 para texto grande (AA), 7:1 para texto normal (AAA).

¿Qué es el contraste de color?

El contraste de color es la diferencia de luminosidad (luminancia) entre el color del texto (o elementos gráficos) y su color de fondo. Un contraste adecuado es esencial para que el contenido sea legible, especialmente para personas con baja visión, daltonismo o que usan pantallas en condiciones de luz brillante.

Relación con WCAG 2.1

El Criterio 1.4.3 (Contraste - Mínimo) de WCAG 2.1 Nivel AA requiere:

  • Texto normal (menos de 18pt o 14pt en negrita): Ratio de contraste mínimo de 4.5:1
  • Texto grande (18pt o más, o 14pt en negrita o más): Ratio de contraste mínimo de 3:1

El Criterio 1.4.6 (Contraste - Mejorado) de Nivel AAA requiere:

  • Texto normal: Ratio de contraste mínimo de 7:1
  • Texto grande: Ratio de contraste mínimo de 4.5:1

Cálculo del ratio de contraste

El ratio se calcula usando la fórmula: (L1 + 0.05) / (L2 + 0.05) Donde L1 es la luminancia relativa del color más claro y L2 del más oscuro.

Ejemplos prácticos

✅ Correcto: Contraste adecuado (AA)

/* Texto negro sobre fondo blanco: 21:1 */
.texto-oscuro {
  color: #000000;
  background-color: #ffffff;
}

/* Texto blanco sobre fondo azul oscuro: 8.6:1 */
.texto-claro {
  color: #ffffff;
  background-color: #1a237e;
}

✅ Correcto: Texto grande con menor contraste

/* Texto grande (18pt+) puede tener 3:1 */
.titulo-grande {
  font-size: 24px;
  color: #666666; /* Contraste 3.2:1 con fondo blanco */
  background-color: #ffffff;
}

❌ Incorrecto: Contraste insuficiente

/* Texto gris claro sobre fondo blanco: 1.6:1 - NO CUMPLE */
.texto-bajo-contraste {
  color: #cccccc;
  background-color: #ffffff;
}

/* Texto amarillo sobre fondo blanco: 1.07:1 - NO CUMPLE */
.texto-amarillo {
  color: #ffff00;
  background-color: #ffffff;
}

Errores comunes

  1. Confiar solo en el color: No usar solo color para transmitir información
  2. Contraste insuficiente en estados hover/focus: Los estados interactivos también deben tener buen contraste
  3. Ignorar imágenes de fondo: El texto sobre imágenes debe tener contraste adecuado
  4. No considerar texto sobre gradientes: Verificar contraste en todas las áreas del gradiente
  5. Olvidar elementos gráficos: Iconos, botones y elementos UI también necesitan contraste

Buenas prácticas

  • Verificar con herramientas: Usar herramientas como WebAIM Contrast Checker o axe DevTools
  • Probar en diferentes condiciones: Verificar en luz brillante y con diferentes dispositivos
  • Considerar estados: Hover, focus, active, disabled deben tener contraste adecuado
  • Texto sobre imágenes: Asegurar fondo semitransparente o sombra si es necesario
  • Elementos no textuales: Iconos, gráficos y UI también necesitan contraste 3:1 mínimo

Herramientas de verificación

Términos relacionados

  • [[Ratio de contraste]]
  • [[Luminancia relativa]]
  • [[WCAG 2.1]]
  • [[Criterio 1.4.3]]
  • [[Baja visión]]