Buenas prácticas de diseño para banners de cookies

Tu banner de cookies es una de las primeras cosas que ve un visitante. Determina la percepción que tiene de tu marca, su confianza en tu negocio y —lo más importante— si su consentimiento es legalmente válido. Un banner bien diseñado logra el cumplimiento sin fricción. Uno mal diseñado ahuyenta a los usuarios o produce un consentimiento que no resistirá el escrutinio regulatorio.

Esta guía cubre los principios de diseño, los patrones de UX y los requisitos de accesibilidad que separan un banner de cookies conforme y fácil de usar de un riesgo legal.

Las primeras impresiones importan

Los estudios demuestran de forma constante que los usuarios toman decisiones sobre los banners de cookies en dos o tres segundos. La mayoría no lee el texto completo. Buscan patrones reconocibles —botones, interruptores, un lenguaje familiar— y actúan por instinto. Esto significa que el diseño visual de tu banner tiene tanto peso como su contenido legal.

El objetivo es hacer que la acción correcta sea evidente y que las opciones disponibles se comprendan de un vistazo. Si un usuario tiene que pensar qué hacer, tu diseño ha fallado.

Principios clave para las primeras impresiones:

• Claridad antes que ingenio. Un banner de cookies no es el lugar para textos creativos ni interfaces poco convencionales. Usa patrones familiares que los usuarios reconozcan.
• Jerarquía visual. Los elementos más importantes —la descripción del propósito y los botones de acción— deben ser los más destacados. Los elementos secundarios (enlace de configuración, enlace a la política) pueden destacar menos, pero deben seguir siendo visibles.
• Espacio en blanco. Un banner recargado resulta abrumador. Deja que los elementos respiren. El relleno y el espaciado transmiten profesionalidad y facilitan la lectura del contenido.

Jerarquía de botones y peso visual

Aquí es donde la mayoría de los banners de cookies incumplen la normativa, y donde se imponen la mayoría de las multas.

Las Directrices 05/2020 del EDPB sobre el consentimiento, junto con múltiples acciones de aplicación de la CNIL, el Garante italiano y la Datatilsynet danesa, han establecido un principio claro: la opción de rechazar las cookies debe presentarse con la misma prominencia que la opción de aceptarlas.

Lo que esto significa en la práctica:

• Los botones de aceptar y rechazar deben tener el mismo tamaño. Un botón de «Aceptar todo» de 200 píxeles de ancho junto a un enlace de texto «Rechazar» no representa la misma prominencia. Ambos deben mostrarse como botones de dimensiones comparables.
• Ambos botones deben usar un peso visual comparable. Si tu botón de aceptar es un botón sólido y de alto contraste, tu botón de rechazar también debe ser un botón sólido, no un elemento con contorno, fantasma o solo de texto. La CNIL multó específicamente a Google con 150 millones de euros en 2022, en parte porque la opción de rechazar exigía más esfuerzo que la de aceptar.
• El color no debe manipular. Un botón verde brillante de «Aceptar» junto a un botón gris de «Rechazar» es un patrón oscuro. Usa el color principal de tu marca para ambos, o colores neutros para ambos. La señal visual no debe orientar al usuario hacia una elección concreta.
• El orden de los botones importa menos de lo que crees. Que aparezca primero aceptar o rechazar no es la preocupación principal: lo es el peso visual. Dicho esto, colocar el botón de rechazar a la izquierda (primero en el orden de lectura) puede transmitir neutralidad.

Patrón de botones recomendado

Un banner conforme y fácil de usar suele emplear tres acciones:

1. Rechazar todo: un botón sólido
2. Aceptar todo: un botón sólido del mismo tamaño y peso visual
3. Gestionar preferencias: un botón o enlace secundario (puede destacar menos, ya que conduce a una segunda capa)

Color y contraste

Las elecciones de color en los banners de cookies cumplen dos propósitos: coherencia de marca y legibilidad. Desde la perspectiva del cumplimiento, los requisitos clave son:

