Textos e Imágenes

Normas de tipografía, espaciado, contraste y tratamiento de imágenes para garantizar la legibilidad y accesibilidad del contenido.

Tamaño y Tipografía

Nunca usar texto menor a 16 px para contenido principal.
Los usuarios deben poder ampliar el texto hasta 200% sin pérdida de funcionalidad (WCAG 1.4.4).
Usar unidades relativas (rem, em) en lugar de píxeles absolutos.

CSS — Tamaños relativos recomendados

/* ✓ Correcto: unidades relativas */
html  {{ font-size: 16px; }}
body  {{ font-size: 1rem;    }}
h1    {{ font-size: 2rem;    }}  /* 32px */
h2    {{ font-size: 1.5rem;  }}  /* 24px */
p     {{ font-size: 1rem;    }}  /* 16px */
small {{ font-size: 0.875rem; }} /* 14px — mínimo */

/* ✗ Incorrecto: píxeles fijos */
p {{ font-size: 14px; }}

Tipografías recomendadas

System-UI: SF Pro (Mac), Segoe UI (Windows), Roboto (Android)
Fuentes legibles: Open Sans, Lato, Source Sans Pro
Evitar: Comic Sans, fuentes decorativas, script o handwriting
Evitar fuentes donde I, l y 1 son visualmente iguales

Interlineado y Espaciado

CSS — Espaciado accesible

body {{
  line-height: 1.6;        /* Mínimo 1.5, ideal 1.6–1.8 */
  letter-spacing: 0.05em; /* Espaciado entre caracteres */
  word-spacing: 0.16em;   /* Espaciado entre palabras */
}}
p {{ margin-bottom: 1.5em; }}

p, li, td {{ max-width: 72ch; }} /* 45–75 chars por línea */

Nunca usar texto justificado

Crea espacios irregulares que dificultan la lectura, especialmente para personas con dislexia.

Alineación y Capitalización

Alineaciones de texto y su uso recomendado
Alineación	Uso	Estado
`text-align: left`	Para la mayoría del contenido	✓ Recomendado
`text-align: center`	Solo títulos cortos o frases aisladas	Con moderación
`text-align: justify`	Nunca en contenido web	✗ Prohibido

CSS — Mayúsculas accesibles

/* ✓ Correcto: CSS transforma, el HTML queda legible */
.label {{ text-transform: uppercase; }}

/* ✗ Incorrecto: escribir MAYÚSCULAS en el HTML */
/* <button>ENVIAR</button> — Mal  */
/* <button>Enviar</button>  — Bien */

Contraste de Color

Ratios de contraste mínimos WCAG 2.2
Tipo de texto	Nivel AA	Nivel AAA
Texto normal	4.5 : 1	7 : 1
Texto grande (18pt o 14pt negrita)	3 : 1	4.5 : 1
Componentes UI	3 : 1	—

Herramientas recomendadas

WebAIM Contrast Checker
Colour Contrast Analyser (aplicación de escritorio)
axe DevTools y Lighthouse (extensiones del navegador)

Consultar la sección "Uso del Color Accesible" del Manual de Identidad de la Universidad del Valle para verificar los colores institucionales.

Normas para Imágenes

El texto alternativo es OBLIGATORIO para todas las imágenes.

Máximo 125 caracteres idealmente.
Describir el contenido: "Gráfico de ventas Q1" no "imagen de gráfico".
No usar "imagen de", "foto de", "gráfico de".
Imágenes decorativas: alt="" (vacío, siempre presente).

HTML — Alt text correcto e incorrecto

<!-- ✓ Correcto -->
<img src="ventas.png"
     alt="Gráfico de barras: ventas Q1 aumentaron 35%">

<!-- ✓ Imagen decorativa -->
<img src="deco.png" alt="" role="presentation">

<!-- ✗ Sin alt — Muy mal -->
<img src="ventas.png">

HTML — Imagen responsive con lazy loading

<img
  src="imagen-800.jpg"
  srcset="imagen-400.jpg 400w, imagen-800.jpg 800w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Descripción significativa"
  loading="lazy"
  width="800" height="500">

Evitar texto importante dentro de imágenes

No es accesible para lectores de pantalla, no escala con zoom y no puede traducirse automáticamente.