Elementos visuales y guía de estilo sencilla

Esta lección todavía está en pruebas: mejora con los comentarios de quienes la siguen. Si algo no está claro, hay que corregir la lección, no a ti.

Al final de esta lección, sabrás

preparar una guía de estilo sencilla: dos colores, una o dos fuentes, un nombre o un logo;
medir el contraste de tus colores y saber para qué puede servir cada uno;
elegir fuentes que tienes derecho a usar;
usar imágenes respetando sus derechos y los de las personas fotografiadas.

Por qué te interesa

Materiales que se parecen transmiten seriedad: mismos colores, mismas fuentes, mismo lugar para el nombre. Pero un color bonito puede volver ilegible un texto, una fuente encontrada en internet puede no ser libre, y una foto tomada de internet puede pertenecer a alguien. Una guía de estilo de una página lo resuelve todo de una vez, para todos tus documentos.

Antes de empezar


Necesitas	Tu procesador de textos o tu programa de presentaciones, la ficha de la guía de estilo (recurso) y tu asistente (opcional)
Costo	0 €: fuentes gratuitas e imágenes que tienes derecho a usar
Duración	50 minutos
Recordatorio	Una foto en la que se reconoce a alguien no se publica sin su autorización

Entenderlo en 3 minutos

Una guía de estilo sencilla:

dos colores (uno principal, uno de acento), más un color de texto y un fondo;
una o dos fuentes: una para los títulos, otra para el texto (o la misma);
un nombre o un logo, siempre en el mismo lugar;
reglas de uso: qué color para qué.

El contraste, según el W3C (normas de accesibilidad WCAG 2.2, leídas el 24/10/2026):

Texto	Contraste mínimo
Texto normal	4,5:1
Texto grande: al menos 18 pt, o 14 pt en negrita	3:1

Los umbrales no se redondean: 4,499:1 no basta para 4,5:1.

Nuestra guía de estilo de ejemplo, calculada con la fórmula del W3C (24/10/2026):

Colores	Contraste	Uso posible
Azul noche #1F3A5F sobre blanco	11,48:1	Títulos y texto
Gris oscuro #333333 sobre blanco	12,63:1	Texto normal
Naranja #E07A1F sobre blanco	3,01:1	Solo títulos grandes y decoración
Azul noche sobre naranja	3,81:1	Solo texto grande
Gris claro #C8C8C8 sobre blanco	1,67:1	Nunca para texto

Las fuentes. Según Google Fonts (24/10/2026), todas sus fuentes son de código abierto y gratuitas, se pueden usar con fines comerciales, y la mayoría tiene la licencia SIL Open Font License. Para cualquier otra fuente, lee su licencia.

Las imágenes:

tus propias fotos: lo más sencillo;
una persona reconocible: las reglas que siguen son las del derecho francés, y varían de un país a otro: comprueba las del lugar donde vives. Según la CNIL (autoridad francesa de protección de datos), el derecho a la propia imagen también se aplica en internet. Según service-public.gouv.fr (sitio oficial de la administración francesa), en principio hace falta su autorización por escrito antes de difundir su imagen, y una autorización precisa: en qué soporte, con qué fin, por cuánto tiempo (existen excepciones, ver más abajo: para un documento que tú creas, pide la autorización). Para un menor, la autorización de los padres debe obtenerse por escrito;
un banco de imágenes libres, como Wikimedia Commons: según Commons, casi todo allí es reutilizable, pero con condiciones (citar al autor, mencionar la licencia, a veces compartir una versión modificada con la misma licencia); la licencia figura en la página de cada archivo, y la Fundación Wikimedia no garantiza que sea correcta;
una imagen creada por una IA: es el tema del módulo 11.

Hagámoslo juntos

1Paso 1: Elegir los colores y las fuentes

Abre el recurso Ficha de la guía de estilo. Elige un color principal, un acento, un color de texto y un fondo. Si te faltan ideas:

Estoy preparando los materiales de [tu proyecto]. Propón 3 paletas sencillas: un color principal, un acento, un color de texto y un fondo, con sus códigos. Para cada color, calcula su contraste con el fondo según la fórmula del W3C, ejecutando el cálculo, y di si sirve para el texto normal (4,5:1), para el texto grande (3:1) o solo para la decoración.