• Contraste del texto. Todo el texto del banner debe cumplir los requisitos de contraste WCAG 2.1 AA: una relación de contraste mínima de 4,5:1 para el texto normal y de 3:1 para el texto grande. Esto se aplica a la descripción del propósito, las etiquetas de los botones y los enlaces.
• Contraste de los botones. Los fondos de los botones deben tener suficiente contraste con el fondo del banner, y el texto de los botones debe tener suficiente contraste con el fondo del botón. Verifica ambas capas.
• Visibilidad de los enlaces. Los enlaces a tu política de cookies y a tu política de privacidad deben distinguirse visualmente del texto que los rodea, normalmente mediante color y subrayado.
• Fondo. El fondo del banner debe ofrecer un contraste suficiente con su entorno. Si tu banner se superpone al contenido de la página, asegúrate de que la superposición sea lo bastante opaca como para que el texto del banner sea legible independientemente del contenido subyacente.

Un enfoque habitual es usar un fondo blanco o muy claro para el banner, texto oscuro para la legibilidad y el color principal de tu marca para los botones. Esto suele generar relaciones de contraste sólidas y una apariencia limpia y profesional.

Texto y microtexto

El texto de tu banner de cookies debe ser legalmente suficiente, pero también legible para un público no técnico. El Considerando 39 del RGPD exige explícitamente que la información sobre el tratamiento de datos se proporcione en un «lenguaje claro y sencillo».

Titular

Manténlo simple y directo. Ejemplos eficaces:

• «Usamos cookies»
• «Preferencias de cookies»
• «Tus opciones de privacidad»

Evita el lenguaje vago o evasivo como «Valoramos tu privacidad»: no le dice al usuario nada accionable.

Descripción del propósito

En una a tres frases, explica qué cookies utilizas y por qué. Sé específico:

«Usamos cookies esenciales para que este sitio funcione. También nos gustaría usar cookies analíticas para entender cómo utilizas nuestro sitio, y cookies de marketing para mostrarte contenido relevante. Puedes aceptar todo, rechazar todo o gestionar tus preferencias.»

Es conciso, específico y accionable. Compáralo con el, lamentablemente, habitual:

«Este sitio web utiliza cookies para garantizar que obtengas la mejor experiencia. Al seguir usando este sitio, aceptas nuestro uso de cookies.»

El segundo ejemplo no es conforme: presupone el consentimiento a través de la navegación continuada (no válido bajo el RGPD), no especifica los propósitos y no ofrece una elección.

Etiquetas de los botones

Las etiquetas de los botones deben ser inequívocas:

• «Aceptar todo» y «Rechazar todo»: un lenguaje claro y paralelo
• «Gestionar preferencias» o «Personalizar»: para la opción de configuración
• Evita: «OK», «Entendido», «Continuar», «Comprendo»: son ambiguos y no constituyen un consentimiento específico

Diseño con enfoque mobile-first

Más del 60 % del tráfico web es móvil. Tu banner de cookies se verá en pantallas de apenas 320 píxeles de ancho. Si diseñas primero para escritorio y adaptas después para móvil, casi con toda seguridad acabarás con una experiencia móvil recargada e inutilizable.

Consideraciones de diseño para móvil:

• Apila los botones verticalmente. Las filas horizontales de botones que funcionan en escritorio se vuelven ilegibles en móvil. Apila los botones de aceptar, rechazar y configuración verticalmente con un diseño a ancho completo.
• Áreas táctiles. Los botones deben medir al menos 44x44 píxeles (WCAG 2.5.5, nivel AAA) o, como mínimo, 24x24 píxeles (WCAG 2.5.8, nivel AA). En móvil, cuanto más grandes, mejor: apunta a 48 píxeles o más de altura.
• Cobertura de pantalla. En móvil, un banner de cookies puede cubrir fácilmente entre el 60 % y el 80 % del área visible. Esto es aceptable para un aviso inicial, pero el banner no debe hacer que el sitio sea completamente inutilizable. Si usas una ventana modal superpuesta, asegúrate de que los usuarios puedan seguir identificando que están en el sitio correcto.
• Tamaño del texto. Nunca bajes de 14 píxeles para el texto del cuerpo ni de 12 píxeles para el texto secundario en móvil. Los usuarios no deberían tener que hacer zoom para leer tu banner.
• Comportamiento del desplazamiento. Si el contenido de tu banner supera la altura del área visible en móvil (especialmente el panel de preferencias), debe poder desplazarse dentro del banner. No permitas que el contenido del banner se extienda más allá de la pantalla sin forma de llegar a los botones de aceptar/rechazar.

