¿Cuál es la relación de contraste óptima para una mejor legibilidad?

No hay un contraste óptimo . La legibilidad depende de una combinación de contraste, tamaño de fuente, altura de línea, fuente utilizada y preferencia de la audiencia.

Extrayendo de esta gran respuesta de Multicon sobre la elección de colores para el tipo de diseño web:

Si bien el ojo de un diseñador siempre debe ser parte de la ecuación final al tomar decisiones de diseño, hay espacio para maniobrar lejos del gris.

El contraste se puede lograr en todas las dimensiones: matiz , saturación o brillo . El contraste de brillo es visualmente el más fuerte , así que guíe sus decisiones principalmente por eso (tener texto oscuro sobre un fondo brillante o viceversa), ya que garantiza que el tipo sea legible independientemente del tono o el contraste sat. probablemente sea un contraste insuficiente para una legibilidad suficiente).

Guía

Use contraste compuesto para lograr la legibilidad deseada.

Una ligera reducción en el contraste de brillo puede compensarse con un aumento en el contraste de tono/sat. p.ej. tener un fondo de madera marrón oscuro (tono de 30 grados) requeriría un tipo brillante, pero el brillo del tipo podría reducirse un poco si establecemos su tono en azul de 210 grados, que es un complemento directo del fondo de madera marrón de 30 grados. El contraste satelital puede ser fuerte o solo se puede alejar ligeramente la saturación del gris, lo suficiente para darle un ligero toque azul. Hasta dónde lleguemos es donde entra en juego nuestra individualidad como diseñadores.

El contraste requerido también depende de las propiedades del tipo de letra , un tipo más grueso con una altura x más alta requiere menos contraste para lograr una legibilidad suficiente. El tipo monoespaciado también requiere menos. A la inversa, un tipo de letra condensado puede requerir un poco más de contraste que uno normal o ancho.

---

También existe el contraste de brillo excesivo (ya que su alcance es web ), debido a la naturaleza de las pantallas (luz emitida en lugar de luz reflejada), el tipo blanco sobre fondo negro puede verse demasiado fuerte en un monitor de alto brillo Por la tarde. Tirarlo un poco hacia atrás y reducir el contraste en realidad mejora su legibilidad. El punto es que tantas reglas como existen, deberían servir como pautas, el ojo de un diseñador al final siempre es parte de la ecuación.

De acuerdo con las WCAG2 (Pautas de accesibilidad al contenido web), se necesita una relación de contraste mínima de 4,5:1 para texto de menos de 18 px y una relación de contraste de 3:1 para texto de más de 18 px para aprobar AA. El texto en negrita a 14 px o más puede usar la relación de contraste de 3:1. Una vez más, el peso de la fuente y el seguimiento pueden mejorar/reducir la legibilidad, así que use su mejor criterio allí.

La documentación de WGAC menciona específicamente que el color/la luminancia no es confiable como una forma de manipular el contraste, debido a la variación de la percepción por parte de los usuarios con deficiencias en la visión del color.

Aquí hay un complemento de Sketch que funciona bien, excepto que no puede calcular el contraste cuando los fondos están compuestos/en capas (por ejemplo, degradados sobre imágenes): https://github.com/getflourish/Sketch-Color-Contrast-Analyser Intento probar el área con menos contraste para compensar.

Pautas de contraste de WCAG2 aquí: https://github.com/getflourish/Sketch-Color-Contrast-Analyser

Debería consultar la herramienta de relación de contraste en el selector de color en cromo:

El Selector de color ahora le muestra la relación de contraste de los elementos de texto. El aumento de la relación de contraste de los elementos de texto hace que su sitio sea más accesible para los usuarios con deficiencias visuales o deficiencias en la visión del color. Consulte Color y contraste para obtener más información sobre cómo la relación de contraste afecta la accesibilidad.

https://developers.google.com/web/updates/2018/01/devtools#contrast