Caso práctico, ejercicios y lista de comprobación

Es el momento de aplicar todo lo aprendido. En esta lección vas a revisar paso a paso el color, el contraste y la tipografía de una página, con las herramientas que usarías en tu trabajo. Después tienes ejercicios de autoevaluación con su solución y una lista de comprobación para tus propios proyectos.

Caso práctico: la cita previa del Ayuntamiento de Villanueva del Campo

El Ayuntamiento de Villanueva del Campo (municipio ficticio) ha estrenado diseño en su sede electrónica. Como administración pública, su web está dentro del ámbito del RD 1112/2018 (PDF, se abre en una ventana nueva) y debe cumplir el nivel AA. Te piden revisar la página de cita previa para el padrón: una cabecera con foto del pueblo y el título «Pide tu cita», un formulario con nombre, DNI, teléfono y un calendario de días disponibles, un botón «Confirmar cita» y un aviso de cookies.

Paso 1. Inventario de colores

Antes de medir nada, haces inventario. El panel «CSS Overview» de las herramientas de desarrollo de Chrome (o la inspección manual) te da la lista de colores en uso. Encuentras: texto #1A1A1A, enlaces y botón en el turquesa corporativo #1AA39A, texto de ayuda #999999, placeholders #A9A9A9, bordes de campo #CCCCCC, rojo de obligatorios #C62828, días libres del calendario en verde #4CAF50 y ocupados en gris #BDBDBD.

Paso 2. Medir el texto (1.4.3)

