
-
-
-
-
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 IndustrialMediaTechnology
What is TM Forum Frameworx and how to...
UncategorizedAutomotiveCommunicationsConsumer and RetailFinancial ServicesHealthcareManufacturing and IndustrialMediaTechnology
Impact Mapping en Metodologías ágiles
AutomotiveCommunicationsConsumer and RetailFinancial ServicesHealthcareManufacturing and IndustrialMediaTechnology
Trabajemos juntos
Contenido Relacionado
5 consejos para una planificación eficaz del sprint
La sprint planning es una de las ceremonias de Scrum en donde se define el objetivo de las siguientes semanas de trabajo. Debido a su importancia y complejidad, suele demorarse más que las otras ceremonias y puede ser difícil para el equipo sobrellevarla.
Conocer más
Pishing: 7 formas de prevenir los ataques
El phishing es la forma más frecuente de ciberdelincuencia, una realidad inquietante subrayada por asombrosas estadísticas. Se calcula que cada día 3.400 millones de correos electrónicos maliciosos inundan las bandejas de entrada de todo el mundo.
Conocer más
¿Es ChatGPT el fin de los desarrolladores?
ChatGPT, junto con otras herramientas de IA, ha cambiado la forma en que los desarrolladores interactúan con el código y agiliza el proceso de desarrollo de software. Estas herramientas están diseñadas para comprender y generar código, proporcionando asistencia valiosa a los programadores.
Conocer más
¿Cómo utilizar éticamente la IA? Los nuevos desafíos corporativos
El futuro se escribe con inteligencia artificial, pero la tecnología en constante desarrollo genera tanto beneficios como preocupaciones. Es por esto que las compañías deben buscar soluciones que controlen su utilización para brindar servicios más óptimos y éticos.
Conocer más
¿Puede la tecnología ponerle fin a las estafas y la inseguridad financiera?
La digitalización financiera es un proceso que está transformando la forma de interacción con el sistema financiero. Sin embargo, existe una percepción errónea de que la digitalización financiera aumenta los riesgos de seguridad.
Conocer más
Nuevas oportunidades en la encrucijada de las API financieras y los nuevos estándares globales
En los últimos años, el sector financiero ha experimentado cambios significativos impulsados por la proliferación de APIs y la aplicación de nuevas normas mundiales. Estos avances han abierto nuevas oportunidades tanto para las empresas como para los particulares, ya que proporcionan un mejor acceso a los productos y servicios financieros, así como una mayor seguridad y transparencia. ¿Cuáles son estas oportunidades?
Conocer más
Ciberseguridad: ¿Cómo pueden estar preparadas las empresas para los ataques?
Por Juan Carlos Terragno, Partner en Hexacta, a GlobalLogic Company. A medida que las empresas de todo el mundo dependen cada vez más de las redes informáticas para almacenar datos valiosos y ejecutar tareas rutinarias, la adopción de fuertes medidas de ciberseguridad se ha convertido en la necesidad del momento. En el presente artículo mostraremos … Continue reading Automatizando el criterio de contraste de color AA y AAA de WCAG →
Conocer más
Share this page:
-
-
-
-
URL copied!