Los cálculos de una IA se comprueban (módulo 1, lección 2): comprueba al menos un resultado con un comprobador de contraste en línea. Introduces el código del texto y el del fondo, y te da la relación de contraste (por ejemplo el Contrast Checker de WebAIM, en webaim.org/resources/contrastchecker/). Compáralo con 4,5:1 y con 3:1. En PowerPoint, según la ayuda de Microsoft, el Comprobador de accesibilidad detecta un contraste insuficiente solo en algunos casos: no ve, por ejemplo, un texto en un cuadro de texto transparente o colocado sobre el fondo de la diapositiva. Para esos casos, usa el comprobador de contraste.

2Paso 2: Completar la ficha

Anota los códigos, los contrastes y el uso de cada color. Anota las fuentes y su licencia.

3Paso 3: Un material de prueba

Haz un cartel de una página (formato A4) para una necesidad real, o para la velada del club de lectura: un título, tres datos, tu nombre o un logo, una imagen que tienes derecho a usar. Aplica la guía de estilo: nada fuera de sus colores y de sus fuentes.

4Paso 4: Los derechos de las imágenes

Para cada imagen del cartel, completa la parte 4 de la ficha: de dónde viene, su licencia o la autorización obtenida, y el crédito que hay que escribir. Escribe el crédito en el cartel, si se pide.

Ahora te toca a ti

Completa la ficha de la guía de estilo para tu proyecto.
Aplícala a un documento de la lección 2 y a la presentación de la lección 3.
Dale la parte 5 de la ficha a tu asistente la próxima vez que cree un archivo para ti.

Recursos para descargar

Ficha de la guía de estilo: colores y contrastes, fuentes y licencias, nombre o logo, imágenes y derechos, y la indicación que le das a tu asistente.

Comprobar

Funcionó si:

tu ficha de la guía de estilo cabe en una página, con los códigos y los contrastes medidos;
el texto normal alcanza al menos 4,5:1 sobre su fondo, y cada color tiene su uso;
tus fuentes tienen una licencia conocida;
cada imagen tiene un origen, una licencia o una autorización, y su crédito si hace falta.

Errores frecuentes:

un color elegido «porque es bonito», ilegible en el texto normal;
texto gris claro para la información «secundaria»;
una fuente descargada de un sitio desconocido, sin licencia;
una foto encontrada en internet, sin saber quién tiene los derechos;
la foto de un grupo publicada sin la autorización por escrito de las personas reconocibles (salvo casos particulares de las reglas francesas, por ejemplo una escena callejera en un lugar público donde no se destaca a nadie, sin fin comercial; para niños, la autorización por escrito de los padres siempre es necesaria).

Guardar y retomar

Guarda la ficha de la guía de estilo con tus plantillas (lecciones 2 y 3): todos tus materiales parten de ella.
Guarda constancia de las autorizaciones obtenidas para las fotos de personas.

Para ir más lejos

opcional

La página del W3C sobre el contraste mínimo, en inglés: en w3.org, «Understanding Success Criterion 1.4.3: Contrast (Minimum)».

Palabras nuevas

5 palabras explicadas

Palabra	Lo que significa
Guía de estilo	Las reglas visuales comunes a todos tus materiales: colores, fuentes, logo
Contraste	La diferencia de luminosidad entre el texto y el fondo, medida como una relación (por ejemplo 4,5:1)
Licencia	Las condiciones de uso de una fuente, una imagen o un texto
Crédito	La mención del autor y de la licencia, cuando la licencia lo pide
Derecho a la propia imagen	El derecho de una persona a negarse a que se publique su foto sin su autorización

Fecha, versión, fuentes Redactada el 24/10/2026. Comprobaciones del 24/10/2026:

contraste mínimo de 4,5:1 y de 3:1 para el texto grande (18 pt, o 14 pt en negrita), umbrales sin redondeo: w3.org, «Understanding Success Criterion 1.4.3: Contrast (Minimum)»;
Comprobador de accesibilidad y contraste insuficiente: support.microsoft.com, presentaciones de PowerPoint accesibles (página en francés), con los casos que no detecta;
comprobador de contraste (dos códigos de color de entrada, una relación de salida): webaim.org/resources/contrastchecker;
fuentes de Google Fonts de código abierto, gratuitas, uso comercial, licencia SIL Open Font License: developers.google.com/fonts/faq;
derecho a la propia imagen en internet, autorización antes de publicar, autorización de los padres para un menor: cnil.fr, «Le droit à l’image s’applique-t-il sur internet ?» (página en francés);
reutilización de los archivos de Wikimedia Commons (condiciones de las licencias, página del archivo, ausencia de garantía, otros derechos): commons.wikimedia.org, «Réutilisation de contenu hors de Wikimedia» (página en francés).

Los contrastes de la guía de estilo de ejemplo se calcularon con la fórmula del W3C (informe de pruebas, T51).