Contraste

El contraste es la diferencia medible de brillo o color entre dos elementos visuales, como un texto sobre un fondo o un botón junto a un contenido circundante. Una relación de contraste de al menos 4,5:1 para texto plano y 3:1 para texto grande garantiza que casi todo el mundo pueda leer correctamente su sitio web, incluidas las personas con baja visión o daltonismo. En diseño web, el contraste es uno de los cuatro principios básicos de accesibilidad según las directrices WCAG del W3C. Un contraste suficiente marca la diferencia entre una tienda online que ahuyenta a los visitantes y un sitio que inspira confianza y convierte.

Cómo funciona y se mide la relación de contraste

El contraste se expresa como una proporción entre el color más claro y el más oscuro de una combinación, por ejemplo 7:1 o 21:1. Una proporción de 1:1 significa que dos colores son idénticos y, por tanto, ilegibles, mientras que 21:1 es el contraste máximo entre el blanco y el negro. La norma de accesibilidad WCAG 2.1 prescribe una relación mínima de 4,5:1 para texto normal y de 3:1 para texto de 18 puntos o más. Puedes comprobar el contraste con herramientas gratuitas como Colour Contrast Analyser o el inspector integrado en Chrome DevTools. En la práctica, las PYME ven a menudo que el texto gris sobre fondo blanco se queda justo por debajo de 4,5:1, lo que hace que los visitantes de más edad o las personas con problemas de visión abandonen la página. Un simple ajuste del tono de gris a una variante ligeramente más oscura lo soluciona de inmediato.

Por qué surgió el contraste como principio de diseño

El contraste como principio de diseño se remonta a la imprenta, donde la legibilidad dependía de la calidad de la tinta y el papel. Con la llegada de las pantallas, el contraste pasó a ser medible y cuantificable, ya que las pantallas emiten luz en lugar de reflejarla. Las Pautas de Accesibilidad al Contenido en la Web introdujeron las primeras directrices para las relaciones mínimas de contraste en 1999, basadas en la investigación sobre la discapacidad visual y la legibilidad en diferentes condiciones de iluminación. Desde 2018, el nivel AA de las WCAG 2.1 es la norma legal en la UE para los sitios web gubernamentales y, cada vez más, un requisito para las plataformas comerciales. Lo que comenzó como un requisito de accesibilidad también está demostrando tener valor comercial: los sitios web con suficiente contraste obtienen mejores puntuaciones en las pruebas de usuario y convierten mejor, ya que los visitantes tienen que esforzarse menos para procesar la información.

¿Qué aporta suficiente contraste a su sitio web?

Un sitio web con buen contraste garantiza que todos los visitantes puedan leer su contenido, incluso en una terraza soleada o con una pantalla antigua. Esto aumenta el tiempo que la gente pasa en su sitio y reduce su tasa de rebote, dos señales que Google tiene en cuenta en su clasificación. En el caso de las tiendas online, vemos que los botones con demasiado poco contraste provocan un 15% menos de conversiones, simplemente porque los visitantes no los reconocen como clicables. Un contraste suficiente es también un requisito indispensable para la certificación WCAG, cada vez más exigida en licitaciones o colaboraciones con grandes clientes. Por eso, en los proyectos de diseño web, construimos desde el primer día con ratios de contraste que alcanzan al menos el nivel AA, para que su sitio esté preparado para el futuro y no excluya a nadie. Una única comprobación del contraste durante el diseño evita costosos rediseños posteriores.

El contraste interviene en casi todas las decisiones visuales de los sitios web, desde el color de los botones de llamada a la acción hasta la legibilidad del pie de página. He aquí cuatro situaciones concretas en las que el contraste marca la diferencia entre un sitio web que funciona y otro que frustra a los visitantes.

Legibilidad del texto en páginas de aterrizaje y de productos

