{"id":1251,"date":"2025-02-14T00:00:00","date_gmt":"2025-02-13T23:00:00","guid":{"rendered":"https:\/\/programaraciegas.net\/?p=1251"},"modified":"2025-02-09T10:42:09","modified_gmt":"2025-02-09T09:42:09","slug":"como-utilizar-contrast-checker-para-validar-la-accesibilidad-en-las-combinaciones-de-colores","status":"publish","type":"post","link":"https:\/\/programaraciegas.net\/?p=1251","title":{"rendered":"C\u00f3mo Utilizar Contrast Checker para Validar la accesibilidad en las combinaciones de colores"},"content":{"rendered":"<p>Una de las barreras de accesibilidad m\u00e1s habituales en contenidos de la Web es el bajo contraste de color entre el texto y el fondo. <br \/>Para solucionar estas barreras de accesibilidad existen herramientas como el <a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\">Contrast Checker<\/a> de WebAIM que permite comprobar si las combinaciones de colores cumplen con los est\u00e1ndares de accesibilidad establecidos por las Web Content Accessibility Guidelines (WCAG).<\/p>\n<h2>\u00bfQu\u00e9 es Contrast checker?<\/h2>\n<p>Contrast Checker es una herramienta en l\u00ednea gratuita proporcionada por WebAIM (Web Accessibility in Mind) que permite verificar si una combinaci\u00f3n de colores cumple con los niveles de contraste requeridos por las WCAG buscando que los textos sean legibles para personas con baja visi\u00f3n y daltonismo.<\/p>\n<p>Este verificador eval\u00faa la diferencia entre el color de primer plano (texto) y el color de fondo para determinar si cumple con los niveles de conformidad de AA y AAA definidos en las WCAG.<\/p>\n<h2>\u00bfC\u00f3mo se utiliza Contrast checker?<\/h2>\n<p>La herramienta muestra un formulario con dos campos principales que representan el color del texto y el color de fondo. Estos colores son identificados como <strong>Foreground Color<\/strong> para el color en primer plano y <strong>background color<\/strong> para el color de fondo.<\/p>\n<p>Se puede introducir el c\u00f3digo hexadecimal de un color o utilizar la herramienta de <strong>selector de color<\/strong> para buscar el color en la paleta de colores del sistema.<\/p>\n<p>Una vez ingresados los colores, la herramienta calcular\u00e1 autom\u00e1ticamente el ratio de contraste y mostrar\u00e1 los resultados en diferentes categor\u00edas.<\/p>\n<ul>\n<li>Small Text (Texto peque\u00f1o): indica si la combinaci\u00f3n de colores pasa los est\u00e1ndares para texto de tama\u00f1o normal.<\/li>\n<li>Large Text (Texto grande): eval\u00faa si la combinaci\u00f3n cumple para textos de al menos 18px en regular o 14px en negrita.<\/li>\n<li>Graphics and UI Components: verifica si los colores cumplen para elementos como botones o iconos.<\/li>\n<\/ul>\n<p>El ratio de contraste se expresa como un n\u00famero (ejemplo: 4.5:1). Para que la combinaci\u00f3n de colores sea accesible, debe cumplir al menos con estos valores:<\/p>\n<ul>\n<li>AA (M\u00ednimo)\t\u2265 4.5:1\t\u2265 3:1<\/li>\n<li>AAA (\u00d3ptimo) \u2265 7:1 \u2265 4.5:1<\/li>\n<\/ul>\n<p>Si la combinaci\u00f3n de colores no pasa la prueba, se mostrar\u00e1 en rojo junto con un mensaje indicando que el contraste es insuficiente.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Una de las barreras de accesibilidad m\u00e1s habituales en contenidos de la Web es el bajo contraste de color entre el texto y el fondo. Para solucionar estas barreras de accesibilidad existen herramientas como el Contrast Checker de WebAIM que permite comprobar si las combinaciones de colores cumplen con los est\u00e1ndares de accesibilidad establecidos por &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/programaraciegas.net\/?p=1251\" class=\"more-link\">Continuar leyendo<span class=\"screen-reader-text\"> \u00abC\u00f3mo Utilizar Contrast Checker para Validar la accesibilidad en las combinaciones de colores\u00bb<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,5,37,92],"tags":[11,506,12,94],"class_list":["post-1251","post","type-post","status-publish","format-standard","hentry","category-accesibilidad","category-diseno","category-herramientas-software","category-servicios-de-internet","tag-accesibilidad-2","tag-color","tag-herramientas","tag-web"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/posts\/1251","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1251"}],"version-history":[{"count":0,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/posts\/1251\/revisions"}],"wp:attachment":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1251"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1251"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1251"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}