-
-
-
-
URL copied!
Por Pablo Javier Ruiz, Associate Specialist QA Analyst.
Las personas con baja visión a menudo presentan dificultad para leer textos que no contrastan con su fondo y esto puede empeorar si la persona tiene una deficiencia en la visión del color que reduce aún más el contraste.
Proporcionar una relación de contraste de luminancia mínima entre el texto y su fondo puede hacer que el texto sea más legible, incluso si la persona no ve la gama completa de colores (e incluso funciona para los individuos que no ven ningún color).
La intención del Criterio de Conformidad de Contraste de Color de las WCAG es proporcionar suficiente contraste entre el texto y su fondo, de forma de que pueda ser leído por personas con una visión moderadamente baja (que no usan tecnología de asistencia para mejorar el contraste), y también las deficiencias de color pueden afectar un poco el contraste de luminancia. Por lo tanto, en este criterio, el contraste se calcula de tal forma que el color no es un factor clave, por lo que las personas que tienen déficit de visión cromática también tendrán un contraste adecuado entre el texto y el fondo. Para comprender el mínimo de contraste, acceda aquí.
Cualquier producto que pretenda cumplir con los criterios AA o AAA WCAG debe tener un contraste mínimo. El contraste 3:1 es el mínimo esperado para texto y visión estándar, el nivel AA espera un contraste mínimo de 4.5:1 (recomendado para personas con visión 20/40) y el nivel AAA espera un contraste mínimo de 7:1 (recomendado para personas con una visión de 20/80 y también proporciona una mejora del contraste para la deficiencia de color). Acceda aquí a la explicación de la escala de relación de contraste.
A continuación, brindaremos algunas herramientas para crear funciones para probar esta relación de contraste de manera automatizada, de modo que esta tediosa tarea pueda incluirse en su prueba de regresión de automatización.
Adjuntamos un ejemplo de este contraste en la página de inicio de GitHub. En esta página podemos ver que se usa bajo contraste en los sitios de todos los días:
Se puede observar que el contraste entre el texto y el fondo es de 2,09:1.
Fórmula de contraste de color
La fórmula de contraste de color en el sitio WCAG utiliza una fórmula simple:
(L1 + 0.05) / (L2 + 0.05) , donde
- L1 es la luminancia relativa del más claro de los colores, y
- L2 es la luminancia relativa del más oscuro de los colores.
Si ponemos esto en una función JavaScript:
función relación de contraste ( color1 , color2 ) { // convertir los valores RGB a luminancia constante lum1 = luminancia ( color1 ); constante lum2 = luminancia ( color2 ); // calcular el contraste dejar contraste = ( Math . max ( lum1 , lum2 ) + 0.05 ) / ( Math . min ( lum1 , lum2 ) + 0.05 ); // Devuelve el contraste redondeado a 2 decimales devolver matemáticas _ redondo ( contraste * 100 )/ 100 ; }
Donde la luminancia [4] se calcula con esta función:
función luminancia ( color ) { // Convertir el color RGB a luminancia dejar r = color . r / 255 ; dejar g = color . g / 255 ; dejar b = color . b / 255 ;
// Aplicar la fórmula de luminancia r = r <= 0.03928 ? r / 12.92 : Matemáticas . pow (( r + 0,055 ) / 1,055 , 2,4 ); gramo = gramo <= 0.03928 ? g / 12.92 : Matemáticas . pow (( g + 0,055 )/ 1,055 , 2,4 ); b = b <= 0.03928 ? b / 12.92 : Matemáticas . pow (( b + 0,055 )/ 1,055 , 2,4 ); devolver 0,2126 * r + 0,7152 * g + 0,0722 * b ; Acceda aquí a la fórmula de luminancia relativa.
Un ejemplo de cómo utilizar esta función:
constante color1 = { r: 255 , g: 99 , segundo: 71 }; constante color2 = { r: 245 , g: 245 , segundo: 245 }; consola _ log ( relación de contraste ( color1 , color2 )); // imprime 1.35, lo que significa 1.35: 1 de contraste
Comprender el impacto del daltonismo
El daltonismo es una deficiencia de la visión del color, en la que la persona presenta dificultad para ver cierto color o distinguir entre ciertos colores. Además, algunas formas de daltonismo pueden afectar la percepción de la luminancia.
Hay varios tipos de deficiencia de la visión del color, pero los más comunes son:
- La protanopia es un tipo de daltonismo rojo-verde causado por una mutación genética que afecta la forma en que los conos rojos del ojo procesan la información del color. Las personas con protanopia tienen dificultad para distinguir entre tonos rojos y verdes.
- La deuteranopía también es un tipo de daltonismo rojo-verde causado por una mutación genética, pero afecta la forma en que las células del cono verde del ojo procesan la información del color. Las personas con deuteranopía también tienen dificultad para distinguir entre tonos rojos y verdes.
- La tritanopia es un tipo raro de daltonismo azul-amarillo causado por una mutación genética que afecta la forma en que las células del cono azul del ojo procesan la información del color. Las personas con tritanopia tienen dificultad para distinguir entre tonos azules y amarillos.
- La acromatopsia (también conocida como daltonismo total) es un tipo extremadamente extraño de daltonismo causado por un mal funcionamiento en los tres tipos de células cónicas del ojo. Las personas con acromatopsia tienen dificultad para ver cualquier color y solo ven tonos de gris.
Esas variaciones afectan la luminancia de los colores en algunos casos. Por ejemplo, verifiquemos el contraste entre el fondo y los colores de fuente, en esta página inalterada en la página de destino de GitHub:
Aquí uso la consola del navegador para verificar los colores y uso el sitio WebAIM para verificar el contraste (marcado con el cuadro blanco). Podemos ver que el contraste entre el fondo y el color del texto es de 3,08:1 (justo por encima del estándar mínimo de 3:1)
En este mismo ejemplo, como simulamos Deuteranopía [6](usando una aproximación, ya que hay varios grados) Usando el complemento de Chrome Colorblindly, podemos ver esto:
Podemos percibir que la alteración de la percepción del color tiene una pequeña degradación en la luminancia de los colores, dando una relación de contraste de 2,44:1, quedando el contraste justo por debajo del nivel mínimo aceptado.
Puede simular el daltonismo para probar eso, aquí hay un ejemplo de cómo simular Deuteranopía, convirtiendo el color RGB al espacio de color LMS (el LSM es una representación más precisa de cómo los ojos ven los colores):
función simularDeuteranopía ( color ) { // Convertir el color RGB al espacio de color LMS dejar L = 0,3811 * color . r + 0,5783 * color . g + 0.0402 * color . segundo ; dejar M = 0,1967 * color . r + 0,7244 * color . g + 0.0782 * color . segundo ; dejar S = 0,0241 * color . r + 0.1288 * color . g + 0.8444 * color . segundo ;
// Aplicando la matriz de corrección de deuteranopía dejar nuevoL = L ; dejar nuevoM = 0,9848 * M ; dejar nuevoS = S ;
// Convertir color LMS a RGB color _ r = nuevoL * 3,0632 - nuevoM * 1,3932 - nuevoS * 0,5688 ; color _ g = - nuevaL * 0,9692 + nuevaM * 1,8760 + nuevaS * 0,0416 ; color _ b = nuevoL * 0.0689 - nuevoM * 0.2298 + nuevoS * 1.0693 ;
// Fijar los valores al rango RGB válido color _ r = Matemáticas . min ( Matemáticas . max ( color . r , 0 ), 255 ); color _ g = Matemáticas . min ( Matemáticas . max ( color . g , 0 ), 255 ); color _ b = Matemáticas . min ( Matemáticas . max ( color . b , 0 ), 255 ); devolver color ; }
Y podemos sobrecargar la función contrastRatio ( ) anterior para verificar diferentes tipos de degradación del color:
función relación de contraste ( color1 , color2 , tipo ) { dejar color1_simulado , color2_simulado ; cambiar ( tipo ){ caso 'deuteranopía' : color1_simulado = simularProtanopia ( color1 ); color2_simulado = simularProtanopia ( color2 ); romper ; // caso 'protanopia': // caso 'tritanopia': // ... } // convertir los valores RGB a luminancia constante lum1 = luminancia ( color1_simulado ); // ... }
Pero, en lugar de sobrecargar la función para comprobar diferentes tipos de degradación del color, podemos utilizar el criterio de contraste 7:1 AAA WCAG (en lugar del 4,5:1 de la lista AA). Al hacer esto, podemos asegurarnos de que todo el texto de una aplicación se pueda leer correctamente, incluso con desviaciones de color y otras deficiencias visuales.
Un ejemplo en Cypress
Aquí hay un ejemplo simple de cómo verificar el contraste de color entre el color de fondo y el color del texto en una página, usando la función contrastRatio ( ) mencionada anteriormente.
describe ( "Contraste de color de fondo vs. texto en la prueba del cuerpo" , () => { // usando el const min_contrast en lugar de una definición global. para este ejemplo constante min_contraste = 4.5 ; eso _ only ( 'Verificar el contraste entre el fondo y el color del texto en el cuerpo' , () => { cy _ visita ( 'https://sometesturl:9090' ); cy _ obtener ( 'ul li' ). cada (( color , fuente-color ) => { // comprueba si hay un contraste mayor que igual al mínimo expect ( contrasteRatio ( color , font-color ). should ( ' be.gte ' , min_contrast )); }); }); });
Conclusiones
En este artículo aprendimos qué es el contraste de color y su importancia. Se proporcionaron algunas herramientas manuales (complemento Colorblindly y sitio WebAIM para verificación manual), pero la posibilidad de automatizar estas pruebas y hacerlo para verificar correctamente incluso cuando la página cambia, es una ventaja que no debe pasarse por alto, ya que los estándares WCAG son solicitado por más sitios cada día.
Top Insights
Escribiendo User Stories en Agile
AutomotiveCommunicationsConsumer and RetailFinancial ServicesHealthcareManufacturing and IndustrialMediaTechnologyWhat is TM Forum Frameworx and how to...
UncategorizedAutomotiveCommunicationsConsumer and RetailFinancial ServicesHealthcareManufacturing and IndustrialMediaTechnologyImpact Mapping en Metodologías ágiles
AutomotiveCommunicationsConsumer and RetailFinancial ServicesHealthcareManufacturing and IndustrialMediaTechnologyTop Authors
Blog Categories
Trabajemos juntos
Contenido Relacionado
5 razones por las que tu proyecto necesita un Business Analyst
Contar con un Business Analyst (BA) en tu equipo no solo te ayudará a delegar tareas más operativas, sino que también potenciará al equipo de desarrollo y contribuirá significativamente al éxito de tu proyecto de desarrollo de software.
Conocer más
7 claves para ser un miembro de un equipo efectivo
Un gran desarrollador necesita trabajar tanto en sus habilidades técnicas como en sus habilidades blandas, ya que estas forman la base para cualquier profesional que quiera ser una pieza efectiva e inspirar un cambio positivo en su equipo y organización. He recopilado una serie de recomendaciones que considero básicas y de vital importancia para trabajar … Continue reading Automatizando el criterio de contraste de color AA y AAA de WCAG →
Conocer más
Share this page:
-
-
-
-
URL copied!