Edición de la página como formulario
Enlace directo a la página del subcriterio en la wiki https://wikiwcag.udl.cat/Principio_1/1.4_Distinguible/1.4.3-A
b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.
2.1.2. Código HTML:
<!DOCTYPE html>
⚠️ PROBLEMA DE ACCESIBILIDAD 1.4.3-A: Este sitio tiene problemas graves de contraste
Mi Blog Personal
Compartiendo ideas y experiencias
Bienvenido a mi blog
Aquí encontrarás artículos sobre tecnología, diseño y desarrollo web.
Comparto mis experiencias y aprendizajes para ayudar a la comunidad.
Leer más artículos
El futuro del diseño web
El diseño web está en constante evolución. Las nuevas tecnologías
y tendencias nos permiten crear experiencias más ricas e interactivas
para los usuarios. Sin embargo, es fundamental no olvidar los principios
básicos de accesibilidad.
La accesibilidad no es solo una cuestión técnica, sino un derecho
fundamental que permite a todas las personas acceder a la información
en igualdad de condiciones.
Publicado el 15 de enero de 2025
Mejores prácticas en CSS
CSS ha evolucionado significativamente en los últimos años. Con
características como Grid, Flexbox y variables CSS, podemos crear
diseños más complejos y mantenibles.
Publicado el 10 de enero de 2025
⚠️ Problemas de contraste en este ejemplo:
Texto claro sobre fondo claro
Ratio: ~1.3:1 ❌
Gris claro sobre gris muy claro
Ratio: ~1.5:1 ❌
Casi el mismo color
Ratio: ~1.1:1 ❌
Texto claro sobre morado
Ratio: ~2.1:1 ❌
- Sección hero: Texto claro (#f0f0f0) sobre fondo claro amarillo - Ratio: 1.3:1
- Artículos: Texto gris (#c0c0c0) sobre fondo gris claro (#f5f5f5) - Ratio: 1.5:1
- Botón: Texto casi blanco (#f5f5f5) sobre fondo casi blanco (#e8e8e8) - Ratio: 1.1:1
- Sidebar: Texto claro (#e8e8e8) sobre morado medio - Ratio: 2.1:1
- Todos estos contrastes están por debajo del mínimo requerido de 4.5:1
Explicación del problema detectado:
El sitio utiliza combinaciones de colores con contraste insuficiente.
La sección hero tiene texto claro (#f0f0f0) sobre fondo amarillo claro
(ratio 1.3:1), los artículos usan gris claro (#c0c0c0) sobre gris muy
claro (#f5f5f5) con ratio de 1.5:1, el botón tiene colores casi idénticos
(ratio 1.1:1), y el sidebar usa texto claro sobre morado medio (ratio 2.1:1).
Todos estos valores están muy por debajo del mínimo requerido de 4.5:1.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
- Usuarios con baja visión no pueden leer el contenido con claridad.
- Personas con daltonismo tienen mayor dificultad distinguiendo texto.
- Usuarios mayores con visión reducida por edad no pueden acceder al contenido.
- En condiciones de luz brillante (exterior, ventanas), el texto se vuelve
prácticamente invisible.
- Causa fatiga visual incluso en usuarios sin discapacidad visual.
2.2.1. Evidencia de imagen:
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.
2.2.2 Código HTML:
<!DOCTYPE html>
✅ ACCESIBLE 1.4.3-A: Este sitio cumple con los requisitos de contraste mínimo
Mi Blog Personal
Compartiendo ideas y experiencias
Bienvenido a mi blog
Aquí encontrarás artículos sobre tecnología, diseño y desarrollo web.
Comparto mis experiencias y aprendizajes para ayudar a la comunidad.
Leer más artículos
El futuro del diseño web
El diseño web está en constante evolución. Las nuevas tecnologías
y tendencias nos permiten crear experiencias más ricas e interactivas
para los usuarios. Sin embargo, es fundamental no olvidar los principios
básicos de accesibilidad.
La accesibilidad no es solo una cuestión técnica, sino un derecho
fundamental que permite a todas las personas acceder a la información
en igualdad de condiciones.
Publicado el 15 de enero de 2025
Mejores prácticas en CSS
CSS ha evolucionado significativamente en los últimos años. Con
características como Grid, Flexbox y variables CSS, podemos crear
diseños más complejos y mantenibles.
Publicado el 10 de enero de 2025
✅ Contrastes correctos en este ejemplo:
Texto blanco sobre azul oscuro
Ratio: 7.2:1 ✅
Texto oscuro sobre blanco
Ratio: 14.8:1 ✅
Gris medio sobre blanco
Ratio: 5.3:1 ✅
Texto blanco sobre gris oscuro
Ratio: 14.8:1 ✅
- Header: Texto blanco (#ffffff) sobre negro (#000000) - Ratio: 21:1 ✅
- Hero: Texto blanco (#ffffff) sobre azul oscuro (#0652DD) - Ratio: 7.2:1 ✅
- Artículos: Texto oscuro (#2d3436) sobre blanco (#ffffff) - Ratio: 14.8:1 ✅
- Metadatos: Gris medio (#636e72) sobre blanco - Ratio: 5.3:1 ✅
- Sidebar: Texto blanco (#ffffff) sobre gris oscuro (#2d3436) - Ratio: 14.8:1 ✅
- Botón: Texto azul oscuro (#0652DD) sobre blanco (#ffffff) - Ratio: 7.2:1 ✅
- Todos los contrastes cumplen o superan el mínimo de 4.5:1
Los usuarios con baja visión pueden leer todo el contenido sin dificultad.
Explicación de la solución aplicada:
Implementa combinaciones de colores con contraste adecuado en todas las
secciones. Usa texto blanco sobre fondos oscuros (21:1 en header, 7.2:1
en hero, 14.8:1 en sidebar), texto oscuro sobre blanco en artículos (14.8:1),
y gris medio sobre blanco para metadatos (5.3:1). Todos los ratios cumplen
o superan ampliamente el requisito mínimo de 4.5:1, garantizando legibilidad
para usuarios con baja visión.
