Design for AI

Estilo Accesibilidad de alto contraste: prompt de diseño UI

Paleta, reglas tipográficas y un prompt pegable para accesibilidad de alto contraste. También llamado diseño accesible, diseño WCAG AAA, modo de alto contraste, UI inclusiva, a11y primero. WCAG 2.0 (2008), 2.1 (2018), 2.2 (2023); prioridad de diseño desde la presión legal de 2020.

Rasgos

  • contraste de texto de 7:1 o mejor (AAA), componentes de UI a 3:1 como mínimo
  • tipo grande por defecto (18px o más), line-height 1.5 o más, medida de 60-70 caracteres
  • indicadores de foco visibles y gruesos (3px) en cada elemento interactivo
  • enlaces subrayados, botones que parecen botones, nunca solo el color para señalar un estado
  • objetivos táctiles grandes (44px mínimo), espaciado generoso entre ellos
  • movimiento mínimo y siempre desactivado bajo prefers-reduced-motion
  • respeta el modo forced-colors; los iconos llevan etiquetas de texto

Paleta

#ffffff página, #0b0b0b texto, #005a9c azul de enlace (7:1 sobre blanco), #b30000 error, #006400 éxito, #ffd200 anillo de foco sobre oscuro, #1a1a1a superficie oscura

Tipografía

Atkinson Hyperlegible (diseñada para baja visión), IBM Plex Sans, Source Sans 3 o Lexend; cuerpo 18-20px, títulos 700 a 32-48px, mínimo 16px en cualquier sitio; sin pesos finos

Haz

  • prueba cada par texto/fondo a 7:1 y cada borde/icono a 3:1 antes de estilizar nada más
  • haz que el foco sea imposible de pasar por alto: outline 3px solid más offset de 2px, en un color que alcance 3:1 sobre cualquier fondo
  • acompaña cada señal de color con una forma, un icono o texto (texto de error más icono, no solo rojo)

Evita

  • no uses texto de placeholder gris por debajo de 4.5:1 ni inputs con filetes finísimos
  • no elimines los outlines, no desactives el zoom ni animes al hacer scroll
  • no dependas del hover; todo debe funcionar con teclado y táctil

Conocido por: GOV.UK, BBC (GEL), proyecto Atkinson Hyperlegible del Braille Institute, Microsoft Inclusive Design

Semilla CSS
:root {
  --bg: #ffffff;
   --fg: #0b0b0b;
   --accent: #005a9c;
   --error: #b30000;
   --focus: #ffd200;
   --radius: 4px;
   --focus-ring: 3px solid #005a9c;
   --font: 'Atkinson Hyperlegible',sans-serif
}
Prompt

Construye el sitio con un estándar de accesibilidad de alto contraste (WCAG 2.2 AAA donde sea posible). Fondo #ffffff, texto #0b0b0b, enlaces #005a9c siempre subrayados, error #b30000 con icono y texto, éxito #006400. Fuente Atkinson Hyperlegible: cuerpo 19px con line-height 1.6 y max-width 66ch, títulos 700 a 44/32/24px, nada por debajo de 16px, sin pesos por debajo de 400. Todos los elementos interactivos de al menos 44x44px con 12px de espacio entre ellos. Botones: #005a9c sólido con texto blanco, radio 4px, borde de 2px del mismo color para que sobrevivan al modo forced-colors; los botones secundarios llevan un borde 2px #0b0b0b. Foco: outline 3px solid #005a9c, outline-offset 2px en cada elemento; sobre superficies oscuras #1a1a1a usa #ffd200. Inputs: borde 2px #0b0b0b, etiqueta visible encima, nunca solo placeholder. Enlace de salto (skip link) primero en el DOM. Iconos decorativos (aria-hidden) con etiquetas de texto adyacentes. Sin autoplay, sin parallax; cualquier transición de 150ms como máximo y eliminada bajo prefers-reduced-motion. Añade una estructura de landmarks visible: header, nav, main, footer.
Para design.md, .cursorrules o AGENTS.md
## Dirección de diseño
Construye el sitio con un estándar de accesibilidad de alto contraste (WCAG 2.2 AAA donde sea posible). Fondo #ffffff, texto #0b0b0b, enlaces #005a9c siempre subrayados, error #b30000 con icono y texto, éxito #006400. Fuente Atkinson Hyperlegible: cuerpo 19px con line-height 1.6 y max-width 66ch, títulos 700 a 44/32/24px, nada por debajo de 16px, sin pesos por debajo de 400. Todos los elementos interactivos de al menos 44x44px con 12px de espacio entre ellos. Botones: #005a9c sólido con texto blanco, radio 4px, borde de 2px del mismo color para que sobrevivan al modo forced-colors; los botones secundarios llevan un borde 2px #0b0b0b. Foco: outline 3px solid #005a9c, outline-offset 2px en cada elemento; sobre superficies oscuras #1a1a1a usa #ffd200. Inputs: borde 2px #0b0b0b, etiqueta visible encima, nunca solo placeholder. Enlace de salto (skip link) primero en el DOM. Iconos decorativos (aria-hidden) con etiquetas de texto adyacentes. Sin autoplay, sin parallax; cualquier transición de 150ms como máximo y eliminada bajo prefers-reduced-motion. Añade una estructura de landmarks visible: header, nav, main, footer.

## Tokens
:root { --bg:#ffffff; --fg:#0b0b0b; --accent:#005a9c; --error:#b30000; --focus:#ffd200; --radius:4px; --focus-ring:3px solid #005a9c; --font:'Atkinson Hyperlegible',sans-serif }

Mantén estados hover y focus-visible en cada elemento interactivo. No añadas un framework CSS.