En resumen
Qué se mide
el ratio de contraste entre el color del texto y el de su fondo, elemento a elemento.
Valores buenos
4,5:1 o más en texto normal; 3:1 o más en texto grande (18 puntos, o 14 puntos en negrita).
Por qué importa
el 4,5:1 está calculado para que pueda leer una persona con agudeza visual de 20/40, según la WCAG.
Severidad en Wakaris
Crítico. Falla en el 76,6 % de las páginas analizadas.
Qué es y qué mide este hallazgo
Este hallazgo salta cuando algún texto de tu página no tiene suficiente contraste con el fondo sobre el que se muestra. Contraste, aquí, no es una impresión sino un número que se calcula comparando la luminosidad relativa del texto y del fondo con una fórmula fija definida por la WCAG. El resultado es un ratio que va de 1:1, cuando ambos colores son idénticos, a 21:1, que es negro puro sobre blanco puro.
La WCAG fija dos listones en su criterio 1.4.3, de nivel AA. El texto normal necesita al menos 4,5:1. El texto grande, definido como 18 puntos o 14 puntos en negrita, necesita al menos 3:1, porque las letras grandes se leen mejor con menos diferencia de color. Un gris claro sobre blanco, tan habitual en textos secundarios, a menudo no llega a 4,5:1 y suspende como texto normal.
La norma no exige contraste al texto de un logotipo, al puramente decorativo ni al de un control desactivado; todo lo demás cuenta, incluidos los textos pequeños del pie de página y los enlaces.
Cómo se mide
Wakaris carga la URL que le indiques, toma el color final de cada texto y el color que hay detrás, calcula el ratio y compara el resultado con el listón que corresponde a ese tamaño de letra. Te devuelve la lista de elementos que no llegan, con su fragmento de código, y el hallazgo salta desde el primer elemento que falla, con cortes adicionales en 10 y 30 elementos que dan idea de la magnitud.
La medición usa la fórmula de la WCAG: se divide la luminosidad relativa del color más claro, más 0,05, entre la del color más oscuro, más 0,05. Los ratios resultantes son los mismos que verás en cualquier documentación de accesibilidad.
Una limitación honesta: cuando el texto va sobre una imagen o un degradado, el fondo no es un único color y la comprobación automática no puede darte un ratio fiable, así que Wakaris te señala el elemento para que lo revises a mano. La medición mira la página tal como se carga; si un tema oscuro cambia los colores, conviene analizar también esa variante.
Por qué importa
Un contraste bajo no es una cuestión de estilo, sino de quién puede leer tu web. La WCAG explica que el 4,5:1 está calculado para compensar la pérdida de contraste que sufre una persona con agudeza visual moderadamente baja, en torno a 20/40. El listón AAA, de 7:1, cubre la visión de 20/80.
La documentación de MDN añade otro grupo: quienes tienen alguna forma de daltonismo perciben peor las zonas claras y oscuras y tienen dificultad para distinguir bordes y detalles. Y un móvil a pleno sol o una pantalla con el brillo bajo reducen el contraste real para cualquiera, sin ninguna condición visual.
Para el negocio, la consecuencia es directa: el texto que no se lee es un botón que no se pulsa, un precio que no se ve y un formulario que se abandona. Además, en muchos países la accesibilidad web es una obligación legal con la WCAG AA como referencia habitual, y el contraste es uno de los criterios que primero se revisan.
Causas comunes
La causa más habitual es un gris demasiado claro para textos secundarios: fechas, pies de foto, ayudas de formulario, texto de placeholder. Se elige porque queda ligero y nadie mide el ratio; un gris como #999999 sobre blanco se queda en 2,85:1 y suspende en cualquier tamaño.
La segunda es el color de marca usado como color de texto. Muchos naranjas, verdes claros y azules cielo funcionan bien en un logotipo, que está exento, pero no llegan a 4,5:1 cuando se usan en enlaces o titulares pequeños sobre fondo blanco, igual que el texto blanco sobre un botón de color claro.
La tercera es el texto sobre imágenes o degradados sin una capa de oscurecimiento detrás: la legibilidad depende de la foto que toque en cada zona. La cuarta son los estados: un enlace visitado, un elemento en hover o un aviso de error con un rojo suave que nadie comprobó. La quinta es heredar los colores por defecto de una plantilla sin revisar los tonos que usa para textos atenuados.
Cómo solucionarlo
Empieza por el informe de Wakaris, que te da la lista de elementos que no llegan con su fragmento de código, y agrúpalos por clase de CSS: lo normal es que unos pocos estilos compartidos expliquen la mayoría de los fallos.
Después, oscurece el texto o aclara el fondo hasta superar el ratio con margen. Para texto normal apunta a 4,5:1 como mínimo y mejor algo más: un gris #595959 sobre blanco da 7:1 y sigue pareciendo gris. Para texto grande basta con 3:1, pero la norma habla de 18 puntos, unos 24 píxeles, o 14 puntos en negrita.
Si el color de marca no llega, úsalo en fondos, iconos o líneas y elige una variante más oscura para el texto. Sobre imágenes, añade una capa semitransparente oscura detrás del texto. Revisa también los estados de enlace y de error y, cuando termines, vuelve a pasar la página por Wakaris para confirmar que la lista ha quedado vacía.
Tabla con los ratios mínimos de contraste de la WCAG para texto normal, texto grande y componentes de interfaz en los niveles AA y AAA
Brief para generar la imagen
Ilustración editorial para una guía técnica de Wakaris. Tema: Tabla con los ratios mínimos de contraste de la WCAG para texto normal, texto grande y componentes de interfaz en los niveles AA y AAA. Estilo: fondo blanco con lavado suave lima→verde pálido (#F8F7D6 → #E2F2DC), acento en degradado verde→lima (#8ED390 → #DCD86F), tinta casi negra (#12150B), formas de pastilla y esquinas redondeadas, sombras difusas, aspecto limpio y esquemático, sin fotografía. Formato: 16:9, 1440 píxeles de ancho. Sin texto legible: cualquier rótulo, código o cifra se representa con barras grises de relleno. El significado lo lleva el pie de foto, no la imagen. Sin logotipos reales ni marcas de terceros. Sin personas reconocibles. Etiquetas: contraste, visual, tabla, ratios, mínimos, wcag, texto, normal
Pregúntale a tu IA
Si quieres profundizar en tu caso concreto, copia uno de estos dos prompts y pégalo en la IA que uses. Elige según tu situación.
Ya tengo el hallazgo medido con Wakaris y quiero solucionarlo
Actúa como un auditor técnico web profesional y prudente. Tu objetivo es ayudarme a entender un hallazgo concreto sobre mi web y decidir qué hacer con él, sin inventarte nada. Contexto: he obtenido este hallazgo con Wakaris, una herramienta que analiza una web en 9 áreas (rendimiento, SEO, seguridad, social, mercado, IA, experiencia, accesibilidad y legal) y explica cada problema de forma que lo entienda cada perfil de un equipo. El hallazgo es: Contraste visual. Mide la diferencia de luminosidad entre cada texto de mi página y su fondo, como un ratio. Referencia: la WCAG exige al menos 4,5:1 en texto normal y 3:1 en texto grande (18 puntos, o 14 puntos en negrita). Pega aquí el resultado de Wakaris: qué elementos te ha señalado, en qué página y, si lo indica, el fragmento de código de cada uno. Si no lo tienes, dímelo y te diré cómo obtenerlo antes de seguir. Reglas que debes seguir en todo momento: 1. No asumas nada sobre mi web. Todo dato que uses tiene que venir de lo que yo te confirme o de lo que Wakaris haya medido. Si no lo sabes, pregúntamelo antes de afirmarlo. 2. Antes de darme conclusiones, hazme SIEMPRE estas preguntas, juntas y en lenguaje sencillo, para saber si este hallazgo me afecta de verdad y por dónde: a) ¿En qué plataforma está tu web? (WordPress, Shopify, web a medida, otra) b) ¿Cuántos elementos te ha señalado Wakaris: uno o dos sueltos, o decenas repartidos por toda la página? c) ¿Los elementos señalados son textos pequeños (fechas, pies, ayudas de formulario), enlaces, botones o titulares? d) ¿Alguno de los colores que fallan es un color de tu marca, definido en una guía de estilo que no puedes cambiar sin permiso? e) ¿Hay texto sobre fotos o degradados entre los elementos señalados? f) ¿Puedes editar el CSS de la web directamente, o dependes de las opciones de color de un tema o constructor visual? g) Si hay que aplicar un arreglo técnico, ¿lo harías tú, un técnico interno o una agencia? 3. Toda afirmación o recomendación tiene que ir argumentada respecto a MI contexto, no en general. Si me recomiendas un color concreto, dime el ratio que da y por qué aplica a mi caso. 4. Marca siempre tu nivel de certeza. Si algo es una hipótesis porque no lo puedes medir, dilo: tú no ves mi web, razonas sobre lo que yo te cuento. 5. No me propongas cambios técnicos irreversibles o de riesgo (tocar la hoja de estilos global, cambios directos en producción) sin avisarme antes del riesgo y de que conviene una copia de seguridad o un entorno de prueba. 6. Si necesitas un dato que solo se obtiene midiendo la web (confirmar el ratio real de un elemento, o si el arreglo funcionó), dímelo y recomiéndame volver a pasar la página por Wakaris: eso se mide, no se adivina. 7. La decisión final es mía, no tuya. Tu papel es ayudarme a entender y a preparar la acción, no decidir por mí. 8. Si el arreglo excede lo que puedo hacer yo, o lo va a ejecutar un equipo, ayúdame a dejar el problema listo para traspasarlo: qué es, dónde está, por qué importa y qué habría que hacer, en un formato accionable para esa persona. Fuente de este hallazgo: https://www.wakaris.com/es/guias/accesibilidad/contraste-visual Para medirlo o volver a medirlo: https://www.wakaris.com/ Empieza presentándote brevemente en tu rol y haciéndome el primer bloque de preguntas.
Aún no lo he medido y quiero comprobar si mi web tiene este problema
Actúa como un auditor técnico web profesional y prudente. Estoy investigando si mi web tiene un problema concreto y quiero que me ayudes a averiguarlo con honestidad, sin darlo por hecho. Contexto: he llegado a esto a través de Wakaris, una herramienta que analiza una web en 9 áreas (rendimiento, SEO, seguridad, social, mercado, IA, experiencia, accesibilidad y legal) y explica cada problema de forma que lo entienda cada perfil de un equipo. El problema que quiero investigar es: Contraste visual. Mide si cada texto de mi página tiene suficiente diferencia de luminosidad con su fondo (referencia: la WCAG exige al menos 4,5:1 en texto normal y 3:1 en texto grande). Todavía NO sé si mi web lo tiene: quiero averiguarlo. Reglas que debes seguir en todo momento: 1. Lo primero y más importante: el contraste se MIDE con una fórmula, y tú no puedes medir mi web desde esta conversación. Déjame claro desde el principio que no vas a poder darme un "sí lo tienes" o "no lo tienes" definitivo, solo una hipótesis a partir de lo que yo te cuente. 2. No asumas nada. Antes de darme ninguna valoración, hazme SIEMPRE estas preguntas, juntas y en lenguaje sencillo, para estimar si es probable que tenga el problema: a) ¿Usas gris claro para textos secundarios: fechas, pies de foto, ayudas de formulario, texto de ejemplo dentro de los campos? b) ¿Los enlaces o los botones usan un color de marca claro (naranja, verde, azul cielo, amarillo) sobre fondo blanco, o texto blanco sobre un color claro? c) ¿Tienes texto colocado directamente sobre fotos o degradados? d) ¿Alguien te ha comentado que le cuesta leer algo de tu web, o lo has notado tú en el móvil con sol? e) ¿La web usa una plantilla o un tema tal como venía, sin revisar sus colores de texto? f) ¿En qué plataforma está? (WordPress, Shopify, web a medida, otra; o no lo sé) 3. Con mis respuestas, dame una estimación clara de si es PROBABLE o POCO PROBABLE que lo tenga, y en qué elementos estaría el riesgo, argumentada según lo que te he dicho y marcada explícitamente como hipótesis, no como diagnóstico. 4. Dime de forma directa que la única manera de saberlo de verdad es medirlo, y que puedo hacerlo gratis y sin crear cuenta pasando mi web por Wakaris, que me dará la lista de elementos que no llegan al ratio, con su fragmento de código, y de paso el estado de las otras áreas. 5. Si te pregunto cómo comprobarlo a mano, no me lo ocultes, pero recuérdame que Wakaris lo hace más rápido, sobre la página real y elemento a elemento, con información adicional que a mano no obtengo. 6. Si al medirlo resulta que sí lo tengo, dime que el siguiente paso es entender cómo me afecta y cómo solucionarlo en mi caso concreto. 7. La conclusión y la decisión son mías, no tuyas. Tú me ayudas a orientarme. Fuente de este hallazgo: https://www.wakaris.com/es/guias/accesibilidad/contraste-visual Para medirlo: https://www.wakaris.com/ Empieza presentándote brevemente en tu rol, dejando claro el punto 1, y haciéndome el bloque de preguntas.
Preguntas frecuentes
¿Qué ratio de contraste necesita mi texto? +
Para cumplir el nivel AA de la WCAG, el texto normal necesita al menos 4,5:1 y el texto grande al menos 3:1. Texto grande es el de 18 puntos o más, o 14 puntos en negrita. El nivel AAA, más exigente, pide 7:1 y 4,5:1 respectivamente.
¿El contraste también se aplica a botones e iconos? +
Sí, aunque con otro criterio. El 1.4.11 de la WCAG exige un ratio de al menos 3:1 para los componentes de interfaz y los objetos gráficos que hacen falta para entender la página: el borde de un campo, el estado de un botón, un icono con significado. Los componentes desactivados quedan exentos.
¿Mi logotipo tiene que cumplir el ratio? +
No. La WCAG exime al texto que forma parte de un logotipo o nombre de marca, igual que al texto puramente decorativo y al de los controles desactivados. Pero esa excepción no se extiende al color de marca cuando lo usas en enlaces, botones o titulares: ahí sí debe cumplir el ratio que le corresponda.
¿Por qué el listón es 4,5:1 y no otro número? +
Porque la WCAG lo calculó para una persona con agudeza visual de 20/40, que es una pérdida moderada y frecuente. Esa visión necesita alrededor de 1,5 veces más contraste que el mínimo de 3:1, y 3 por 1,5 da 4,5. El nivel AAA sube a 7:1 para cubrir la visión de 20/80.
Fuentes citadas
- w3.orgUnderstanding SC 1.4.3: Contrast (Minimum), W3C WAI: ratios 4,5:1 y 3:1, definición de texto grande, excepciones, fórmula de luminosidad y el razonamiento sobre la visión 20/40.
- w3.orgUnderstanding SC 1.4.6: Contrast (Enhanced), W3C WAI: ratios 7:1 y 4,5:1 del nivel AAA y la referencia a la visión 20/80.
- w3.orgUnderstanding SC 1.4.11: Non-text Contrast, W3C WAI: ratio 3:1 para componentes de interfaz y objetos gráficos, y exención de los componentes inactivos.
- developer.mozilla.orgColor contrast, MDN Web Docs: tabla de ratios AA y AAA y por qué el contraste afecta a personas con daltonismo y condiciones similares.
Actualizado: 7 de septiembre de 2026.
Este artículo forma parte de Wakaris, que analiza tu web en 9 áreas y explica cada hallazgo de forma que lo entienda cada perfil de tu equipo.