Contraste de color real: cómo saber si tu texto se lee bajo la luz del sol

El diseño no ocurre en un monitor perfecto. Ocurre en un celular con el brillo bajo para ahorrar batería, bajo el sol de las tres de la tarde, en una pantalla con reflejos o con un panel barato que lava los colores. Si tu texto solo se lee en tu monitor calibrado, no se lee.

El contraste no es una cuestión de gusto

Es física. El contraste mide la diferencia de luminancia entre el color del texto y el del fondo, y se expresa como una relación: 4.5:1, 7:1. Cuanto más alto el número, más se despega el texto del fondo.

No confíes en tu ojo. Lo que a vos te parece "suficiente" puede ser invisible para una persona con baja visión, para alguien con daltonismo o para cualquiera mirando la pantalla al aire libre. Tu vista sana, en tu escritorio, con buena luz, es el peor juez posible.

El dato que ordena todo: el bajo contraste aparece en el 83,9 % de las páginas de inicio más visitadas del mundo, según el informe WebAIM Million 2026 (en inglés, se abre en otra pestaña). El error más común de la web es también uno de los más fáciles de arreglar.

Los umbrales que tenés que memorizar

WCAG define mínimos según el tamaño y el peso del texto:

• Texto normal (menos de 24px): 4.5:1 para nivel AA, 7:1 para AAA.
• Texto grande (24px o más, o 18.5px en negrita): 3:1 para AA, 4.5:1 para AAA.
• Componentes de interfaz e íconos (bordes de inputs, botones, gráficos): 3:1 como mínimo.

La lógica: cuanto más grande el trazo, menos contraste necesita para leerse. Un título de 40px sobrevive con menos ratio que una nota al pie de 12px.

El gris claro es la trampa más común

El error número uno del diseño moderno es el texto gris claro sobre fondo blanco. Se ve elegante, minimalista, "premium". Y falla el contraste casi siempre.

• #B0B0B0 sobre blanco → 2.5:1. Falla incluso para texto grande.
• #767676 sobre blanco → 4.54:1. Pasa AA justo para texto normal.
• #595959 sobre blanco → 7:1. Pasa AAA.

Si querés un gris "suave" para texto secundario, #767676 es el punto más claro que podés usar sin romper el estándar. Todo lo que sea más claro que eso es decoración que nadie va a poder leer.

El color nunca puede ser la única señal

WCAG 1.4.1 es tajante: no uses solo el color para comunicar información. Un link que solo se distingue del texto por ser azul desaparece para una persona con daltonismo. Un campo de error que solo se marca en rojo no existe para quien no distingue el rojo del verde.

La regla práctica: sumá siempre una segunda señal.

• Links: subrayado, no solo color.
• Errores: un ícono y un texto ("Falta el email"), no solo el borde rojo.
• Estados en un gráfico: patrones, etiquetas o formas, además del color.

Cómo verificar de verdad

1. Sacá el ratio con una herramienta, no a ojo. Pegá los dos hex y leé el número.
2. Probá en el peor escenario: bajá el brillo del celular al mínimo y mirá tu pantalla afuera.
3. Simulá daltonismo: la mayoría de los navegadores tiene filtros de visión en las herramientas de desarrollo.
4. Chequeá los estados: el texto sobre un botón azul, el placeholder de un input, el link visitado. Suelen ser los que fallan.

Checklist rápido antes de publicar

1. ¿El texto normal llega a 4.5:1 contra su fondo?
2. ¿Los títulos y textos grandes llegan al menos a 3:1?
3. ¿Los bordes de inputs, botones e íconos llegan a 3:1?
4. ¿Hay alguna información que dependa solo del color? Sumale una segunda señal.
5. ¿Usaste gris claro para texto? Verificá que no baje de #767676.
6. ¿Lo probaste con brillo bajo y bajo luz fuerte?