Comprendiendo el Contraste de Color

1. ¿Qué es el Contraste de Color?

El contraste de color mide la diferencia de brillo percibido (luminancia) entre dos colores. Se expresa como una proporción desde 1:1 (sin contraste) hasta 21:1 (contraste máximo). Esta proporción determina con que facilidad se pueden distinguir el texto y los elementos de la interfaz de sus fondos.

A diferencia de la simple diferencia de color, la proporción de contraste tiene en cuenta como el ojo humano percibe el brillo. Dos colores pueden parecer diferentes pero tener valores de luminancia similares, resultando en un contraste pobre. Por ejemplo, rojo saturado (#FF0000) y verde saturado (#00FF00) se ven claramente diferentes, pero ambos tienen un brillo similar.

2. Por Qué Importa el Contraste

Un buen contraste de color es esencial para la accesibilidad y usabilidad. Afecta no solo a personas con discapacidades visuales, sino a todos en diversos contextos. Un contraste pobre puede hacer que el contenido sea completamente ilegible para millones de usuarios.

Quien se Beneficia del Buen Contraste:

• ~2.2 mil millones de personas globalmente tienen discapacidad visual (OMS, 2023)
• 8% de los hombres y 0.5% de las mujeres tienen alguna forma de daltonismo
• Todos experimentan sensibilidad de contraste reducida bajo luz solar brillante o condiciones de poca luz
• Los cambios de visión relacionados con la edad afectan a casi todos los mayores de 40 años (presbicia)

3. Pautas WCAG Explicadas

Las Pautas de Accesibilidad para el Contenido Web (WCAG) son el estándar internacional para la accesibilidad web. WCAG 2.2 define proporciones de contraste especificas para garantizar que el contenido sea perceptible por personas con visión moderadamente baja o deficiencias de color.

Nivel AA (Estándar Mínimo)

El Nivel AA es la linea base para la mayoria de organizaciones y es legalmente requerido en muchos paises. Requiere contraste de 4.5:1 para texto normal y 3:1 para texto grande. Este nivel acomoda a usuarios con visión 20/40, el umbral para licencias de conducir en la mayoria de paises.

Nivel AAA (Accesibilidad Mejorada)

El Nivel AAA proporciona accesibilidad mejorada con contraste de 7:1 para texto normal y 4.5:1 para texto grande. Este nivel se recomienda para sitios web gubernamentales, aplicaciones de salud y cualquier contenido dirigido a adultos mayores o usuarios con discapacidades visuales.

4. Categorías de Tamaño de Texto

WCAG define diferentes requisitos de contraste basados en el tamaño del texto porque el texto mas grande es inherentemente mas fácil de leer. Comprender estos umbrales es crucial para aplicar los estandares correctos.

Texto Normal

El texto normal se define como texto menor de 18pt (24px) o menor de 14pt negrita (aproximadamente 18.66px negrita). Esto incluye texto del cuerpo, pies de foto, etiquetas de formulario y la mayoria del texto de interfaz. El texto normal requiere las proporciones de contraste mas altas: 4.5:1 para AA y 7:1 para AAA.

Texto Grande

El texto grande es de 18pt (24px) o mas, o 14pt (18.66px) negrita o mas. Esto tipicamente incluye encabezados (h1-h3), botones y texto enfatizado. El texto grande tiene requisitos relajados porque el tamaño aumentado compensa el menor contraste: 3:1 para AA y 4.5:1 para AAA.

5. Cómo se Calcula el Contraste

Comprender el cálculo del contraste le ayuda a predecir que combinaciones de colores funcionaran. El proceso implica convertir colores a valores de luminancia y luego compararlos.

Paso 1: Convertir a sRGB

Los colores primero se normalizan a valores sRGB entre 0 y 1 dividiendo cada componente RGB por 255. Luego, se aplica corrección gamma para tener en cuenta como las pantallas renderizan el color. Los valores <= 0.03928 se dividen por 12.92; los valores mayores usan la fórmula ((valor + 0.055) / 1.055) ^ 2.4.

Paso 2: Calcular Luminancia

La luminancia se calcula usando coeficientes ponderados que reflejan la sensibilidad del ojo humano: L = 0.2126 × R + 0.7152 × G + 0.0722 × B. Note que el verde contribuye mas al brillo percibido (71.52%), mientras que el azul contribuye menos (7.22%). Por eso el texto azul puro es mas difícil de leer que el verde.

Paso 3: Calcular Proporción

La proporción de contraste es (L1 + 0.05) / (L2 + 0.05) donde L1 es la luminancia del color mas claro y L2 es la luminancia del color mas oscuro. El desplazamiento de 0.05 previene la división por cero y tiene en cuenta la luz ambiente. El resultado va de 1:1 (identico) a 21:1 (blanco y negro).

6. Elementos de UI y Requisitos

WCAG 2.2 introdujo requisitos de contraste para componentes de interfaz de usuario y objetos gráficos, no solo texto. Diferentes elementos tienen diferentes requisitos basados en su función e importancia.

Contenido de Texto

Todo el texto debe cumplir los requisitos de contraste basados en el tamaño: 4.5:1 para texto normal (AA) o 7:1 (AAA), y 3:1 para texto grande (AA) o 4.5:1 (AAA). Esto incluye texto del cuerpo, encabezados, enlaces, etiquetas de botones, etiquetas de formularios, mensajes de error y texto de marcador de posición.

Componentes de UI (WCAG 2.2)

Los elementos interactivos requieren contraste de 3:1 contra colores adyacentes. Esto incluye bordes de campos de formulario, contornos de casillas de verificación y botones de radio, limites de botones, indicadores de enfoque y cualquier indicador visual que muestre el estado o limite de un componente.

Iconos y Gráficos

Los gráficos informativos requieren contraste de 3:1 cuando transmiten significado no disponible a traves del texto. Esto incluye iconos que indican estado (advertencia, error, exito), visualizaciones de datos e infografias. Los gráficos puramente decorativos estan exentos de estos requisitos.

7. Probando tus Colores

Las pruebas efectivas de contraste van mas alla de solo verificar proporciones. Un enfoque sistematico asegura que sus colores funcionen para todos los usuarios en todas las condiciones.

Verificar Proporciones de Contraste

Use nuestra herramienta verificadora de contraste para verificar que sus combinaciones de texto y fondo cumplan los requisitos WCAG. Pruebe cada combinación de colores en su diseño, incluyendo estados hover, estados de enfoque, estados deshabilitados y estados de error.

Probar para Daltonismo

Use nuestra función de simulación de daltonismo para ver como aparece su diseño a usuarios con protanopia, deuteranopia y tritanopia. Asegurese de que la información critica no se transmita solo por color—añada iconos, patrones o etiquetas de texto.

Probar en Condiciones Reales

Vea su diseño en diferentes dispositivos y en diferentes condiciones de iluminación. Pruebe en pantallas de alta resolución y estándar. Intente ver bajo luz solar brillante y en habitaciones con poca luz. Use las funciones de accesibilidad de su teléfono para probar con el modo de escala de grises habilitado.

8. Mejores Practicas

Seguir estas mejores practicas ayudara a garantizar que sus diseños sean accesibles para la audiencia mas amplia posible mientras mantienen el atractivo visual.

Si:

• Pruebe los colores temprano en el proceso de diseño, no solo antes del lanzamiento
• Construya una paleta de colores con la accesibilidad en mente desde el principio
• Use multiples indicadores para información importante (color + icono + texto)
• Documente sus combinaciones de colores accesibles para uso consistente en todo su equipo
• Apunte al cumplimiento AAA cuando sea posible, especialmente para contenido critico

No:

• Confie unicamente en el color para transmitir significado (use también iconos, patrones o texto)
• Use texto gris claro para contenido "menos importante"—todavia necesita ser legible
• Asuma que los colores de su marca son accesibles—siempre verifique
• Olvide el texto sobre imágenes o degradados—pruebe las areas de menor contraste