Contexto
Despues de definir 4 temas para el portfolio (editorial/terminal x light/dark), las pruebas de accesibilidad mostraron que varios textos no cumplian WCAG AA. El peor caso: --fg-subtle tenia ratio 2.39:1 cuando el minimo es 4.5:1.
Lo que aprendi
Definir colores bonitos no es suficiente -- hay que verificar contrast ratios para cada combinacion de color de texto sobre color de fondo, en cada tema.
El proceso iterativo
Intento 1: elegí colores por estetica
--fg-subtle: #a8a29e; /* stone-400, se ve bien */
Resultado: 2.39:1 sobre --background: #0c0a09 -- FAIL
Intento 2: subi un tono
--fg-subtle: #d6d3d1; /* stone-300, mas claro */
Resultado: 5.02:1 -- pero en light mode se perdia contra fondo claro
Intento 3: valores diferentes por modo
.theme-editorial { --fg-subtle: #6e6863; } /* dark text on light bg: 5.4:1 */
.theme-editorial.dark { --fg-subtle: #a8a29e; } /* light text on dark bg: 5.7:1 */
Checklist minimo
| Tipo de texto | Ratio minimo | Ejemplo |
|---|---|---|
| Texto normal (< 18px) | 4.5:1 | Parrafos, labels |
| Texto grande (>= 18px bold) | 3:1 | Headings |
| Elementos UI | 3:1 | Borders, icons |
Herramienta rapida
Para verificar en browser:
- Chrome DevTools > Elements > seleccionar texto
- En la seccion "color" del panel de estilos, click en el cuadro de color
- Muestra el contrast ratio y si pasa AA/AAA
O usar WebAIM Contrast Checker para verificar combinaciones especificas.
Leccion
Con 4 temas tienes minimo 8 combinaciones de fg/bg que verificar (texto principal + texto sutil en cada tema). Hacerlo al final del design es dolor -- mejor verificar desde la primera definicion de colores.