Ejemplos de mal contraste de color, medidos y corregidos
Ejemplos de mal contraste de color
Ejemplos de mal contraste de color y cómo corregir cada uno | We.Inc
Ocho ejemplos habituales de mal contraste de color en páginas de tienda realistas, con su ratio WCAG calculado, por qué fallan y una solución para probar en vivo.
Un mal contraste de color es un texto o un control cuyo color se parece demasiado a lo que tiene detrás, de modo que a muchos visitantes les cuesta leerlo. Los culpables habituales son el texto gris claro, el blanco sobre naranja o verde brillante, los textos de ejemplo de los campos y los titulares sobre fotos. WCAG 2.2 pide 4.5:1 para el texto normal; cada ejemplo de abajo muestra su ratio.
Ratio de cada ejemplo antes y después de la corrección
Ejemplo
Antes
Después
Texto de párrafo gris claro
Texto de ejemplo usado como etiqueta
Texto blanco sobre un botón naranja brillante
Texto blanco sobre una insignia verde claro
Texto gris sobre una tarjeta gris
Texto azul de marca sobre un panel oscuro
Titular blanco sobre una foto clara
Son errores que aparecen constantemente en los sitios de pequeñas empresas, reconstruidos aquí con nuestros propios colores para que veas las cifras. Cada uno indica la regla que incumple, y el editor te permite probar una corrección y ver cómo cambia el ratio.
Busca el texto más pequeño y más pálido de la página: fechas, pies de foto, pies de página, indicaciones de formularios.
Compruébalo con el fondo exacto sobre el que está, incluidas las tarjetas y los banners con tinte.
Para texto sobre una foto, prueba contra la parte más clara de la imagen que hay detrás de las letras.
Corrige primero cambiando la luminosidad. Un tono más oscuro o más claro del mismo color mantiene el aspecto de la marca.
No juzgues el contraste solo en un monitor de escritorio brillante. Mira la página en un teléfono al aire libre.
Los botones desactivados están exentos en WCAG, pero asegúrate de que un botón activo nunca parezca desactivado.
El texto al pasar el ratón y al recibir el foco también cuenta. El W3C incluye el texto que aparece al pasar el ratón o con el foco del teclado.
Si un banner de rebajas usa un color de marca claro, pon texto oscuro encima en lugar de blanco.
Los ratios entre 3:1 y 4.5:1 sirven para titulares grandes e iconos, no para párrafos.
Preguntas frecuentes
¿Por qué el texto blanco sobre naranja suele fallar?
El naranja y el amarillo son colores brillantes, así que su luminancia se acerca a la del blanco. Nuestro naranja de ejemplo #F5A623 da solo unos 2:1 con texto blanco.
¿El texto de ejemplo de un campo tiene que cumplir el contraste?
Sí. La explicación del W3C del criterio de conformidad 1.4.3 incluye el texto de ejemplo (placeholder) entre los textos que cubre. Aun así, una etiqueta visible encima del campo es el mejor patrón.
¿Cómo compruebo el texto sobre una foto?
Mide contra la parte de la imagen que queda justo detrás del texto y da por hecho que es la zona más clara. El W3C considera un fallo las imágenes de fondo sin contraste suficiente.
¿Un enlace de color sin subrayado es un fallo de contraste?
Es un problema de uso del color según el criterio de conformidad 1.4.1, que dice que el color no debe ser el único medio visual para transmitir información. Un subrayado lo resuelve.
¿Son un problema los botones desactivados en gris?
El texto de los componentes de interfaz inactivos no tiene requisito de contraste según 1.4.3. Solo asegúrate de que el botón esté realmente inactivo y no solo lo parezca por su estilo.
Por qué estos errores son tan comunes
Los diseños se suelen aprobar en una pantalla grande y brillante, donde el texto pálido sigue viéndose nítido. La misma página en un teléfono antiguo con el brillo bajo cuenta otra historia.
Los colores de marca hacen el resto. Un naranja o un verde lima alegres quedan genial como forma, y luego alguien pone texto blanco encima porque así suelen verse los botones con texto blanco sobre un color de marca.
La regla que no trata de ratios
El criterio de conformidad 1.4.1 es independiente de los ratios: pide que el color nunca sea la única forma de mostrar información. Los enlaces marcados solo con color, los campos obligatorios marcados solo en rojo y los gráficos que se distinguen solo por el tono lo incumplen.
Combina el color con otra cosa: un subrayado, un icono, una etiqueta, un patrón.
Qué falla en cada ejemplo
Problema y corrección de cada ejemplo
Ejemplo
Por qué falla
Corrección
Texto de párrafo gris claro
El gris pálido parece sereno en una maqueta, pero en un teléfono a la luz del día se desvanece.
Oscurece el gris a #595959, que llega a 7:1 sobre blanco.
Texto de ejemplo usado como etiqueta
La indicación dentro de un campo vacío suele ser pálida, y WCAG considera el texto de ejemplo como texto que también necesita contraste.
Mantén una etiqueta visible encima del campo y oscurece la indicación a #6B7280.
Texto blanco sobre un botón naranja brillante
Los tonos medios brillantes como el naranja y el amarillo son claros, así que el texto blanco sobre ellos tiene poco contraste.
Usa un naranja tostado como #C2410C, o conserva el naranja brillante y pon texto oscuro encima.
Texto blanco sobre una insignia verde claro
Las insignias de éxito y de rebajas suelen usar un verde brillante sobre el que el texto blanco no se lee.
Usa un verde más profundo como #15803D detrás del texto blanco.
Texto gris sobre una tarjeta gris
Un gris que cumple sobre blanco puede fallar sobre una tarjeta con tinte, porque la tarjeta es más oscura que la página.
Usa un gris más oscuro, como #4B5563, sobre superficies con tinte.
Texto azul de marca sobre un panel oscuro
Un azul medio que funciona sobre blanco se vuelve turbio sobre gris carbón: ambos colores están en mitad del rango de luminosidad.
Aclara el azul a #93C5FD sobre paneles oscuros.
Titular blanco sobre una foto clara
El texto sobre una foto se comprueba contra las partes de la imagen que tiene detrás. Un cielo claro o una pared blanca no dejan que el texto blanco destaque.
Pon el titular sobre una franja sólida o muy oscurecida, o sácalo de la imagen.
Un enlace indicado solo con color
Si un enlace se diferencia de la frase que lo rodea solo por el color, quienes no distinguen esos colores no pueden encontrarlo.
Subraya los enlaces en el texto de párrafo. El color puede quedarse.
Correcciones en CSS
Titular legible sobre una foto
Una franja oscura detrás de las palabras da al texto blanco un fondo estable, muestre lo que muestre la foto.
Enlaces que no dependen del color
Subraya los enlaces dentro de los párrafos y da al foco del teclado un contorno claro.
Editor de antes y después
Elige un ejemplo y cambia los colores corregidos para ver hasta dónde puedes llevar el tono de tu marca antes de que falle.
Ejemplo
Color del texto
Color de fondo
Contraste {r}
Enlace frente al texto de párrafo {r}
Cumple 4.5:1 para texto de párrafo.
Cumple solo 3:1, así que como mucho texto grande o iconos.
Por debajo de 3:1. Difícil de leer para mucha gente.
La corrección mantiene los colores y añade un subrayado, así que el color deja de ser la única señal.
No es un color hexadecimal
Envío gratis en pedidos de más de $50 esta semana.
Añadir al carrito
Tu correo electrónico
Ya está aquí el menú de primavera
Lee nuestra
política de devoluciones
antes de hacer tu pedido.
Los colores se comprueban en tu navegador con la fórmula de WCAG 2.2.
Texto de párrafo gris claro
Texto de ejemplo usado como etiqueta
Texto blanco sobre un botón naranja brillante
Texto blanco sobre una insignia verde claro
Texto gris sobre una tarjeta gris
Texto azul de marca sobre un panel oscuro
Un enlace indicado solo con color
El gris pálido parece sereno en una maqueta, pero en un teléfono a la luz del día se desvanece.
La indicación dentro de un campo vacío suele ser pálida, y WCAG considera el texto de ejemplo como texto que también necesita contraste.
Los tonos medios brillantes como el naranja y el amarillo son claros, así que el texto blanco sobre ellos tiene poco contraste.
Las insignias de éxito y de rebajas suelen usar un verde brillante sobre el que el texto blanco no se lee.
Un gris que cumple sobre blanco puede fallar sobre una tarjeta con tinte, porque la tarjeta es más oscura que la página.
Un azul medio que funciona sobre blanco se vuelve turbio sobre gris carbón: ambos colores están en mitad del rango de luminosidad.
Si un enlace se diferencia de la frase que lo rodea solo por el color, quienes no distinguen esos colores no pueden encontrarlo.
Oscurece el gris a #595959, que llega a 7:1 sobre blanco.
Mantén una etiqueta visible encima del campo y oscurece la indicación a #6B7280.
Usa un naranja tostado como #C2410C, o conserva el naranja brillante y pon texto oscuro encima.
Usa un verde más profundo como #15803D detrás del texto blanco.
Usa un gris más oscuro, como #4B5563, sobre superficies con tinte.
Aclara el azul a #93C5FD sobre paneles oscuros.
Subraya los enlaces en el texto de párrafo. El color puede quedarse.