¿Qué hace Sistema de Color Accesible?
Propósito
La habilidad Sistema de Color Accesible proporciona una metodología para crear paletas de colores visualmente cohesivas y funcionalmente accesibles. Va más allá de la elección estética de colores hacia un sistema estructurado de escalas, combinaciones seguras de contraste y aplicación semántica, asegurando que el contenido sea perceptible por todos los usuarios, incluidos aquellos con discapacidades visuales.
Casos de Uso
- Establecer la presencia digital de color de una nueva marca.
- Auditar y corregir problemas de accesibilidad relacionados con color en un sitio web existente.
- Diseñar temas de Modo Oscuro/Claro.
- Definir colores semánticos para retroalimentación (éxito, error, advertencia).
Cuándo NO Usar
- Experiencias Artísticas: Donde el color se usa puramente para expresión y no lleva información funcional (aunque la accesibilidad sigue siendo recomendada).
- Aplicaciones Heredadas con Código Fijo: Donde la deuda técnica imposibilita implementar un sistema de variables (mejor centrarse en correcciones puntuales).
- Elementos Puramente Decorativos: Elementos como patrones de fondo que no contienen texto o componentes interactivos (WCAG 1.4.3 no aplica aquí).
Entradas
Para generar un sistema de color accesible, necesitas:
- Color Primario de Marca: El color central que identifica la marca (ej., #0055FF).
- Base Neutra: Un punto de partida para grises/negros (ej., #1A1A1A o un neutro teñido).
- Objetivo de Accesibilidad: Nivel AA de WCAG (estándar) o AAA (mejorado).
- Contexto de Uso: ¿Es para un panel de alta densidad, una página de aterrizaje de marketing o una aplicación utilitaria?
Salidas
- Escalas de Color: Paletas tonales para colores Primario, Secundario, Neutro y Semántico (generalmente escalas de 10 pasos).
- Matriz de Contraste: Un mapa de qué colores de primer plano son seguros de usar sobre qué colores de fondo.
- Mapeo Semántico: Roles definidos para los colores (ej.,
--color-action-primary,--color-surface-muted). - Propiedades Personalizadas CSS: Un bloque de variables CSS listo para producción, opcionalmente usando
color-mix()para derivar tonos hover/active de un solo token base en lugar de elegir manualmente cada estado de color.
Flujo de Trabajo
1. Generar Escalas Tonales
Expande los colores base en escalas (ej., 50 a 900). Usa una herramienta o fórmula que mantenga pasos de luminosidad consistentes. Trabajar en el espacio de color OKLCH (en lugar de HSL) produce pasos de luminosidad más perceptualmente uniformes entre matices, lo que facilita predecir el contraste antes de las pruebas. Consejo: Asegúrate de que tu Primario 500 o 600 sea la versión de "marca".
2. Definir Neutros
Crea una escala neutra. Considera "teñir" los neutros con una pequeña cantidad del color primario (ej., 2-5%) para crear una apariencia más cohesiva.
3. Establecer Roles Semánticos
Asigna colores a roles funcionales:
- Acción: Color primario para botones, enlaces y estados activos.
- Superficie: Fondos, tarjetas y divisores (Neutros).
- Contenido: Texto e íconos (Neutros de alto contraste).
- Estado: Éxito (Verde), Advertencia (Amarillo/Naranja), Error (Rojo), Información (Azul).
4. Realizar Validación de Contraste
Prueba combinaciones usando fórmulas WCAG (1.4.3, 1.4.11):
- Texto Normal: 4.5:1 para AA, 7:1 para AAA.
- Texto Grande (>18pt): 3:1 para AA, 4.5:1 para AAA.
- Componentes de UI/Íconos: 3:1 para AA (contraste no textual, 1.4.11).
- Indicadores de Enfoque: 3:1 contra colores adyacentes, y el indicador no debe quedar oculto por encabezados fijos u otro contenido (WCAG 2.2 SC 2.4.11, Focus Not Obscured).
5. Crear Reglas de Combinación
Documenta qué colores de texto pueden ir sobre qué fondos. Ejemplo: El texto blanco (#FFFFFF) solo es seguro sobre Primario 600 o superior.
Reglas de Decisión
- Legibilidad Primero: La función (legibilidad) siempre prevalece sobre la estética. Si un color de marca es demasiado claro para texto, usa una variante más oscura para el texto mientras mantienes el color de marca para elementos decorativos.
- Evitar Color Solo: Nunca confíes en el color como la única forma de transmitir información (ej., incluye un ícono o etiqueta de texto con un mensaje de error).
- Luminosidad Consistente: Mantén valores de luminosidad similares en diferentes matices en el mismo nivel de escala (ej., Rojo 500 y Azul 500 deben tener un brillo percibido similar).
Restricciones
- Responsividad: Los colores deben mantener contraste en pantallas móviles donde el deslumbramiento o las pantallas de baja calidad podrían reducir la visibilidad.
- Accesibilidad: Debe cumplir al menos con los estándares WCAG 2.2 AA para todos los elementos funcionales, incluido el requisito 2.4.11 de que los indicadores de enfoque permanezcan visibles y no oscurecidos.
- Jerarquía: Usa saturación y contraste de color para guiar la vista; los elementos más importantes (CTAs) deben tener mayor peso visual.
Patrones Comunes de Falla
- Contraste Insuficiente: Usar texto gris claro sobre fondo blanco o texto blanco sobre un color de marca claro.
- Colores Vibrantes: Combinar colores de alta saturación (como rojo y verde) que causan fatiga visual.
- Demasiados Colores: Crear un efecto "arcoíris" que diluye la identidad de marca y confunde la jerarquía.
- Uso Semántico Incorrecto: Usar "Rojo de Error" para un elemento decorativo, lo que genera ansiedad en el usuario.
Criterios de Validación
- Cada elemento de texto funcional tiene una relación de contraste de al menos 4.5:1 contra su fondo.
- Los componentes de UI (bordes, íconos) tienen al menos 3:1 de contraste.
- El sistema incluye una escala clara para colores primarios y neutros.
- La información nunca se transmite solo a través del color.
- El sistema está documentado usando propiedades personalizadas CSS para portabilidad.