UX de los interruptores de categorías

El panel de preferencias —la segunda capa de un banner por capas— es donde los usuarios toman decisiones granulares. El patrón estándar utiliza interruptores de categoría: un interruptor por cada categoría de cookies (necesarias, analíticas, marketing, preferencias), cada uno con una etiqueta y una descripción.

Directrices de diseño para los interruptores:

• Los estados visuales deben ser inequívocos. Activado (consentimiento otorgado) y desactivado (consentimiento denegado) deben distinguirse claramente mediante color, posición e, idealmente, una etiqueta («Activado» / «Desactivado» o una marca de verificación / una X). No dependas solo del color: eso falla con los usuarios daltónicos.
• Las cookies necesarias deben estar activadas y deshabilitadas. La categoría «Estrictamente necesarias» debe estar activada, con el interruptor visualmente deshabilitado (en gris o con un icono de candado), acompañada de una nota que explique que estas cookies no pueden desactivarse porque son imprescindibles para que el sitio funcione.
• El estado predeterminado de las categorías no esenciales debe ser desactivado. Los interruptores marcados previamente constituyen un consentimiento preseleccionado, algo prohibido explícitamente por la sentencia Planet49 del TJUE.
• Las descripciones de las categorías deben ser comprensibles para las personas. «Cookies analíticas» es una etiqueta. «Nos ayudan a entender cómo interactúan los visitantes con nuestro sitio web recopilando datos de uso anónimos» es una descripción. Proporciona ambas.
• Listas de cookies desplegables. Bajo cada categoría, ofrece una sección desplegable que enumere las cookies individuales: nombre, proveedor, propósito y duración. Este nivel de transparencia es cada vez más esperado por las autoridades de protección de datos.

Diseño del panel de configuración/preferencias

El panel de preferencias es un componente crítico. Cuando un usuario hace clic en «Gestionar preferencias», está interactuando activamente con sus opciones de privacidad: es el usuario al que quieres tratar con el mayor respeto.

• Encabezado claro. «Preferencias de cookies» o «Gestiona tu privacidad»: deja claro para qué sirve este panel.
• Botón de guardar. Un botón destacado de «Guardar preferencias» que confirme las elecciones granulares del usuario. Este botón debe ser fácilmente accesible sin necesidad de un desplazamiento excesivo.
• Aceptar todo y Rechazar todo deben seguir disponibles. Incluso en el panel de preferencias, ofrece botones de acceso directo para aceptar todo o rechazar todo. Algunos usuarios abren el panel por curiosidad, pero aun así quieren una acción rápida.
• Comportamiento al cerrar. Si un usuario cierra el panel de preferencias sin guardar, trátalo como si no se hubiera otorgado consentimiento: no establezcas cookies no esenciales. No atrapes a los usuarios en el panel.

Personalización de marca manteniendo el cumplimiento

Tu banner de cookies debe sentirse como parte de tu sitio web, no como una intrusión de terceros. La mayoría de las plataformas de gestión del consentimiento permiten personalizar colores, fuentes, ubicación del logotipo y textos. Usa esto para alinear el banner con la identidad de tu marca.

Sin embargo, la personalización de marca no debe comprometer el cumplimiento:

• Puedes usar los colores de tu marca, pero los botones deben conservar el mismo peso visual.
• Puedes usar la fuente de tu marca, pero el texto debe seguir siendo legible en los tamaños utilizados.
• Puedes añadir tu logotipo, pero no debe empujar el contenido crítico (descripción del propósito, botones) por debajo del pliegue.
• Puedes personalizar los textos, pero deben seguir siendo específicos, precisos y completos.

