Presentación del curso en vídeo

0:00 Te damos la bienvenida

Te damos la bienvenida a Color, contraste y tipografía, el tercer curso del nivel 2 de la Certificación ADDAW de Accesibilidad Digital. Hablaremos de algo que todo el mundo ve y casi nadie mide. Es un curso para quien diseña, redacta, desarrolla o gestiona contenidos digitales.

0:17 Un fallo que se repite

El contraste insuficiente es uno de los fallos más repetidos de la web. El estudio anual WebAIM Million lo encuentra en cerca de 8 de cada 10 páginas de inicio analizadas. La buena noticia es que se mide de forma objetiva y se corrige con poco esfuerzo.

0:34 Cómo percibimos el color

Empezaremos por cómo percibimos el color. Para leer, lo que cuenta es la luminosidad, no el tono. Un rojo y un verde pueden parecer muy distintos y tener casi el mismo gris. Además, la edad, la pantalla y la luz del sol reducen el contraste que llega al ojo.

0:50 Contraste del texto

Después aprenderás a medir el contraste del texto. El criterio 1.4.3 pide 4,5 a 1 para el texto normal y 3 a 1 para el texto grande. Verás cómo se calcula, qué herramientas usar y por qué también cuentan los placeholders y los enlaces en todos sus estados.

1:09 Componentes y uso del color

El contraste no es solo cosa del texto. Los bordes de los campos, los iconos y el indicador de foco necesitan 3 a 1. Y ninguna información puede depender solo del color: añade texto, un icono o un subrayado. Por ejemplo, un campo obligatorio marcado en rojo necesita también la palabra obligatorio.

1:29 Fondos complejos

Luego llegan los casos difíciles: textos semitransparentes, degradados, fotografías y vídeos de fondo. Aprenderás a calcular el color que realmente se ve y a medir en el peor punto. Y descubrirás un truco sencillo: una capa negra del 60 % en la plantilla protege el texto blanco sobre cualquier foto.

1:50 Una paleta accesible

La mayoría de los fallos de contraste nacen en la paleta. Verás cómo conservar el color de marca ajustando su luminosidad, cómo crear escalas tonales del 50 al 900 y cómo documentar una matriz de combinaciones permitidas. Corregir unos pocos colores en la paleta puede eliminar cientos de errores a la vez.

2:09 Tipografía legible y adaptable

En tipografía empezaremos por lo esencial: letras distinguibles, una base de 16 píxeles y un interlineado de 1,5. Después comprobaremos que la persona pueda adaptar el texto. Debe poder ampliarlo al 200 %, leer sin desplazamiento horizontal a 320 píxeles y aplicar su propio espaciado sin que nada se corte.

2:31 Composición tipográfica

También veremos cómo componer el texto en la página. La jerarquía visual debe coincidir con la estructura de encabezados. El texto se lee mejor a la izquierda, sin justificar y con líneas de hasta 80 caracteres. Y cambiarás las fuentes de iconos por imágenes SVG, que no se rompen.

2:49 Modo oscuro y preferencias

Muchas personas configuran su sistema según sus necesidades. Aprenderás a respetar el modo oscuro, dando a cada tema su propio contraste. También a mantener visibles los botones con el contraste forzado de Windows, y a reducir el movimiento y las animaciones cuando alguien lo pide.

3:06 Por qué importa

Piensa en Carmen, de 72 años, que pide cita en su ayuntamiento desde el móvil, en plena calle. Un gris claro le impide terminar el trámite. El contraste ayuda a personas mayores, con baja visión y a cualquiera que lea al sol. Además, es obligatorio en el sector público y en servicios como la banca o el comercio electrónico.

3:26 Qué sabrás hacer

Al terminar sabrás medir y corregir el contraste, diseñar paletas y tipografías accesibles y revisar una página completa con una lista de comprobación. Te espera un caso práctico con una sede electrónica municipal, resuelto paso a paso. Abre tu navegador, ten a mano un comprobador de contraste y empecemos.