Solución de problemas · Color y diseño
Problemas de contraste que debes corregir
Tu web se ve elegante: grises suaves, tipografía fina, tonos delicados. Pero tus visitantes entrecierran los ojos, abandonan formularios a medias o te escriben que «no se lee bien». El problema es el contraste: la diferencia entre el texto y su fondo es insuficiente.
El mal contraste no es solo un problema estético: excluye a personas con baja visión, cansa a todos los lectores y, en muchos países, incumple la normativa de accesibilidad. La buena noticia es que se mide con números objetivos y se corrige con decisiones concretas.
Problema 1: texto gris claro sobre fondo blanco
El clásico: texto en gris #999 o más claro sobre blanco. En tu monitor calibrado se lee; en un móvil con brillo bajo o para alguien con vista cansada, desaparece.
Cómo detectarlo: baja el brillo de tu pantalla al mínimo y mira tu web. Todo lo que cueste leer tiene contraste insuficiente. Para medirlo con precisión usa un comprobador de contraste con los ratios WCAG.
El estándar WCAG exige un ratio de al menos 4,5:1 para texto normal y 3:1 para texto grande (a partir de 18 pt o 14 pt en negrita). Oscurece el gris hasta cumplir el ratio: #767676 sobre blanco es el gris más claro que pasa el 4,5:1. Si tu paleta necesita grises, la herramienta de paletas de Tótem (usatotem.com/herramientas-diseno/paleta-colores/) te ayuda a elegir tonos que mantengan la estética sin romper la legibilidad.
Problema 2: texto sobre imágenes sin protección
Un titular blanco sobre una foto queda espectacular... hasta que la foto de fondo es clara en esa zona y el texto se funde con ella. Como cada imagen es distinta, el contraste varía de forma impredecible.
Cómo detectarlo: mira tus titulares sobre imagen en varios tamaños de pantalla: al recortarse la imagen de fondo, la zona tras el texto cambia y el contraste se rompe.
La solución es un overlay: una capa semitransparente oscura entre la imagen y el texto, o un degradado que oscurezca la zona del titular. Así el contraste deja de depender de la foto. Alternativa: coloca el texto en una zona de color sólido fuera de la imagen. Nunca confíes el contraste a que «la foto sea oscura».
Problema 3: enlaces que solo se distinguen por color
Si tus enlaces se diferencian del texto normal únicamente por ser azules (o de otro color), las personas con daltonismo no los distinguen. El color solo no es un indicador suficiente.
Cómo detectarlo: mira tu página en escala de grises (muchos sistemas tienen este filtro de accesibilidad). Si no distingues qué es enlace y qué no, hay un problema.
Añade un segundo indicador: subrayado en los enlaces (al menos al pasar el cursor, mejor siempre en el cuerpo del texto), negrita o un icono. Es un cambio pequeño que mejora la usabilidad para todos, no solo para daltónicos.
Problema 4: placeholders como única etiqueta
Los textos de ejemplo dentro de los campos de formulario (placeholders) suelen ir en gris claro: contraste insuficiente por diseño. Y cuando el usuario escribe, el placeholder desaparece y ya no sabe qué pedía el campo.
Cómo detectarlo: revisa tus formularios con el placeholder sin rellenar. Si cuesta leer qué pide cada campo, el contraste falla; y si al escribir se pierde la referencia, la etiqueta falta.
Usa etiquetas visibles y permanentes fuera del campo, con contraste suficiente, y reserva el placeholder para ejemplos de formato («ej.: 612 345 678»). Etiqueta siempre visible + placeholder como ayuda: así el formulario es usable por todos.
Problema 5: estados deshabilitados y mensajes de error ilegibles
Los botones deshabilitados en gris pálido y los mensajes de error en rojo claro sobre rosa son habituales... e ilegibles. Los estados de la interfaz también necesitan contraste.
Cómo detectarlo: deshabilita un botón y lee su texto con brillo bajo; provoca un error en un formulario y lee el mensaje. Si cuesta, falla.
Los botones deshabilitados deben seguir siendo legibles (o explicarse con un texto de ayuda); los errores necesitan color + icono + texto claro, nunca solo color. Recuerda: transmitir información solo con color excluye a quienes no lo perciben igual.
Plan de corrección
Uno: audita tu sitio con un comprobador de contraste automático (las herramientas de desarrollo del navegador lo incluyen) y lista cada fallo.
Dos: corrige empezando por el texto principal: cuerpo, titulares y navegación. Ajusta los colores hasta cumplir 4,5:1 (3:1 en texto grande).
Tres: protege los textos sobre imagen con overlays y añade indicadores no cromáticos a enlaces y estados.
Cuatro: si necesitas reconstruir parte de la paleta, usa usatotem.com/herramientas-diseno/paleta-colores/ para encontrar tonos accesibles que mantengan tu identidad. Cinco: repite la auditoría tras cada rediseño: el contraste se degrada poco a poco con cada «pequeño ajuste».
Herramientas gratuitas mencionadas
Generador de paletas
Elige un color base y genera paletas armónicas: análoga, complementaria, triádica y más.
Usar gratisHEX a RGB
Convierte cualquier color hexadecimal a sus valores RGB al instante.
Usar gratisRGB a HEX
Convierte valores RGB (0–255) a código hexadecimal listo para tu CSS.
Usar gratisPreguntas frecuentes
¿Qué es el ratio de contraste WCAG?
Es la medida estándar de diferencia de luminosidad entre texto y fondo, de 1:1 (idénticos) a 21:1 (negro sobre blanco). WCAG exige 4,5:1 para texto normal y 3:1 para texto grande en el nivel AA, el más exigido legalmente.
¿El contraste afecta al SEO?
Indirectamente: un mal contraste aumenta el rebote y reduce el tiempo en página, señales de experiencia de usuario que sí importan. Además, la accesibilidad es cada vez más un requisito legal en webs públicas y de comercio.
Mi diseño «minimalista» necesita grises claros, ¿qué hago?
Reserva los grises claros para elementos decorativos (bordes, fondos, separadores) y usa grises oscuros (#595959 o más oscuro sobre blanco) para todo texto. El minimalismo no está reñido con la legibilidad: está reñido con el texto ilegible.
En resumen
Los problemas de contraste —grises sobre blanco, texto sobre imagen, enlaces solo por color, placeholders como etiquetas y estados ilegibles— se detectan con pruebas sencillas y se corrigen con números objetivos, no con opiniones.
Audita, corrige con los ratios WCAG como guía y mantén la vigilancia en cada rediseño: la legibilidad es la base sobre la que se construye todo lo demás.