El contraste de color decide si el texto de tu web se lee o se adivina. Un gris claro sobre fondo blanco puede quedar elegante en el diseño, pero deja fuera a una parte real de tus visitantes y, desde 2025, también incumple un requisito legal para quien presta un servicio a través de su web. Si tu despacho tiene ficha de abogado, formulario de contacto o agenda una primera consulta online, este artículo te dice qué ratio exige la norma, dónde suele fallar una web jurídica y cómo comprobarlo sin contratar a nadie.
El contraste de color exige un ratio mínimo de 4,5:1 entre el texto y su fondo, y de 3:1 si la letra es grande, según la Pauta de Accesibilidad para el Contenido Web (WCAG) 2.2. Por debajo de ese ratio, una persona con baja visión no distingue el texto aunque el diseño se vea correcto en una pantalla normal y con buena luz.
Contraste de color, el ratio 4,5:1 de la WCAG
La WCAG 2.2 fija el criterio 1.4.3, Contraste (Mínimo), en el nivel AA: el texto normal necesita un ratio de al menos 4,5:1 frente a su fondo, y el texto grande se conforma con 3:1, según detalla el documento de comprensión del criterio que publica el W3C. El ratio se calcula sobre la luminancia relativa de los dos colores, no sobre cómo se perciben a simple vista en el monitor de quien diseña la web, que suele tener mejor calibración y más brillo que el móvil del visitante medio.
El ratio de contraste mide la relación entre la luminancia relativa del color de texto y la del fondo: va de 1:1, cuando son idénticos, a 21:1, que es negro puro sobre blanco puro.
Texto grande, logotipos y la excepción del 3:1
La propia norma considera «grande» un texto a partir de 18 puntos, unos 24 píxeles, o de 14 puntos en negrita, unos 18,5 píxeles: a ese tamaño el ojo distingue formas con menos contraste y el ratio exigido baja a 3:1. Por debajo de ese tamaño, el 4,5:1 no admite excepción salvo para texto decorativo sin función informativa, texto que forma parte de un logotipo o nombre de marca, o texto incrustado en una fotografía con contenido visual relevante alrededor. Un titular de 22 píxeles en negrita entra en el umbral de texto grande; el cuerpo de un artículo, casi nunca, así que ahí no vale el margen del 3:1.
La Ley 11/2023 y la fecha ya cumplida
El título I de la Ley 11/2023, de 8 de mayo, de trasposición de Directivas de la Unión Europea en materia de accesibilidad de determinados productos y servicios entró en vigor el 28 de junio de 2025. Su disposición adicional tercera extiende los requisitos de accesibilidad del título I a las páginas web alcanzadas por la norma, y el contraste entre el texto y su fondo es uno de los criterios técnicos que esos requisitos incorporan. No es una recomendación de estilo: es un requisito con fecha de entrada en vigor ya cumplida.
Qué pasa con una web publicada antes de 2025
La disposición transitoria única de la ley recoge el periodo transitorio que fija la Directiva (UE) 2019/882 para los servicios que ya estaban operativos antes de esa fecha. Ese margen no cubre el contenido nuevo: un rediseño, una landing o un artículo publicados después del 28 de junio de 2025 no se benefician de ningún periodo de adaptación, así que el momento de revisar el contraste es antes de publicar, no después de que alguien lo reclame. Es la misma ley que ya obliga a muchos despachos a revisar su web en conjunto, no solo en este criterio concreto.
Los fallos de contraste más comunes en despachos
El contraste insuficiente es el fallo de accesibilidad más repetido de la web, y no por poco margen: según The WebAIM Million 2026, el análisis anual del millón de páginas de inicio más visitadas, el 83,9% tiene texto con contraste insuficiente, con una media de 34 casos por página. En una web jurídica el patrón se repite en los mismos puntos: el texto legal del pie en gris claro, los placeholders de los formularios usados como única etiqueta visible, y párrafos enteros en gris medio sobre blanco porque «parece más suave» que el negro.
Los enlaces y botones que no se distinguen
Un enlace dentro de un párrafo solo se distingue si además de subrayado cambia de color; con el mismo gris que el texto que lo rodea, alguien con baja visión no sabe que puede pulsarlo. Los botones de «pedir cita» o «consulta gratuita» suelen llevar el color de marca del despacho como fondo y texto blanco encima: si ese azul corporativo es claro, el blanco no llega al 3:1 y el botón entero falla el criterio, aunque el resto de la web lo cumpla. La solución no es cambiar la marca, sino oscurecer ese tono concreto solo en el fondo del botón y conservar el azul original en el logotipo, donde el ratio no se exige.
Revisar el contraste sin tocar código
Medir un ratio de contraste no exige abrir el código de la web. Basta con el selector de color del navegador y una herramienta gratuita que calcule la relación entre los dos tonos antes de dar una página por terminada:
- Un comprobador de contraste gratuito, como el de WebAIM: se introducen el color de texto y el de fondo y devuelve el ratio exacto y si pasa el nivel AA.
- Las herramientas de desarrollador del navegador: en Chrome, el panel de accesibilidad del inspector marca en rojo el texto que no llega al ratio exigido, elemento por elemento.
- Una extensión de auditoría como axe o WAVE, que recorre la página entera y lista de una vez todos los contrastes insuficientes, útil justo antes de publicar una pieza nueva.
Ajustar el color de marca sin perder identidad
Cuando el color corporativo no llega al ratio exigido, el error habitual es sustituirlo por otro completamente distinto, y ahí se pierde la identidad de marca sin necesidad. El ajuste que funciona es mantener el mismo tono, el mismo matiz, y bajar solo su luminosidad unos puntos: un azul corporativo que pasa de un 3,2:1 a un 4,6:1 con un diez por ciento menos de brillo sigue siendo reconociblemente el mismo azul. Ese tono oscurecido se reserva para el texto y los fondos de botón; el tono original de marca puede seguir usándose en el logotipo, en bordes decorativos o en ilustraciones, donde el criterio no se aplica.
Legibilidad, la confianza que no se discute
Un texto que cuesta leer transmite lo mismo que una ficha de abogado sin colegiación visible o un formulario que no carga: que nadie ha revisado el detalle. El visitante no sabe que se llama «contraste 1.4.3», solo nota que tiene que forzar la vista, y eso pesa en la decisión de escribir o no a un despacho que vende, sobre todo, confianza. Es el mismo principio que exige el texto alternativo en imágenes: una regla pensada para quien no ve bien la pantalla, no un capricho de quien diseña.
Un despacho que ya ha revisado sus patrones oscuros para no incurrir en sanción no debería dejar la legibilidad del texto al azar del primer tono que eligió el diseñador. Las dos cosas se auditan con la misma lógica: mirar la web como la mira alguien que no tiene de fondo el manual de marca, solo la pantalla delante.
Preguntas frecuentes sobre el contraste de color
¿Qué contraste mínimo exige la ley a una web?
El mínimo es 4,5:1 entre el texto y su fondo para el cuerpo normal, y 3:1 para texto grande (18 puntos o 14 en negrita), según el criterio 1.4.3 de la WCAG 2.2 que incorpora la normativa de accesibilidad vigente desde junio de 2025.
¿Un logotipo también debe cumplir ese ratio?
No. El texto que forma parte de un logotipo o de un nombre de marca queda exento del requisito de contraste, igual que el texto puramente decorativo o el incrustado en una fotografía con contenido visual relevante alrededor.
¿Qué pasa si mi despacho no cumple el ratio?
La web queda expuesta a una reclamación de accesibilidad y a perder visitas de personas que no llegan a leer el texto, que es el coste más inmediato. Corregirlo no exige rediseñar nada: basta con oscurecer los tonos que fallan.
¿El modo oscuro cambia el ratio que se exige?
No, el 4,5:1 se aplica igual sobre fondo claro que sobre fondo oscuro. Un gris claro sobre negro puede fallar el criterio igual que un gris sobre blanco: hay que medir cada combinación de colores por separado.
Fuente: W3C — WCAG 2.2, Understanding Success Criterion 1.4.3 (Contrast Minimum)
