Un solo valor de color: arreglar el contraste sin rediseñar

El número que pide la norma

El contraste se mide como una proporción entre la luminosidad del texto y la de lo que hay detrás. Negro sobre blanco es 21 a 1. La norma de accesibilidad pide al menos 4,5 a 1 para texto normal y 3 a 1 para texto grande, es decir, de unos 24 píxeles en adelante, o 19 píxeles en negrita.

La proporción no es cuestión de gusto. Viene de la investigación sobre cuánta diferencia necesita una persona con visión moderadamente reducida para leer con comodidad, y es el umbral al que se refieren todos los verificadores automáticos, todos los revisores de compras públicas y todas las cartas de queja.

Los grises que pasan y los que fallan

Sobre un fondo blanco la línea cae en una franja estrecha. Unos cuantos valores, con sus proporciones:

#999999   2.85 to 1   fails
#949494   2.99 to 1   fails
#8a8a8a   3.45 to 1   passes only as large text
#767676   4.54 to 1   passes
#666666   5.74 to 1   passes
#595959   7.00 to 1   passes the stricter AAA level

Fíjese en lo cerca que están los valores que fallan de los que pasan. Un tema que eligió #999 para los pies de foto estaba a un tono del cumplimiento. Nadie notará la diferencia en una comparación lado a lado, y una persona que lee en un teléfono al aire libre verá el texto por primera vez.

Por qué es un solo valor

Los temas y los constructores de páginas definen una paleta, y el gris claro aparece en ella una vez. Cada pie de foto, indicación de formulario, línea de pie de página, fecha y etiqueta secundaria apunta a esa única entrada. Cámbiela y cambia todo el sitio. En un tema de bloques la paleta vive en el editor del sitio, bajo estilos; en temas más antiguos está en el personalizador o en una hoja de estilo que mantiene un desarrollador.

Por eso también el arreglo no es un rediseño. Nada se mueve. Ninguna fuente cambia. El sitio se ve igual para todos, excepto para las personas que antes no podían leer parte de él.

Los colores de marca son el otro caso

El azul o el verde de una organización se eligió normalmente para un logotipo, no para texto. Los colores de marca claros y brillantes suelen pasar como fondo detrás de texto blanco y fallar como texto sobre blanco. Nuestro propio azul, #1849B8, da 7,8 a 1 sobre blanco en ambas direcciones, que es tanto suerte como elección. Compruebe el suyo en ambas direcciones antes de usarlo para enlaces.

Cuando un color de marca falla como texto, resérvelo para fondos, botones y títulos grandes, y elija un pariente más oscuro para enlaces y texto de tamaño normal. Dos tonos del mismo matiz se leen como una sola marca.

Conserve la jerarquía, pierda la claridad

La razón por la que los diseñadores recurren al gris claro es para que el texto secundario retroceda. El tamaño y el peso hacen el mismo trabajo sin el coste. Un pie de foto a 14 píxeles en un gris que pasa retrocede de sobra junto a un texto de 17 píxeles. Arreglar el contraste volviéndolo todo negro aplana la página; arreglarlo ajustando un valor y confiando en el tamaño conserva el diseño.

El texto de marcador dentro de los campos de formulario merece mención aparte. Los navegadores lo muestran claro por defecto, y falla casi en todas partes. Una etiqueta visible encima del campo, que trata la serie sobre formularios, hace que el marcador sea opcional desde el principio.

Qué comprueba la auditoría gratuita

La auditoría gratuita ejecuta la regla automática de contraste en toda la portada e informa cada elemento que falla con su proporción medida y los colores implicados. Una portada con treinta fallos suele tener una sola causa. Encuentre el valor compartido, cámbielo y vuelva a ejecutar la comprobación.