{"id":81525,"date":"2023-03-14T13:59:23","date_gmt":"2023-03-14T13:59:23","guid":{"rendered":"https:\/\/www.globallogic.com\/latam\/?post_type=insightsection&p=81525"},"modified":"2025-01-30T12:26:36","modified_gmt":"2025-01-30T12:26:36","slug":"contraste-de-color-aa-y-aaa-wcag-que-criteros-se-toman-en-cuenta","status":"publish","type":"insightsection","link":"https:\/\/www.globallogic.com\/latam\/insights\/white-papers\/contraste-de-color-aa-y-aaa-wcag-que-criteros-se-toman-en-cuenta\/","title":{"rendered":"Automatizando el criterio de contraste de color AA y AAA de WCAG"},"content":{"rendered":"
Por <\/span>Pablo Javier Ruiz<\/span>, Associate Specialist QA Analyst.\u00a0<\/span><\/em><\/p>\n

Las personas con baja visi\u00f3n 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\u00f3n del color que reduce a\u00fan m\u00e1s el contraste.<\/span><\/p>\n

Proporcionar una relaci\u00f3n de contraste de luminancia m\u00ednima entre el texto y su fondo puede hacer que el texto sea m\u00e1s legible, incluso si la persona no ve la gama completa de colores (e incluso funciona para los individuos que no ven ning\u00fan color).<\/span><\/p>\n

La intenci\u00f3n 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\u00eddo por personas con una visi\u00f3n moderadamente baja (que no usan tecnolog\u00eda de asistencia para mejorar el contraste), y tambi\u00e9n 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\u00e9ficit de visi\u00f3n crom\u00e1tica tambi\u00e9n tendr\u00e1n un contraste adecuado entre el texto y el fondo. Para comprender el m\u00ednimo de contraste, acceda aqu\u00ed<\/a>.\u00a0<\/span><\/p>\n

Cualquier producto que pretenda cumplir con los criterios AA o AAA WCAG debe tener un contraste m\u00ednimo. El contraste 3:1<\/a><\/span> es el m\u00ednimo esperado para texto y visi\u00f3n est\u00e1ndar, el nivel AA espera un contraste m\u00ednimo de 4.5:1 (recomendado para personas con visi\u00f3n 20\/40) y el nivel AAA espera un contraste m\u00ednimo de 7:1 (recomendado para personas con una visi\u00f3n de 20\/80 y tambi\u00e9n proporciona una mejora del contraste para la deficiencia de color). Acceda<\/span> aqu\u00ed<\/span><\/a> a la explicaci\u00f3n de la escala de relaci\u00f3n de contraste.<\/strong><\/span><\/p>\n

 <\/p>\n

A continuaci\u00f3n, brindaremos algunas herramientas para crear funciones para probar esta relaci\u00f3n de contraste de manera automatizada, de modo que esta tediosa tarea pueda incluirse en su prueba de regresi\u00f3n de automatizaci\u00f3n.<\/span><\/p>\n

Adjuntamos un ejemplo de este contraste en la<\/span> p\u00e1gina de inicio de GitHub<\/span><\/a>. En esta p\u00e1gina podemos ver que se usa bajo contraste en los sitios de todos los d\u00edas:<\/span><\/p>\n

\"\"
\nSe puede observar que el contraste entre el texto y el fondo es de 2,09:1.<\/em><\/p>\n

F\u00f3rmula de contraste de color<\/b><\/h2>\n

La f\u00f3rmula de contraste de color en el sitio WCAG utiliza una f\u00f3rmula simple:<\/span><\/p>\n

(L1 + 0.05) \/ (L2 + 0.05)<\/strong> <\/span>, donde<\/span><\/p>\n