{"id":870,"date":"2026-03-05T11:41:13","date_gmt":"2026-03-05T11:41:13","guid":{"rendered":"https:\/\/webaccessible.cat\/guia-wcag\/contraste-de-color-insuficiente-como-detectarlo-y-corregirlo\/"},"modified":"2026-05-29T16:59:55","modified_gmt":"2026-05-29T16:59:55","slug":"contraste-de-color-insuficiente-como-detectarlo-y-corregirlo","status":"publish","type":"guia_wcag","link":"https:\/\/webaccessible.cat\/es\/guia-wcag\/contraste-de-color-insuficiente-como-detectarlo-y-corregirlo\/","title":{"rendered":"Contraste de color insuficiente: c\u00f3mo detectarlo y corregirlo"},"content":{"rendered":"<p>El error de contraste de color es el que aparece con m\u00e1s frecuencia a las auditor\u00edas de accesibilidad web. Es f\u00e1cil de entender, f\u00e1cil de medir y, en la mayor\u00eda de casos, f\u00e1cil de corregir. Y a pesar de todo, es presente en una proporci\u00f3n alt\u00edsima de webs.  <\/p>\n<h2>Qu\u00e9 es el contraste de color<\/h2>\n<p>El contraste de color es la diferencia de luminositat entre el color del texto y el color del fondo sobre el cual aparece. Cuando esta diferencia es insuficiente, el texto es dif\u00edcil o imposible de leer para personas con baja visi\u00f3n, daltonismo o simplemente en condiciones de luz adversas, una pantalla al exterior con sol, por ejemplo.<br \/>\nLas WCAG 2.2 miden el contraste con una ratio num\u00e9rica. Una ratio de 1:1 significa que texto y fondo son id\u00e9nticos, y es ilegible. Una ratio de 21:1 es el m\u00e1ximo posible, texto negro sobre fondo blanco.   <\/p>\n<h2>Qu\u00e9 exige el nivel AA<\/h2>\n<p>El nivel AA, el m\u00ednimo exigido por ley, establece:<\/p>\n<ul>\n<li>Texto normal (hasta 18px regular o 14px en negrita): contraste m\u00ednimo de 4,5:1<\/li>\n<li>Texto grande (18px o m\u00e1s al regular, o 14px o m\u00e1s en negrita): contraste m\u00ednimo de 3:1<\/li>\n<li>Elementos de interfaz y gr\u00e1ficos informativos (botones, iconos, campos de formulario): contraste m\u00ednimo de 3:1<\/li>\n<\/ul>\n<p>El nivel AAA, m\u00e1s exigente pero no obligatorio, eleva el m\u00ednimo a 7:1 para texto normal y 4,5:1 para texto grande.<\/p>\n<h2>Los errores m\u00e1s habituales<\/h2>\n<p>Estos son los casos que aparecen con m\u00e1s frecuencia a las auditor\u00edas:<\/p>\n<ul>\n<li>Texto gris claro sobre fondo blanco \u2014 el cl\u00e1sico del dise\u00f1o minimalista. Un gris como #999999 sobre blanco tiene una ratio de 2,85:1, muy por debajo del m\u00ednimo.<\/li>\n<li>Texto blanco sobre fondo de color claro \u2014 botones naranja, amarillo o verde claro con texto blanco suelen fallar.<\/li>\n<li>Texto sobre imagen de fondo \u2014 si no hay una capa de color s\u00f3lido en medio, el contraste no se puede garantizar.<\/li>\n<li>Placeholders de formulario \u2014 el texto gris claro de los placeholders casi nunca cumple el m\u00ednimo. Pero cuenta: los placeholders no sustituyen las etiquetas, y este es un error diferente. <\/li>\n<li>Texto en sido hover o foco \u2014 el contraste tiene que cumplirse en todos los estados del elemento, no solo en el estado por defecto.<\/li>\n<\/ul>\n<h2>Como medir el contraste<\/h2>\n<p>Hay varias herramientas para medir el contraste antes de publicar:<\/p>\n<ul>\n<li><strong>WebAIM Contraste Checker<\/strong> (webaim.org\/resources\/contrastchecker) \u2014 introduces los dos colores y te da la ratio y si supera los niveles A, AA y AAA.<\/li>\n<li><strong>WAVE<\/strong> (wave.webaim.org) \u2014 analiza tu web y marca los elementos con contraste insuficiente directamente sobre la p\u00e1gina.<\/li>\n<li><strong>Colour Contraste Analyser<\/strong> \u2014 aplicaci\u00f3n de escritorio que permite medir el contraste de cualquier elemento a la pantalla con un cuentagotas.<\/li>\n<li><strong>Nuestra herramienta de autoevaluaci\u00f3n <\/strong>\u2014 analiza tu web autom\u00e1ticamente y detecta los errores de contraste entre todos los otros criterios WCAG.<\/li>\n<\/ul>\n<h2>C\u00f3mo corregirlo<\/h2>\n<p>En la mayor\u00eda de casos no hace falta un redise\u00f1o. Las correcciones habituales son: <\/p>\n<ul>\n<li><strong>Oscurecer el texto<\/strong> \u2014 si tienes texto gris, hazlo unos tonos m\u00e1s oscuro hasta que supere el 4,5:1. A menudo un cambio de #999 a #767676 ya es suficiente para superar el m\u00ednimo (esta es la ratio exacta de 4,54:1).<\/li>\n<li><strong>Aclarar u oscurecer el fondo <\/strong>\u2014 si no puedes tocar el color del texto, ajusta el fondo.<\/li>\n<li><strong>Aumentar la medida del texto <\/strong>\u2014 si el texto supera los 18px, el m\u00ednimo baja a 3:1, cosa que d\u00f3na m\u00e1s margen.<\/li>\n<li><strong>A\u00f1adir una capa semitransparente<\/strong> \u2014 en textos sobre im\u00e1genes, una capa negra o blanca con opacidad entre el 40% y el 60% suele ser suficiente para garantizar el contraste.<\/li>\n<\/ul>\n<p>Una cosa que hay que tener en cuenta: corregir el contraste no tendr\u00eda que romper el dise\u00f1o. En la mayor\u00eda de casos, oscurecer ligeramente un gris o ajustar un color de bot\u00f3n es un cambio imperceptible visualmente para la mayor\u00eda de usuarios, pero hace una diferencia enorme para quien tiene baja visi\u00f3n. <\/p>\n<h2>Contraste y elementos de interfaz<\/h2>\n<p>Un error menos conocido: el criterio de contraste se aplica tambi\u00e9n a los elementos de interfaz, no solo en el texto. Los contornos de los campos de formulario, los iconos informativos y los componentes visuales que transmiten informaci\u00f3n tienen que tener un contraste m\u00ednimo de 3:1 respecto al fondo adyacente.<br \/>\nUn campo de formulario con contorno gris claro sobre fondo blanco es un error WCAG, aunque el texto dentro del campo sea perfectamente legible. <\/p>\n<h2>Cuando las herramientas autom\u00e1ticas no pueden confirmar el error<\/h2>\n<p>Las herramientas autom\u00e1ticas como axe-core a veces marcan elementos de contraste como \u00abincompletos\u00bb en lugar de errores confirmados. Esto pasa cuando el texto aparece sobre un gradiente, una imagen de fondo o un color calculado din\u00e1micamente, y la herramienta no puede determinar el color exacto del fondo y prefiere no confirmar el error en lugar de equivocarse.<br \/>\nEn estos casos hace falta revisi\u00f3n manual: medir el contraste real con una herramienta de cuentagotas sobre el resultado visual final. <\/p>\n<div class=\"et_pb_section_0 et_pb_section et_pb_section--fixed et_section_regular et_flex_section et-interaction-target-03o12ngdyu\" data-interaction-target=\"03o12ngdyu\"><div class=\"et_pb_row_0 et_pb_row et_flex_row\"><div class=\"et_pb_column_0 et_pb_column et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_24_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\"><div class=\"et_pb_text_0 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module preset--module--divi-text--default\"><div class=\"et_pb_text_inner\"><p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.<\/p>\n<\/div><\/div><\/div><div class=\"et_pb_column_1 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_24_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\"><div class=\"et_pb_icon_0 et_pb_icon et_pb_module et_flex_module\" data-interaction-trigger=\"4bs8z0k0z5\"><span class=\"et_pb_icon_wrap\"><span class=\"et-pb-icon\">M<\/span><\/span><\/div><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>El error de contraste es lo m\u00e1s frecuente a las auditor\u00edas de accesibilidad. Te explicamos qu\u00e9 exige la normativa, como medirlo y como corregirlo sin cambiar el dise\u00f1o de tu web. <\/p>\n","protected":false},"featured_media":0,"template":"","class_list":["post-870","guia_wcag","type-guia_wcag","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/webaccessible.cat\/es\/wp-json\/wp\/v2\/guia_wcag\/870","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webaccessible.cat\/es\/wp-json\/wp\/v2\/guia_wcag"}],"about":[{"href":"https:\/\/webaccessible.cat\/es\/wp-json\/wp\/v2\/types\/guia_wcag"}],"wp:attachment":[{"href":"https:\/\/webaccessible.cat\/es\/wp-json\/wp\/v2\/media?parent=870"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}