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 viene de la investigación sobre cuánta diferencia necesita una persona con visión moderadamente reducida para leer con comodidad. Es la cifra que usan 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:
Ver el código Ocultar el código Texto, 6 líneas
#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 levelFí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á el cambio en una comparación lado a lado. Una persona que lee en un teléfono al aire libre podrá leer esos pies de foto 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 está en el editor del sitio, en Estilos. En temas más antiguos, está en el personalizador o en una hoja de estilo que mantiene un desarrollador.
Por eso tampoco es un rediseño. Nada se mueve y 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
Los diseñadores usan el gris claro para que el texto secundario pase a segundo plano. El tamaño y el peso hacen lo mismo sin dificultar la lectura. Un pie de foto de 14 píxeles en un gris que pasa sigue quedando en segundo plano junto a un texto de 17 píxeles.
Volverlo todo negro para arreglar el contraste aplana la página. Ajustar un valor y dejar que el tamaño marque la jerarquía conserva el diseño.
El texto de marcador dentro de los campos de formulario también falla. Los navegadores lo muestran claro por defecto, y falla casi en todas partes. Si cada campo tiene una etiqueta visible encima (la serie sobre formularios lo explica), el marcador deja de ser necesario.
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.
Leland Fiegel