# Accesibilidad de alto contraste

También llamado: diseño accesible, diseño WCAG AAA, modo de alto contraste, UI inclusiva, a11y primero  
Época: WCAG 2.0 (2008), 2.1 (2018), 2.2 (2023); prioridad de diseño desde la presión legal de 2020  
Página: https://designforai.dev/es/style/high-contrast-accessibility

## 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

```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.