Interfaz de contraste y legibilidad

1) Por qué el contraste

• reduce la carga cognitiva y la fatiga,
• mejora la velocidad de exploración de la interfaz,
• mejora la accesibilidad de las personas con discapacidad visual y de la percepción del color,
• reduce el número de errores en escenarios interrelacionados (pagos, formularios, confirmaciones).

2) Conceptos y fórmulas básicos

2. 1 Contraste de WCAG

• Contrast = (L1 + 0. 05) / (L2 + 0. 05), donde 'L1 ≥ L2', 'L' es el brillo relativo (0.. 1).

2. 2 Brillo relativo (sRGB)

1. Lleve los componentes R, G, B al rango 0.. 1.

• si 'c ≤ 0. 04045 ', entonces' c _ lin = c/12. 92`
• de lo contrario, 'c _ lin = ((c + 0. 055) / 1. 055) ^ 2. 4`

3. Brillo: 'L = 0. 2126 R_lin + 0. 7152 G_lin + 0. 0722 B_lin`

2. 3 Vistas de color

HSL/HSV - conveniente para el ajuste manual, pero no uniforme perceptual.
Lab/LCH/OKLCH - más cerca de la percepción humana; OKLCH es conveniente para la variación sistemática de la luz/saturación mientras mantiene la legibilidad.

3) Normas y objetivos (WCAG 2. 2)

Texto ≥ 14 pt bold o ≥ 18 pt (normal): contraste mínimo 3:1 (AA).
El resto del texto: contraste de un mínimo de 4. 5:1 (AA).
AAA (mayor legibilidad): 7:1 para el texto normal; 4. 5:1 para los grandes.
Iconografía e importantes elementos no fotográficos (bordes de campos de entrada, casillas de verificación, interruptores, indicadores de error): referencia 3:1 con fondo.
Los estados (hover/focus/pressed/disabled) deben tener una diferenciación no inferior a 3:1 entre los estados o con el fondo, más indicadores explícitos no fotográficos (subrayado de referencias, sombras/marcos, cambio de espesor).

4) Sistema de diseño: tokens de contraste

Recomendamos en el sistema de diseño fijar el contraste como propiedad de los tokens.

• 'fg/primary' ↔ 'bg/base' ≥ 7:1 (AAA para texto crítico)
• `fg/secondary` ↔ `bg/base` ≥ 4. 5:1
• 'fg/muted' ↔ 'bg/subtle' ≥ 3:1 (texto de servicio)
• 'border/default' ↔ 'bg/base' ≥ 3:1 (bordes de campo, tarjetas)
• `interactive/default` ↔ `bg/base` ≥ 4. 5:1 (enlaces/botones)
• 'interactive/disabled' no debe imitar estados activos; utilice la reducción del contraste y los atributos cursor/ARIA.

• luz básica del tema (L), luego desviaciones 'Δ L' para capas/superficies ('bg/subtle', 'bg/elevated'),
• fijar los pares de contraste mínimos en las pruebas.

5) Tema claro y oscuro

Tema claro: texto casi negro (no puro # 000, sino cálido/frío), fondo de blanco a ligeramente tonificado para reducir el «brillo».
Tema oscuro: evite el fondo puro # 000 - grafito profundo/carbón con L≈0. 12–0. 16 reduce las luces; suavizar el texto blanco a L≈0. 9.
Mantenga los mismos objetivos de contraste en ambos temas; evitar que los acentos de color pierdan legibilidad sobre un fondo oscuro (a menudo se necesita un cambio de 'Δ L' y una disminución de la saturación).

6) Texto en imágenes y videos

Use sobremesas (gradiente/capa translúcida 40-60%) o dados debajo del texto.
Fije un mínimo de 4. 5:1 entre el texto y el fondo local del dados.
Para el vídeo dinámico, un fondo/sobreesfuerzo adaptativo basado en el análisis del brillo del fotograma (sampling del área central/sustrato).

7) Estado y interactividad

Las referencias no sólo deben distinguirse por el color: el subrayado predeterminado o el subrayado en hover/focus + el contraste ≥ 3:1 con el texto normal.
Botones: texto e icono ≥ 4. 5:1 al relleno; relleno ≥ 3:1 al entorno.
Errores/aciertos/advertencias: no confíe en el color; agregar iconos/sugerencias de texto; proporcione un contraste de texto mínimo de 4. 5:1.

8) Personas con discapacidad de la percepción del color

• Deuteranopia/Protanopia (zona roja y verde): evite las combinaciones de «rojo vs verde» sin signos adicionales.
• Tritanopia: los pares azul-amarillos se revisan por separado.
• Haga que las formas y los gráficos sean claros: etiquetas de texto, diferentes tipos de trazos/viñetas, patrones de relleno, firmas de segmentos.