Elemento	Ratio	Resultado	Corrección propuesta
Texto blanco de 16 px en el botón turquesa	3,1:1	No cumple	Texto #1A1A1A sobre el turquesa (5,6:1) o fondo turquesa 700 #13766E con texto blanco (5,5:1)
Enlaces turquesa sobre blanco	3,1:1	No cumple	Turquesa 700 #13766E (5,5:1), subrayados
Texto de ayuda #999999	2,8:1	No cumple	#595959 (7,0:1)
Placeholder #A9A9A9	2,3:1	No cumple	Oscurecerlo y, mejor aún, mover el ejemplo a un texto de ayuda visible
Título blanco de 40 px sobre la foto	1,3:1 en el cielo (#CFE3F2)	No cumple	Capa negra del 60 % en la zona del título

El título de la cabecera es texto grande y solo necesita 3:1, pero en la zona del cielo ni siquiera llega. Como vimos en la lección sobre fondos complejos, la solución va en la plantilla.

Paso 3. Componentes y uso del color (1.4.11 y 1.4.1)

• Bordes de campo #CCCCCC: 1,6:1, incumple 1.4.11. Se cambian a #767676.
• Campos obligatorios señalados solo con la etiqueta en rojo: incumple 1.4.1. Se añade «(obligatorio)» al final de cada etiqueta.
• Calendario: los días libres en verde y los ocupados en gris se distinguen solo por el color (entre ellos hay 1,5:1). Se tachan los ocupados, se añade un icono a los libres y una leyenda con texto, y el nombre accesible de cada día dice «disponible» u «ocupado».
• Indicador de foco: el navegador muestra su contorno por defecto, que se ve, pero el diseño lo había eliminado con outline: none en los días del calendario. Se restaura.

Paso 4. Tipografía y adaptación (1.4.4, 1.4.10 y 1.4.12)

Pruebas el zoom al 200 % y al 400 % en una ventana de 1280 px y aplicas el bookmarklet de espaciado de texto. Hallazgos: el botón «Confirmar cita» tiene una altura fija y su texto se corta al 200 %; al 400 % el aviso de cookies ocupa casi toda la pantalla y tapa el formulario; con el espaciado aplicado, las etiquetas del calendario se superponen. Correcciones: min-height en lugar de height, un aviso de cookies que no ocupe más de una franja y se pueda cerrar, y celdas del calendario que crezcan con su contenido.

Paso 5. Modo oscuro y contraste forzado

La sede ofrece modo oscuro. Al activarlo compruebas que los enlaces turquesa 700 (#13766E) sobre el fondo #121212 bajan a 3,4:1: para el tema oscuro se usa el turquesa 300 (#65E6DB, 12,4:1). En el modo de contraste de Windows, el botón «Confirmar cita» se queda como texto suelto porque no tiene borde, y el icono del calendario, una imagen de fondo CSS de color oscuro, no se adapta a la paleta y desaparece sobre el fondo negro del tema. Se añade un borde transparente al botón y el icono pasa a SVG en línea.

Paso 6. Priorizar y comunicar

Ordenas los hallazgos por impacto: primero los que bloquean la tarea (botón ilegible, calendario que depende del color, aviso que tapa el formulario), después los que la dificultan (ayuda y placeholders, bordes, cabecera). Al equipo le explicas que la mitad de los problemas se resuelven en la paleta: cambiar el turquesa de enlaces, el gris de ayuda y el gris de bordes corrige todas las páginas de la sede de una vez.

Ejercicios de autoevaluación

Ejercicio 1

Un texto de 15 px está definido como negro con una opacidad del 50 % sobre fondo blanco. ¿Cumple 1.4.3?

Ver solución

No. El color resultante es #808080, con un ratio de 3,9:1. Un texto de 15 px es texto normal y necesita 4,5:1. Haría falta al menos un 54 % de opacidad (#757575, 4,6:1) o, mejor, un color sólido como #595959 (7,0:1).

Ejercicio 2

Un comercio electrónico tiene un botón rojo corporativo #E30613 con texto blanco de 16 px. El equipo da por hecho que «el rojo nunca cumple». ¿Tiene razón?

Ver solución

No. El texto blanco sobre #E30613 da 4,9:1, por encima de 4,5:1, así que cumple 1.4.3. No hay colores que cumplan o incumplan por su tono: se mide la luminancia de cada pareja. Lo que no debe hacerse es comunicar algo (un error, una oferta) solo con ese rojo.

Ejercicio 3

Un informe en la web muestra un gráfico circular con cinco sectores en tonos de azul y una leyenda con cuadraditos de color. ¿Qué criterios están en juego y cómo lo arreglarías?

Ver solución

1.4.1 Uso del color, porque la relación entre la leyenda y los sectores depende solo del color, y 1.4.11 Contraste no textual, porque los sectores contiguos y el fondo necesitan 3:1 entre sí. Solución: etiquetar cada sector directamente con su nombre y su valor, separar los sectores con una línea blanca o una trama y ofrecer los datos también en una tabla.

Ejercicio 4

Las tarjetas de noticias tienen height: 180px; overflow: hidden. Al ampliar el texto al 200 % el titular se corta. ¿Qué criterios incumple y cuál es la corrección?

Ver solución

Incumple 1.4.4 Cambio de tamaño del texto (se pierde contenido al ampliar) y, muy probablemente, 1.4.12 Espaciado del texto. La corrección es usar min-height en lugar de height y quitar overflow: hidden, de modo que la tarjeta crezca con su contenido.

Ejercicio 5

En el tema oscuro de una web, los enlaces usan el mismo azul #1565C0 que en el tema claro, ahora sobre fondo #121212. ¿Cumple? ¿Qué harías?

Ver solución

No cumple: da 3,3:1 sobre #121212, por debajo de 4,5:1. El tema oscuro necesita su propia variante del color de acento, más clara, por ejemplo #90CAF9 (10,7:1), y mantener el subrayado.

Ejercicio 6

Un responsable de contenidos pregunta si el RD 1112/2018 obliga a no justificar el texto y a limitar las líneas a 80 caracteres. ¿Qué le respondes?

Ver solución

No obliga: esos requisitos son del criterio 1.4.8 Presentación visual, de nivel AAA, y el RD 1112/2018, a través de la EN 301 549 (PDF, se abre en una ventana nueva), exige el nivel AA. Aun así, son recomendaciones excelentes para textos largos y su coste es mínimo, así que conviene adoptarlas en la guía de estilo.

Lista de comprobación

• Texto normal con al menos 4,5:1 y texto grande con al menos 3:1, en todos sus estados.
• Placeholders y textos de ayuda medidos como cualquier otro texto.
• Transparencias medidas con el color resultante, no con el color declarado.
• Texto sobre fotos, degradados y vídeos medido en el peor punto y protegido en la plantilla.
• Bordes de campos, iconos informativos e indicador de foco con al menos 3:1.
• Ninguna información depende solo del color: hay texto, icono, forma o subrayado.
• Enlaces del contenido subrayados.
• Paleta con matriz de combinaciones permitidas para cada fondo y cada tema.
• Jerarquía visual que coincide con los encabezados del HTML.
• Texto de lectura alineado a la izquierda, sin justificar, de 45-80 caracteres por línea.
• Zoom al 200 % sin pérdida de contenido y sin bloqueo del zoom en el móvil.
• Sin desplazamiento horizontal a 320 px CSS (zoom al 400 %).
• Espaciado de texto aplicado sin cortes ni superposiciones.
• Modo oscuro con su propia medición de contraste y variantes de acento.
• Botones e iconos visibles en el modo de contraste forzado de Windows.

Para seguir aprendiendo

• Understanding 1.4.3 Contrast (Minimum), W3C.
• Understanding 1.4.11 Non-text Contrast, W3C.
• Understanding 1.4.10 Reajuste de los elementos, W3C.
• Understanding 1.4.12 Text Spacing, W3C.
• forced-colors, documentación de MDN.