Cómo determinar la relación de contraste exacta

Debido a la reciente Ley de accesibilidad web en mi región, debo asegurarme de que estoy diseñando con una relación de contraste adecuada.

WCAG dice que el valor de esta relación es 4.5:1

http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

¿Cómo puedo resolver esto en Photoshop e Illustrator?

No relacionado con la pregunta, pero ¿podría explicar/vincular a un artículo que explique esta ley? Nunca antes había oído hablar de una ley que dictara el diseño web, así que tengo bastante curiosidad.
Acaba de entrar en vigor en Ontario, Canadá. Aquí está la información: ellsworthmedia.com/aoda-compliance-impact-website
Enlace a la normativa actual. Se aplica a cualquier organización con más de 50 empleados en Ontario y requiere que cumplan con WCAG 2.0 Nivel A en todos los sitios web nuevos a partir de este año y que conviertan los sitios web antiguos para 2021.
También: Una referencia en el sitio WCAG , que tiene enlaces a la fórmula de luminancia y calculadoras. Por lo que puedo decir, tanto el W3 como Adobe usan el espacio de color sRGB para calcular los valores de luminancia, por lo que debería poder usar los valores L de su inspector de color para determinar si la proporción es de al menos 4.5:1.

Respuestas (2)

Desde esa página, hay un enlace a una calculadora de contraste .

Y mirando la fuente, podemos generalizar:

RsRGB = Red Component  / 255
GsRGB = Green Component / 255
BsRGB = Blue Component  / 255

Calculate luminance
R = is (RsRGB <= 0.03928) then RsRGB/12.92 otherwise ((RsRGB + 0.055)/1.055)^2.4
G = is (GsRGB <= 0.03928) then GsRGB/12.92 otherwise ((GsRGB + 0.055)/1.055)^2.4
B = is (BsRGB <= 0.03928) then BsRGB/12.92 otherwise ((BsRGB + 0.055)/1.055)^2.4

Luminance is (0.2126 * R + 0.7152 * G + 0.0722 * B)

getContrastRatio {
L1 = Luminance of color1;
L2 = Luminance of color2;
round((max(L1, L2) + 0.05)/(min(L1, L2) + 0.05)*10)/10;
}

El código está incrustado en esa página, puede marcarlo como favorito o puede guardarlo localmente en caso de que la página se caiga.

Personalmente, pruebo las interfaces de usuario usando una aplicación de verificación de contraste, acertadamente llamada "Contraste":

aplicación de contraste en acción

Puede verificar no solo sus archivos sino cualquier cosa en la pantalla, incluidos otros sitios web, ¡cualquier cosa en la pantalla!

No es muy práctico medir relaciones de contraste puras porque es una carga cognitiva, los números deben compararse mentalmente 5.2 > 4.5 ?, por lo que las aplicaciones inventaron una abstracción: puntajes basados ​​​​en letras, por ejemplo, la aplicación Contrast Mac daría " AA " por 4.5:1lo menos.

https://usecontrast.com/guide

Es una aplicación paga para Mac, pero también funciona como un selector de color de pantalla:

aplicación de contraste de Mac

Cómo determinar la relación de contraste exacta
RespuestasAquíPolítica de privacidad1y, 0v