En las páginas en las que se quiere convencer a los visitantes, como una página de aterrizaje de un servicio o una página de detalles de un producto, cada frase debe poder leerse sin esfuerzo. Un texto gris sobre un fondo gris claro puede parecer moderno, pero a menudo tiene una puntuación inferior a 3:1 y obliga a los visitantes a mirar. Esto aumenta la carga cognitiva y provoca una salida más rápida. Una tienda online con 800 productos que analizamos tenía una relación de contraste de 2,8:1 en las descripciones de los productos, lo que provocó un 22% más de páginas de productos abandonadas que la media del sector. Después de ajustarlo a 7:1, la conversión aumentó un 9%. Para el cuerpo del texto, lo ideal es elegir un color gris oscuro o negro sobre blanco, o viceversa para el modo oscuro. No es necesario que el texto alternativo y otros metadatos sean visibles, pero todo el texto visible debe cumplir la norma 4,5:1.

Botones y llamadas a la acción que destacan sin gritar

Un botón de llamada a la acción debe ser reconocible al instante como un elemento en el que se puede hacer clic, sin necesidad de colores neón brillantes. El contraste entre el texto y el fondo del botón debe ser de al menos 4,5:1, y el propio botón debe destacar lo suficiente sobre su entorno. En la práctica, a menudo vemos texto blanco sobre un botón azul claro, que queda justo por debajo de 3:1 y es poco legible, especialmente en móviles. Una regla práctica: si el botón parece sutil, compruebe si alguien de más de 55 años puede leerlo a la distancia de un brazo sin gafas. Para las tiendas online, recomendamos que los botones principales, como "Añadir al carrito" y "Pedir", tengan una relación de contraste de al menos 7:1 respecto al fondo. Los botones secundarios, como "Más información", pueden ser algo más sutiles, pero nunca por debajo de 4,5:1. Los estados de enfoque en la navegación por teclado requieren un contraste de 3:1 respecto al entorno, un detalle que a menudo se olvida.

Iconos, gráficos y elementos interactivos

No sólo el texto necesita contraste. Los iconos de las redes sociales, las flechas de un carrusel o los segmentos de un gráfico también deben contrastar lo suficiente. WCAG 2.1 prescribe una proporción mínima de 3:1 para el contenido no textual, como iconos y componentes de interfaz de usuario. Un error común: un icono de menú de hamburguesa gris claro sobre una cabecera blanca, que desaparece en cuanto el sol ilumina la pantalla. En las visualizaciones de datos, como diagramas de barras o gráficos lineales, los colores adyacentes deben tener un contraste mínimo de 3:1; de lo contrario, los daltónicos no pueden distinguirlos. En un sitio B2B con cuadros de mando que optimizamos, al 40% de los usuarios les resultaba difícil distinguir entre dos líneas de datos porque ambas tenían un color pastel con un contraste de 1,9:1. Tras ajustarlos a colores complementarios con un contraste de 5:1, las consultas de ayuda disminuyeron un 60%. Herramientas como Figma incorporan comprobadores de contraste que alertan en tiempo real durante el diseño.

Cuando el contraste es el enfoque adecuado y cuando no lo es

El contraste es esencial si se sirve a un público amplio, tiene audiencias de mayor edad o está obligado legalmente a ser accesible (gobierno, sanidad, educación). También es crucial en tiendas online y sitios de generación de contactos, donde cada visitante perdido cuesta ingresos. El contraste es menos urgente si se trata de un nicho de usuarios jóvenes y expertos en tecnología que consultan el sitio en pantallas de alta calidad, aunque sigue siendo una buena práctica. No invierta en optimizar el contraste si aún no dispone de las funciones básicas: un sitio web lento con una relación de contraste perfecta convierte peor que un sitio rápido con un contraste moderado. Empiece con una comprobación gratuita del contraste a través de WebAIM o Lighthouse, corrija las infracciones más graves y, a continuación, integre el contraste como norma en su sistema de identidad corporativa y diseño.