9) Tipografía y fondo

Kegl texto principal: 14-16 px mínimo (web), 16-18 px para zonas de contenido.
Intervalo entre líneas 1. 4–1. 6 mejora la legibilidad en un fondo de alto contraste.
Evite las inscripciones finas en el contraste insuficiente.
Texto en fondos de colores: reduzca la saturación del fondo y/o aumente la luminosidad para llegar a la relación objetivo.

10) Gráficos, tablas, gráficos

Líneas/columnas ≥ 3:1 a la cuadrícula/fondo.
Firmas de ejes y leyendas ≥ 4. 5:1.
Utilice formas/patrones distinguibles además del color.

11) Contraste dinámico/adaptativo

Auto contrast: calcula el color de contraste del texto al relleno seleccionado (por ejemplo, a través de OKLCH: selecciona 'L' para lograr 4. 5:1).
Configuración del sistema: respeta los modos 'prefers-contrast', 'forced-colors', high-contrast del sistema operativo.
Personalización: Personalización de «Alto contraste» en la aplicación (amplificación de 'Δ L', sustitución de los acentos de marca por otros más neutrales manteniendo la identidad corporativa a través de la forma/iconos).

12) Procesos y automatización de control

12. 1 Para diseñadores

Compruebe el contraste en los diseños (en ambos temas y en los fondos clave).
Escriba «ranuras de contraste» en los componentes (title/primary/secondary/hint).
Documente los contextos de fondo válidos para cada componente.

12. 2 Para desarrolladores

Yunit-helpers: función de cálculo de contraste y asertivo en pruebas para pares de token.
Snapshots visuales con comprobación de métricas de contraste (scrin render + cálculo de L1/L2 por samples).
Linters de estilos: prohibir el color «crudo», solo a través de fichas.

12. 3 EN CI/CD

Comprobar todos los pares de 'fg/bg' en los temas y estados.
Informe de infracciones que especifica el componente, la variante, el tema y el valor real (por ejemplo, 3. 9:1 con los 4 requeridos. 5:1).

13) Especificidad de iGaming (opcional)

Las pancartas promocionales y las tarjetas de los torneos a menudo «comen» el texto. Se requiere dados/sobremesas y limitación de la saturación del fondo.
Los elementos del sistema de notificaciones responsables (18 +, límites, riesgos) son AAA por contraste.
En las tablas de clasificación/coeficientes: números y signos «+/-» ≥ 4. 5:1, retroiluminación de la victoria - no sólo por el color (iconos/etiquetas).

14) Antipattern

Confiar sólo en el color para distinguir el estado.
Fuentes grises delgadas sobre un fondo de color sin calcular el contraste.
«Oscuro sobre oscuro» en el Modo Oscuro, «brillante sobre brillante» en las zonas promocionales.
Texto sobre fondo con detalles/ruido sin dados.

15) Lista de verificación para rugir

Texto básico

• ≥ 4. 5:1 (normal), ≥ 3:1 (grande/gordo).

Enlaces/botones

• Texto del botón ≥ 4. 5:1 al relleno.
• Distinción de estados ≥ 3:1 o indicadores explícitos.

Iconos/bordes

• ≥ 3:1 al fondo.

Temas oscuros/ligeros

• Se han alcanzado los mismos objetivos de contraste.

fony de medios

• Overlay/dados, coeficiente sostenido.

Disponibilidad

• Hay signos no fotográficos además del color.

Automatización

• Pruebas de contraste en CI/CD por tokens y componentes.

16) Introducción de tokens (ejemplo de notación)

color.bg.base   = oklch(0.95 0.02 260)
color.fg.primary  = oklch(0.18 0.04 260)  # ≈7:1 color.fg.secondary = oklch(0.30 0.03 260)  # ≥4.5:1 color.border    = oklch(0.40 0.03 260)  # ≥3:1 color.accent    = oklch(0.65 0.12 230)  # проверить на обоих фонах

Nota: los valores son ejemplares; las finales se seleccionan según el cálculo del contraste en un tema específico.

17) Documentación para el equipo

En las gaidline, especifique: objetivos de contraste, ejemplos de pares fieles/erróneos, la matriz 'fg × bg' para componentes clave, reglas para fondos multimedia, y cómo habilitar el modo de alto contraste.
Mantenga la página en vivo «Excepciones y razones» (por ejemplo, permitido 3. 8:1 en un caso estrecho de un gran titular de exhibición).

Resumen breve

El contraste es un parámetro medible, no gustativo. Establecer objetivos (AA/AAA), controlarlos a través de tokens (mejor en OKLCH), verificarlos automáticamente en CI y visualmente en diseños, considerar temas oscuros/claros y personas con discapacidad visual de color. Esto garantiza la legibilidad, reduce los errores y aumenta la conversión.