Matemáticas del Contraste de Color: Legibilidad y Ratio

Aprenda las reglas matemáticas y los ratios de contraste exigidos por las WCAG para asegurar que su diseño de interfaz sea legible para personas con baja visión y daltonismo.

info Definición Rápida
El Contraste de Color es la diferencia de luminosidad entre el texto (primer plano) y el fondo. Las pautas de accesibilidad WCAG 2.1 establecen ratios matemáticos de contraste específicos (ej. 4.5:1) que deben cumplirse para que el contenido sea legible por el mayor número posible de personas.

¿Por qué el Diseñador debe Conocer la Matemática del Color?

Diseñar solo por “lo que se ve bien” en tu monitor 5K de alta gama es una trampa peligrosa. Una gran parte de la población mundial tiene algún tipo de discapacidad visual o utiliza sus dispositivos bajo la luz directa del sol.

Si el contraste entre el texto y el fondo no es suficiente, la información se vuelve invisible para estas personas. La matemática del contraste no es un límite a tu creatividad; es la garantía de que tus mensajes llegarán a todo el mundo.

Los 2 Estándares de Éxito de las WCAG

Dependiendo del nivel de accesibilidad que busques (AA o AAA), las reglas matemáticas cambian:

1. Nivel AA (El Estándar Industrial)

Es el nivel mínimo exigido por la mayoría de las leyes y manuales de identidad corporativa modernos.

  • Texto Normal (menos de 18pt): Ratio mínimo de 4.5:1.
  • Texto Grande (más de 1dpt / 24px) o Negrita (14pt / 18.5px): Ratio mínimo de 3:1.
  • Componentes de UI y Gráficos: Ratio mínimo de 3:1 (para bordes de inputs, iconos, etc.).

2. Nivel AAA (Máxima Accesibilidad)

Un nivel de excelencia reservado para productos públicos, médicos o de alta seguridad.

  • Texto Normal: Ratio mínimo de 7:1.
  • Texto Grande: Ratio mínimo de 4.5:1.

Cómo se Calcula el Ratio de Contraste

No necesitas hacer las cuentas a mano, pero es útil saber que el ratio se basa en la luminancia relativa de los colores. Se mide en una escala de 1:1 (mismo color) a 21:1 (blanco puro contra negro puro).

  • El blanco sobre blanco tiene un ratio de 1:1.
  • El negro sobre blanco tiene el máximo ratio de 21:1.

Cualquier combinación de colores que elijas se situará en algún punto de esta escala.

Herramientas Imprescindibles en tu Flujo de Trabajo

No adivines el contraste; úsalo como parte de tu diseño en Figma o el navegador:

  • Figma Plugins (Contrast, Stark): Permiten verificar el ratio mientras diseñas cada componente. Algunos incluso sugieren automáticamente el color más cercano que cumpla la norma.
  • Chrome DevTools: Dentro del inspector de elementos, si pulsas sobre el color de un texto, el propio navegador te dirá si cumple los niveles AA o AAA mediante una pequeña marca de verificación.
  • Leonardo.io: Una de las mejores herramientas para crear paletas de colores basadas en ratios de contraste reales, muy útil para sistemas de diseño.

El Caso Especial del Daltonismo (Color Blindness)

Más del 8% de los hombres tiene alguna forma de daltonismo.

  • Regla de Oro: Nunca uses el color como única fuente de información.
  • Si un campo de formulario tiene un error, no lo pongas solo en rojo. Añade un icono de advertencia o un borde más grueso. De esta forma, el usuario podrá identificar el error aunque no distinga el tono de rojo.

Consejos de Mentor

  • Cuidado con el Gris sobre Gris: Es la trampa visual más común en el diseño “moderno”. Los textos grises en cuerpos de letra pequeños suelen fallar estrepitosamente el ratio AA.
  • Usa el Ratio AAA para Contenido Largo: Si el usuario tiene que leer un artículo completo de 2.000 palabras, facilítale la vida usando un ratio superior al 7:1; reducirás su fatiga visual.
  • Prueba en Diferentes Pantallas: Lo que se ve perfecto en tu monitor profesional puede ser invisible en una pantalla de móvil barata con el brillo al 50%. Usa las matemáticas para asegurar la consistencia.

Recursos y Herramientas

accessibility-tree identidad-visual-accesible paletas-tokens-colores redlining-especificaciones