Requisitos de accesibilidad para los banners de cookies

Un banner de cookies que no es accesible no es conforme, ni bajo la ley de privacidad (el usuario no podría dar un consentimiento informado si no puede percibir u operar el banner) ni bajo la ley de accesibilidad (la Ley Europea de Accesibilidad y las leyes nacionales contra la discriminación por discapacidad).

Requisitos WCAG AA

• Navegación por teclado. Todos los elementos interactivos —botones, interruptores, enlaces, iconos de cierre— deben ser accesibles y operables mediante teclado. El orden de tabulación debe ser lógico (normalmente: texto del propósito, luego rechazar, luego aceptar y luego gestionar preferencias).
• Gestión del foco. Cuando aparece el banner, el foco debe desplazarse hacia él (o debe anunciarse). Cuando se descarta el banner, el foco debe volver al contenido principal. Los indicadores de foco deben ser visibles.
• Compatibilidad con lectores de pantalla. El banner debe usar roles y etiquetas ARIA apropiados. Usa role="dialog" y aria-label="Cookie consent" para el contenedor del banner. Los botones deben tener nombres accesibles. Los estados de los interruptores deben anunciarse (aria-checked).
• Contraste de color. Todos los textos y elementos interactivos deben cumplir las relaciones de contraste WCAG 2.1 AA (4,5:1 para el texto normal, 3:1 para el texto grande y los componentes de la interfaz).
• Sin trampas de teclado. Los usuarios deben poder alejarse del banner. Aunque una ventana modal superpuesta puede restringir el foco al banner (el atrapamiento del foco en las modales es un patrón aceptado), siempre debe existir una forma de descartar el banner y llegar al contenido de la página.
• Movimiento. Si el banner usa animaciones (deslizamiento, desvanecimiento), respeta la consulta de medios prefers-reduced-motion y ofrece una alternativa con movimiento reducido o sin movimiento.

Cómo probar la accesibilidad de tu banner

1. Navega por todo el banner usando únicamente el teclado (Tab, Enter, Espacio, Escape).
2. Pruébalo con un lector de pantalla (VoiceOver en macOS, NVDA en Windows).
3. Verifica el contraste de color con una herramienta como el WebAIM Contrast Checker.
4. Pruébalo con un zoom del 200 %: el banner debe seguir siendo usable.
5. Pruébalo en móvil con VoiceOver o TalkBack activado.

Pruebas e iteración

Un banner de cookies no es un elemento que se configura y se olvida. El comportamiento de los usuarios, las normativas y el uso de cookies de tu sitio cambian con el tiempo. Planifica pruebas continuas:

• Tasas de consentimiento. Registra qué porcentaje de usuarios acepta, rechaza o personaliza. Si tu tasa de rechazo es sospechosamente baja (por debajo del 10 %), tu banner podría estar usando patrones oscuros, de forma intencionada o no.
• Tasas de interacción. Registra cuántos usuarios interactúan con el panel de preferencias. Una baja participación puede indicar que la opción «Gestionar preferencias» no es lo bastante visible.
• Pruebas A/B. Prueba diferentes textos, etiquetas de botones y diseños. El objetivo no es maximizar las tasas de consentimiento, sino maximizar las tasas de consentimiento informado. Un banner con el que más usuarios interactúan es un mejor banner.
• Actualizaciones normativas. Monitorea las directrices de tus autoridades de protección de datos pertinentes. Las interpretaciones de aplicación evolucionan, y tu banner debe evolucionar con ellas.
• Auditorías de cookies. Escanea tu sitio regularmente en busca de nuevas cookies. Si añades una nueva herramienta de analítica o un píxel de marketing, las categorías de tu banner deben actualizarse para reflejarlo.

Passiro ofrece escaneo automatizado de cookies y análisis de tasas de consentimiento para ayudarte a mantener tu banner preciso y eficaz. Descubre más sobre la gestión del consentimiento de Passiro.