Hace unos meses revisaba un diseño antiguo mío. Texto gris claro sobre fondo blanco, muy elegante, muy minimalista. El problema: era casi ilegible. Y no exagero — mira esto:
Mi gris 'elegante' de 2021
¿Puedes leer esto cómodamente?
Un ratio de 2.85:1. El mínimo recomendado para texto normal es 4.5:1. Yo, que me consideraba buen diseñador, había pasado meses usando un color que muchas personas no podían leer cómodamente.
El contraste se mide como un ratio entre la luminosidad de dos colores. Va de 1:1 (dos colores idénticos, literalmente invisible) a 21:1 (negro puro sobre blanco puro, máximo contraste posible). WCAG, el estándar de accesibilidad web, define dos niveles: AA (el mínimo aceptable, 4.5:1 para texto normal) y AAA (el ideal, 7:1 para texto normal).
El texto grande necesita menos contraste porque las letras más grandes son más fáciles de distinguir — 3:1 para AA y 4.5:1 para AAA. "Grande" significa 18px o más, o 14px si está en negrita.
Este texto gris es muy común en interfaces
Este texto gris es muy común en interfaces
A la izquierda, el gris #999999 que usaba yo (y que se usa constantemente en placeholders, texto secundario, captions). A la derecha, #595959 — notablemente más oscuro, pero cumple WCAG AA. Si quieres gris sobre blanco y cumplir los estándares, necesitas al menos #767676.
Prueba tus propias combinaciones aquí:
Texto de ejemplo
Este es un ejemplo de cómo se verá el texto con estos colores.
La fórmula técnica usa luminosidad relativa, que pondera el verde más que el rojo y el azul (nuestros ojos son más sensibles al verde). Un verde brillante te parece más "luminoso" que un azul brillante aunque técnicamente tengan el mismo valor en sus canales RGB. Pero no necesitas saber la matemática — usa la herramienta.
El error más común que veo es asumir que si el modo claro pasa, el modo oscuro también pasa. No funciona así.
Gris en modo oscuro
¿Puedes leer esto cómodamente?
Este gris sobre un fondo casi negro tiene 4.68:1. Pasa AA, pero apenas. Y ese mismo gris sobre negro puro (#000000) sube a 5.32:1. La diferencia entre #000000 y #1a1a1a como fondo cambia significativamente el contraste. Siempre verifica ambos modos por separado.
Otro error frecuente: colores de marca que no funcionan como texto. El azul corporativo quedó genial en el logo, pero ¿funciona como color de enlace sobre fondo blanco? A veces no. La solución es simple — oscurece ligeramente el color cuando lo uses para texto. Nadie va a notar que tu azul pasó de #2563eb a #1d4ed8, pero todos notarán si no pueden leer los enlaces.
Cuando diseñamos, típicamente trabajamos en monitores calibrados, con buena iluminación, con vista perfecta. Pero los usuarios leen en pantallas con brillo bajo, al sol con reflejos, sin gafas, con vista cansada. El 8% de los hombres tiene algún tipo de daltonismo. Un contraste adecuado no es "para personas con discapacidad" — es para todos en algún momento del día.
El momento de verificar el contraste no es cuando el diseño está terminado. Es cuando estás definiendo la paleta de colores. Mi proceso ahora es: elijo los colores primarios, inmediatamente verifico si funcionan como texto sobre los fondos principales, y si no funcionan, creo variantes más oscuras (para fondos claros) o más claras (para fondos oscuros). Esto evita la conversación incómoda de "el cliente quiere exactamente este azul pero no cumple accesibilidad".
Si tienes dudas, sube el contraste. Un texto ligeramente más oscuro de lo "estéticamente ideal" es infinitamente mejor que un texto que alguien no puede leer. Y si un diseño "necesita" bajo contraste para verse bien, el problema está en el diseño, no en las reglas de accesibilidad.
Guarda la herramienta de arriba en favoritos. Úsala antes de finalizar cualquier paleta de colores. Tu futuro yo te lo agradecerá.