Construir la paleta de colores de tu sitio

La paleta son los pocos colores de tu sitio y el papel de cada uno. Bien planteada, hace reconocible tu negocio a primera vista y lo vuelve todo legible. Mal planteada, apaga el texto: en 2026, el 83,9 % de las páginas de inicio del millón de sitios más visitados contenía texto con demasiado poco contraste, el defecto de accesibilidad más frecuente del estudio (WebAIM, 2026).

Así se construye, con las pocas medidas que la hacen legible para todos.

Pocos colores, cada uno con su papel

Una paleta de sitio web se reduce a cuatro papeles:

• el fondo: blanco roto, crema, o al contrario muy oscuro;
• el texto: casi negro sobre fondo claro, casi blanco sobre fondo oscuro;
• el acento: un solo color vivo, para lo que se puede pulsar;
• los neutros: uno o dos grises, cálidos o fríos, para las líneas, los fondos de sección y las notas discretas.

Parte de lo que ya existe: el rótulo, el escaparate, el logotipo, los materiales del lugar. Una panadería puede sacar su paleta de la corteza y la harina; una consulta de fisioterapia, de la madera clara y el verde de su fachada; un fotógrafo, de un negro profundo que deja todo el sitio a las imágenes.

Apunta cada color con su código y su papel, y cíñete a ello. Un sitio en el que cada sección inventa un tono acaba por no decir nada.

El contraste del texto: 4,5:1

El contraste se mide como una relación entre la luminancia de los dos colores, de 1:1 (dos colores idénticos) a 21:1 (negro sobre blanco). El criterio 1.4.3 de las WCAG (nivel AA) exige:

• al menos 4,5:1 para el texto corriente;
• al menos 3:1 para el texto grande, a partir de unos 24 píxeles, o 18,5 píxeles en negrita.

El umbral es estricto: una relación de 4,47:1 falla (W3C). La cifra de 4,5 compensa la pérdida de sensibilidad al contraste de una agudeza visual de unos 5/10, frecuente hacia los 80 años. Protege, pues, sobre todo a tus clientes de más edad.

Los logotipos, los textos puramente decorativos y los botones desactivados están exentos de la regla. Una guía de marca, en cambio, no te exime.

La trampa clásica es el gris claro sobre blanco, tan elegante en una maqueta. Un ejemplo, calculado con la fórmula de las WCAG:

Para comprobarlo, no hace falta calcular: en Chrome, el selector de color de las herramientas para desarrolladores muestra la relación y dice si alcanza el nivel AA, y Lighthouse enumera los textos demasiado pálidos de la página (Chrome for Developers).

Lo que no es texto: 3:1

El criterio 1.4.11 de las WCAG (nivel AA) extiende la regla a lo que permite usar la página. Exige al menos 3:1 frente a los colores vecinos para:

• el borde de un campo de formulario: un borde gris claro #AAAAAA sobre blanco, a 2,3:1, falla;
• un icono que funciona solo como botón, como el teléfono o la flecha de un menú;
• el indicador de foco, el contorno que muestra dónde se está al navegar con el teclado;
• las partes significativas de un gráfico, como las líneas o los sectores de un gráfico circular.

Un botón que lleva un texto legible no necesita un borde contrastado: el texto basta para localizarlo. El paso del ratón no está sujeto a la relación.

Nunca el color solo

Aproximadamente uno de cada doce hombres tiene dificultades para ver ciertos colores (National Eye Institute, 2025). El criterio 1.4.1 de las WCAG (nivel A, el primero) exige, pues, que ninguna información dependa solo del color. El RGAA, la norma francesa, lo convierte en su criterio 3.1. Algunos casos frecuentes:

• Los enlaces dentro de un párrafo. Mantenlos subrayados. Sin subrayado, la técnica G183 del W3C exige al menos 3:1 entre el enlace y el texto que lo rodea.
• Los campos obligatorios. Una etiqueta roja no basta: añade la palabra «obligatorio», o un asterisco explicado al principio del formulario.
• Abierto o cerrado. Un punto verde o rojo junto a los horarios debe ir acompañado de la palabra.
• La tarifa recomendada en una tabla de precios: señálala con una mención escrita, además de su color.

Una prueba sencilla: pasa la página a escala de grises, con un filtro en tu ordenador o una captura retocada. Todo lo que se vuelve ambiguo depende del color.

Un color de acento, reservado

El acento señala lo que actúa: el botón de llamada a la acción, los enlaces, el foco. Si colorea también los títulos, los iconos y los fondos de sección, ya nada destaca, y el visitante ya no sabe dónde pulsar. Resérvalo, y guiará la mirada hacia tu botón de llamada a la acción.

Compruébalo en sus dos usos:

1. Como fondo de botón, con el texto del botón encima: al menos 4,5:1 entre los dos. El naranja #FF8C00, ilegible como texto sobre blanco, da 9:1 con un texto negro colocado encima.
2. Como texto, para los enlaces: 4,5:1 frente al fondo de la página. Los tonos vivos y claros, amarillo, naranja, verde manzana, suelen fallar ahí; oscurécelos para los enlaces y guarda la versión viva para los botones.

Piensa, por último, en los estados: el botón con el ratón encima, pulsado y con el foco debe seguir legible en cada uno.

El texto sobre una foto o un vídeo

Un título colocado sobre una imagen está sujeto a la misma regla de 4,5:1, o 3:1 cuando es grande. La dificultad viene de la imagen, hecha de mil tonos. El W3C mide el contraste frente a lo que está justo detrás de las letras: para un título blanco, la zona más clara de la imagen sirve de prueba rápida (fallo F83).

Cuatro maneras de conseguirlo, inspiradas en la técnica G18 del W3C:

• elegir una imagen con una zona tranquila allí donde va el texto: un cielo, una pared, una sombra;
• colocar un velo que oscurece o aclara la imagen detrás del texto;
• rodear las letras con un halo o un fino contorno contrastado;
• poner el texto sobre una banda de color liso.

Con un fondo de vídeo, cuenta cada fotograma de la película. Prueba en el pasaje más claro para un título blanco, el más oscuro para un título negro, y en la imagen fija que se muestra antes de la película. Una textura como el grano de película viste la imagen; el contraste viene del velo o de la banda.

En resumen: cuatro papeles, un color de acento reservado a lo que se puede pulsar, 4,5:1 para el texto y 3:1 para los controles. Respalda toda información que lleve el color, y prueba el texto colocado sobre una imagen en su parte más difícil.