2526UFV1.4.3-B-001
Edición de la página como formulario
1. Información básica
Enlace directo a la página del subcriterio en la wiki https://wikiwcag.udl.cat/Principio_1/1.4_Distinguible/1.4.3-B
2. Ejemplos prácticos
2.1. Ejemplo NO accesible
a) Imagen
b) Enlace de donde se ha obtenido la imagen:
No se ha indicado ningún enlace.
2.1.2. Código HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>Texto con contraste insuficiente</h3>
<div style="background-color: #ffffff; color: #cccccc; padding: 20px; font-size: 18px;">
Este texto tiene muy poco contraste con el fondo.
Es difícil de leer para personas con baja visión.
</div>
<!-- Contraste: 1.6:1 - Se ve mal-->
</body>
</html>
Explicación del problema detectado:
El problema principal radica en la elección de colores para el texto y el fondo, específicamente el uso de un tono gris muy claro (#cccccc) sobre un fondo blanco puro (#ffffff). Esta combinación produce una relación de contraste muy baja de 1.6:1, la cual es inferior al ratio mínimo de 4.5:1 exigido por el criterio de nivel AA de las WCAG para texto regular.
Indica a que personas con discapacidad afecta y explicación de las barreras que causa
Afecta principalmente a personas con baja visión y daltonismo, quienes no pueden distinguir el texto del fondo, haciendo el contenido ilegible. También perjudica a cualquier usuario en situaciones de mucha luz ambiental (como bajo el sol), donde el bajo contraste hace que el texto sea invisible.
2.2. Ejemplo Accesible
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>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>Texto con buen contraste</h3>
<div style="background-color: #ffffff; color: #000000; padding: 20px; font-size: 18px;">
Este texto tiene un contraste adecuado y cumple la norma AA.
Es mucho más legible para todos los usuarios.
</div>
<!-- Contraste: 7:1 - Se ve my bien -->
</body>
</html>
Explicación de la solución aplicada:
Este ejemplo es accesible porque se ha corregido el color del texto a un negro (#000000) sobre el mismo fondo blanco, logrando un ratio de contraste de 7:1. Este valor supera ampliamente el mínimo de 4.5:1 exigido por el nivel AA de las WCAG, garantizando que el texto tenga suficiente luminosidad diferencial para ser leído cómodamente por la gran mayoría de usuarios, incluidas personas con pérdida de agudeza visual o daltonismo, y bajo diversas condiciones de iluminación.
