El otro día un cliente me mandó una captura de su sitio abierto en el celular, en plena calle, con un mensaje corto: "no consigo leer nada". Lo abrí, me quedé mirando, y tenía toda la razón. Ese gris claro precioso sobre blanco que parecía tan elegante en mi monitor calibrado, dentro de casa, simplemente desaparecía bajo el sol. Y mira, podría haber fingido que la culpa era de su celular. Pero la verdad es más incómoda: el error era mío, y ya lo había cometido antes.
Tardé en interiorizar algo que hoy me parece obvio: el contraste no es cuestión de gusto, es matemática. Existe una fórmula, tiene nombre (WCAG), y le da igual cuán sofisticado creas que quedó ese gris. O el texto pasa, o no pasa. Déjame contarte cómo llegué hasta aquí — y al final hay un verificador en vivo para que veas la cuenta sucediendo.
El gris claro precioso que nadie lee
Hay un vicio estético muy común entre quienes aman el diseño "clean": bajar la opacidad del texto. Ese #999 sobre blanco, o un opacity: 0.6 en todo el párrafo, da una sensación de ligereza, de aire, de algo caro. El problema es que esa ligereza es un privilegio — de quien mira en una buena pantalla, en un entorno controlado, con visión perfecta.
Saca ese mismo texto del laboratorio: ponlo bajo el sol, en una pantalla barata de bajo brillo, o frente a alguien de 50 años con la famosa "vista cansada" (presbicia), o daltonismo, o baja visión. De repente ese gris elegante se vuelve una niebla ilegible. Y aquí está el número que me asustó: cerca de 1 de cada 12 hombres tiene alguna deficiencia en la percepción de los colores. No es un caso raro de esquina — es una porción enorme de tus visitantes.
La gran clave: nuestros ojos no ven el "brillo" de forma justa
Aquí está la parte que me cambió la cabeza. Cuando el navegador muestra el color #2563eb (el azul de mi marca), está mezclando tres canales: rojo, verde y azul. Pero nuestro ojo no les da el mismo peso. Somos mucho más sensibles al verde, razonablemente sensibles al rojo, y bastante poco sensibles al azul.
Por eso un amarillo (lleno de verde y rojo) parece luminoso, mientras que un azul puro, aun "vibrante", nos parece oscuro. La WCAG captura esto en una fórmula llamada luminancia relativa: toma el RGB, "deshace" el ajuste de gamma que aplican las pantallas, y luego hace un promedio ponderado — ~21% del rojo, ~72% del verde, ~7% del azul. Fíjate que el verde solo domina casi tres cuartos de la percepción de brillo.
Con la luminancia de ambos colores en mano, la razón de contraste es solo una división:
(L_clara + 0,05) / (L_oscura + 0,05). El resultado va de 1:1 (mismo color, invisible) hasta 21:1 (negro puro sobre blanco puro). Ese 0,05 es un truco para simular la luz ambiente que siempre llega a la pantalla — sin él, negro sobre negro daría división por cero.
Los números que valen como ley
La WCAG convierte esa razón en metas concretas. No hace falta memorizar la fórmula, pero vale guardar los límites:
- 4,5:1 — el mínimo para que el texto normal pase el nivel AA. Es la regla que la mayoría de las leyes de accesibilidad del mundo usa como referencia.
- 3:1 — basta para texto grande (desde ~24px, o ~18,7px si es negrita). Las letras más grandes perdonan un contraste menor.
- 7:1 — el nivel AAA para texto normal, el ideal de excelencia. 4,5:1 ya libera el AAA para texto grande.
El detalle hermoso: son reglas objetivas. Se acabó la discusión de "pero quedó bonito así". O la cuenta da 4,5 o no da. Eso me liberó de muchas peleas improductivas con clientes y conmigo mismo.
Dos curiosidades que llevo conmigo
- El color solo nunca es información. Ese clásico "los campos en rojo son obligatorios" excluye a quien no distingue el rojo del verde. La regla de oro: el color puede reforzar, pero la información debe existir también en texto, ícono o forma. Rojo + una "x" + la palabra "error". Nunca solo el color.
- El contraste no ve el matiz, solo el brillo. Esto sorprende a todos: un rojo y un verde que parecen pelear ante tus ojos pueden tener casi la misma luminancia — y por tanto un contraste pésimo entre sí, aunque sean colores "opuestos". Por eso confiar en el ojo engaña; la cuenta, no.
Mi opinión honesta, después de equivocarme
Hoy trato el contraste como trato la seguridad: no es un "extra bonito" que entra al final del proyecto, es un prerrequisito que camina junto con la elección de los colores. Accesibilidad y estética no son enemigas — esa es la excusa perezosa. Se puede tener un sitio precioso, sofisticado, y legible bajo el sol. Solo da más trabajo pensarlo desde el principio que tirar un gris claro y seguir.
Y está el lado que más me importa, como alguien que construye cosas para convertir: un texto que nadie lee no vende nada. El CTA más lindo del mundo, si se pierde en el fondo, es dinero tirado. La legibilidad es, ante todo, respeto por el visitante — y el respeto convierte.
Basta de teoría — juega con la cuenta 👇
Armé un verificador de contraste en vivo, vanilla, sin ninguna biblioteca. Elige el color del texto y el del fondo (con los selectores o escribiendo el hex), y mira la razón de contraste calculada al instante, con los sellos AA y AAA encendiéndose en verde o rojo. Mueve los controles de luminancia para sentir cómo el verde pesa más que el azul, y usa el botón de "sugerir color accesible" cuando tu par no apruebe. Es la fórmula de la WCAG corriendo frente a ti.