Color y contraste: lo que se puede medir y lo que se discute

De todas las decisiones de una interfaz, el color es la que más gente opina y la que menos se verifica. “Ese gris se ve bien” es una frase que depende de la pantalla, de la luz de la oficina y de la edad de quien mira.

La buena noticia es que una parte importante del color no es cuestión de gusto: el contraste entre el texto y su fondo es un número, y ese número decide si alguien puede leer tu pantalla o no.

El contraste es un número

El contraste se define como una relación entre la luminancia del texto y la del fondo. Va de 1 a 1 —el mismo color sobre sí mismo, invisible— hasta 21 a 1, que es negro puro sobre blanco puro.

No es el brillo que cada canal declara: el ojo responde mucho más al verde que al azul, así que la fórmula pesa los canales distinto y después los lineariza. Eso explica algo que sorprende siempre: un amarillo que en la pantalla “grita” tiene contraste pésimo contra el blanco, y un azul que se ve tranquilo puede cumplir de sobra.

Los umbrales de WCAG, que son los que toma casi toda la normativa de accesibilidad:

Probalo con los colores que estés usando:

Cuando el color es la única señal

La segunda regla es menos conocida y rompe más pantallas: el color no puede ser lo único que comunique algo. Si el estado “error” se distingue del estado “ok” sólo porque uno es rojo y el otro verde, hay gente que ve exactamente la misma pantalla en los dos casos.

No es un caso raro: alrededor del 8 % de los varones tiene alguna deficiencia en la percepción del rojo y el verde. Sumá a eso el modo de alto contraste del sistema operativo, una captura en blanco y negro, una pantalla al sol o un proyector malo.

El color también significa

Además de contrastar, el color carga significado, y ahí sí hay convención más que verdad. En la mayoría de los productos occidentales el rojo es error o destrucción, el verde es éxito, el amarillo es advertencia y el azul es acción o información. Romper eso sin motivo cuesta caro: el botón rojo de “guardar” hace dudar a cualquiera.

Un detalle que aparece siempre en productos que manejan plata: el rojo y el verde de “subió/bajó” son convención de mercado y no se pueden abandonar, pero sí se les puede sumar el signo y la flecha. En una cartera de inversiones, el número −2,4 % con flecha hacia abajo se entiende sin ver un solo color.

De un color a una escala

En una interfaz real no se eligen colores: se elige una escala por color, y después se usan por rol. Lo mínimo que hace falta:

Esos roles se declaran una vez como variables, y el resto del producto los usa por nombre. Cuando llega el tema oscuro, se redefinen los mismos nombres con otros valores y no se toca ni un componente:

:root {
  --bg: #f2efe6;
  --surface: #fbf9f4;
  --fg: #1f1d19;
  --muted: #6b6558;
  --accent: #a8492a;
  --on-accent: #fbf9f4;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #14130f;
    --surface: #1c1a16;
    --fg: #ece7dc;
    --muted: #a39c8c;
    /* El acento de claro no sirve en oscuro: mismo color, distinta luminancia relativa. */
    --accent: #e0714a;
    --on-accent: #14130f;
  }
}

Cómo se verifica sin ser diseñador

Tres verificaciones que cualquiera puede hacer sobre su propia pantalla, en este orden:

Las herramientas automáticas —el panel de accesibilidad del navegador, axe, Lighthouse— encuentran el contraste insuficiente sin que uno mida a mano, y conviene tenerlas en el pipeline. Lo que no encuentran es la regla del color como única señal: eso necesita a alguien mirando, porque requiere entender qué está comunicando la pantalla.

Lo que preguntan sobre esto

Cierre

El color tiene una parte objetiva y una parte convencional, y conviene no mezclarlas. La objetiva se mide y no se discute: si el contraste no llega, el color cambia. La convencional —qué significa cada color, cuántos acentos, qué tan saturado— se decide una vez, se declara como escala y se respeta.

Cuando alguien dice “ese gris no se ve”, casi siempre tiene razón y casi nunca tiene el número. Tener el número convierte una discusión de gustos en una decisión de dos minutos.