Contraste de color en textos, botones e iconos

Por qué importa el contraste

Un texto pálido le cuesta caro al lector. Las personas con baja visión, los lectores mayores y cualquiera que mire el móvil a pleno sol necesitan una diferencia clara entre texto y fondo. Por eso las Pautas de Accesibilidad para el Contenido Web (WCAG) del W3C fijan valores mínimos para el texto, para controles como botones y campos de entrada, y para iconos y gráficos. Se pueden medir y comprobar antes del lanzamiento.

Cómo funciona la relación de contraste

La relación de contraste compara lo claros que son dos colores. Las WCAG no miran el tono, sino la luminancia relativa: un valor entre 0 para el negro más oscuro y 1 para el blanco más claro. Los tres canales rojo, verde y azul se convierten y se ponderan: el verde es el que más cuenta, el rojo menos y el azul lo mínimo. La relación es (L1 + 0.05) / (L2 + 0.05), donde L1 es la luminancia del color más claro. El resultado va de 1:1 para dos colores iguales a 21:1 para negro sobre blanco.

En la práctica importan dos reglas del W3C. Primera: los valores no se redondean; una relación de 4.499:1 no alcanza el límite de 4.5:1. Segunda: el contraste se mide frente al fondo definido para el texto. Si una página define solo el color del texto y no el del fondo, el W3C lo cuenta como fallo, porque no se sabe qué fondo tiene por defecto el visitante. Define siempre los dos colores juntos.

Los tres criterios de conformidad

• 1.4.3 Contraste (mínimo), nivel AA: el texto y las imágenes de texto necesitan al menos 4.5:1; el texto grande, al menos 3:1.
• 1.4.6 Contraste (mejorado), nivel AAA: el texto necesita al menos 7:1; el texto grande, al menos 4.5:1. Es el nivel más estricto y el que más ayuda en textos largos.
• 1.4.11 Contraste no textual, nivel AA: al menos 3:1 frente a los colores contiguos para todo lo que hay que ver para reconocer un control y su estado (por ejemplo, el borde de un campo o un indicador de foco) y para las partes de un gráfico necesarias para entender el contenido, como iconos o líneas de un diagrama.

Qué cuenta como texto grande

Texto grande es el de al menos 18 puntos, o al menos 14 puntos en negrita. El W3C lo convierte en unos 24 píxeles y unos 18.5 píxeles en negrita. El texto grande puede tener menos contraste porque las letras son más grandes y sus trazos más anchos. Cuidado con las fuentes finas: según el W3C, el suavizado puede hacer que las fuentes finas o poco habituales parezcan más tenues que su color definido. Recomienda fuentes más gruesas o un par de colores claramente por encima del mínimo.

Qué no tiene que cumplir

• Componentes inactivos, como un botón desactivado.
• La decoración pura y el texto que nadie puede ver.
• El texto que forma parte de un logotipo o de un nombre de marca.
• El texto incidental en una imagen con otro contenido importante, como una señal de tráfico en una foto.

Errores típicos

• Gris claro sobre blanco. El gris para fechas, pies de foto o texto secundario suele ser demasiado pálido: #999999 sobre blanco solo llega a 2.84:1. El gris puro más claro que cumple AA para texto normal sobre blanco es #767676, con 4.54:1.
• Texto sobre imágenes. El contraste cambia con cada zona de la foto. El W3C recoge las imágenes de fondo sin contraste suficiente como fallo (F83). Pon el texto sobre una superficie lisa, oscurece la imagen detrás o coloca el texto junto a la imagen. Comprueba el punto más claro detrás del texto.
• Texto de marcador de posición. La indicación gris en un campo vacío es texto, y se le aplica el 1.4.3. Un gris claro como #9ca3af sobre blanco solo llega a 2.53:1. Además, un marcador de posición no sustituye a una etiqueta visible.
• Estados de hover y foco. El texto que aparece o cambia al pasar el ratón o con el foco del teclado debe cumplir los mismos valores. Un efecto hover no debe reducir el contraste de un control ni debilitar el indicador de foco. Un indicador de foco de diseño propio necesita 3:1 frente al fondo contiguo.
• Texto blanco sobre colores de marca vivos. Los botones naranjas, amarillos, verde claro o turquesa con texto blanco suelen fallar: blanco sobre #ff6600 llega a 2.93:1.
• Bordes e iconos pálidos. Si el borde es lo único que muestra dónde está un campo de entrada, necesita 3:1: #cccccc sobre blanco tiene 1.60:1. Los iconos que transmiten significado sin texto, como una flecha de desplegable o un icono de cerrar, también necesitan 3:1.
• Comprobar solo un tema. Si tu sitio tiene modo oscuro, comprueba sus pares de colores por separado. Un color que funciona sobre blanco puede fallar sobre un fondo oscuro.

Corrige una paleta de marca sin perder la marca

1. 1Anota cada color con su función: texto, fondo, acento o botón, borde. Muchos problemas empiezan cuando un solo color lo hace todo.
2. 2Mantén el color de marca donde las reglas son más fáciles de cumplir o no se aplican: en el logotipo, en superficies grandes, en la decoración y en los títulos grandes.
3. 3Para el texto y los elementos pequeños, usa un tono más oscuro o más claro del mismo matiz. Si solo cambia la luminosidad, el color sigue siendo reconocible: texto blanco sobre #c74f00, un naranja más oscuro, llega a 4.61:1.
4. 4O cambia el color del texto. Un texto oscuro sobre un color de marca vivo suele funcionar mejor que el blanco: #1a1a1a sobre #ff6600 llega a 5.92:1.
5. 5Define un único gris para el texto secundario que cumpla, por ejemplo #767676 sobre blanco, y úsalo en todas partes en lugar de varios grises pálidos.
6. 6Comprueba cada estado: normal, hover, foco, error y modo oscuro. Guarda los colores finales como variables en tu hoja de estilos, para que nadie vuelva a elegir a mano un color pálido.

Comprueba tus colores con Do4U

La Comprobación de contraste de color calcula estos valores para tus propios colores. Introduces tus colores, uno por línea, y das a cada uno una función: texto, fondo, acento (por ejemplo, un botón) o borde. El código comprueba cada par razonable frente a AA y AAA para texto normal y grande, y frente a 3:1 para bordes, iconos y superficies de botones, sin redondear hacia arriba. Para cada par que falla recibes el color más cercano que cumple, uno más oscuro y otro más claro, en el mismo matiz. Do4U también crea una paleta ajustada, la vuelve a comprobar en conjunto y la exporta como propiedades personalizadas de CSS, SCSS o JSON. Todo se ejecuta en código, sin IA, y la comprobación es gratuita.

La comprobación solo conoce los pares de colores que introduces. No ve tamaños de letra, imágenes detrás del texto, transparencias ni estados de hover y foco, así que prueba también las páginas terminadas. Do4U crea el borrador; tú compruebas y decides.