Diferencia entre revisiones de «2526UPSA1.4.3-A-000»

De WCAG Wiki
VisualWikitexto
202526UPSA18 (discusión | contribs.)
alumnos
5 ediciones
1.4.3-A ejemplos NOA y ACC (contraste mínimo)
 
202526UFV20 (discusión | contribs.)
alumnos
10 ediciones
Sin resumen de edición
 
Línea 5: Línea 5:
|curso_academico=2025-26
|curso_academico=2025-26
|enlace=https://wikiwcag.udl.cat/Principio_1/1.4_Distinguible/1.4.3-A
|enlace=https://wikiwcag.udl.cat/Principio_1/1.4_Distinguible/1.4.3-A
|noa_barrera_evidencia_html=<nowiki>
|noa_barrera_evidencia_img=2025 26 UFV 1.1.1-A NOA.png
<div style="font-family: Arial, sans-serif; background:#ffffff; padding:16px; max-width:700px;">
|noa_barrera_evidencia_html=<!DOCTYPE html>
  <h2 style="color:#bdbdbd; margin-top:0;">Aviso importante</h2>
<html lang="es">
  <p style="color:#c2c2c2; font-size:16px;">
<head>
    El plazo de matrícula termina el viernes a las 14:00.
    <meta charset="UTF-8">
  </p>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <p style="color:#c8c8c8; font-size:14px;">
    <title>Blog - NO Accesible 1.4.3-A</title>
    Revisa la documentación antes de enviar la solicitud.
    <style>
  </p>
        * {
</div>
            margin: 0;
</nowiki>
            padding: 0;
|noa_barrera_explicacion=El texto utiliza grises muy claros sobre fondo blanco, por lo que el contraste es insuficiente para texto normal y no cumple el contraste mínimo exigido. Esto hace que el contenido sea difícil de leer.
            box-sizing: border-box;
|noa_barrera_usuarios=Afecta a personas con baja visión, usuarios mayores y a cualquiera que use la pantalla con reflejos o brillo bajo (por ejemplo, móvil en exterior). La barrera es que el texto “se pierde” con el fondo y obliga a forzar la vista o impide leer la información.
        }
|acc_barrera_evidencia_html=<nowiki>
       
<div style="font-family: Arial, sans-serif; background:#ffffff; padding:16px; max-width:700px;">
        body {
  <h2 style="color:#111111; margin-top:0;">Aviso importante</h2>
            font-family: Arial, sans-serif;
  <p style="color:#1a1a1a; font-size:16px;">
            line-height: 1.6;
    El plazo de matrícula termina el viernes a las 14:00.
        }
  </p>
       
  <p style="color:#1a1a1a; font-size:14px;">
        header {
    Revisa la documentación antes de enviar la solicitud.
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  </p>
            color: white;
</div>
            padding: 2rem;
</nowiki>
            text-align: center;
|acc_barrera_explicacion=Se usa texto oscuro sobre fondo claro, manteniendo un contraste suficiente para que el contenido sea legible en texto normal, cumpliendo el contraste mínimo.
        }
       
        .alert {
            background-color: #e74c3c;
            color: white;
            padding: 1rem;
            text-align: center;
            font-weight: bold;
        }
       
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
        }
       
        .hero {
            background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
            padding: 3rem;
            border-radius: 10px;
            margin-bottom: 2rem;
        }
       
        .hero h2 {
            color: #f0f0f0;
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }
       
        .hero p {
            color: #e8e8e8;
            font-size: 1.2rem;
            line-height: 1.8;
        }
       
        .article {
            background-color: #f5f5f5;
            padding: 2rem;
            margin-bottom: 2rem;
            border-radius: 8px;
        }
       
        .article h3 {
            color: #b8b8b8;
            margin-bottom: 1rem;
            font-size: 1.5rem;
        }
       
        .article p {
            color: #c0c0c0;
            margin-bottom: 1rem;
        }
       
        .article .meta {
            color: #d3d3d3;
            font-size: 0.9rem;
        }
       
        .sidebar {
            background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%);
            padding: 2rem;
            border-radius: 8px;
        }
       
        .sidebar h3 {
            color: #ddd;
            margin-bottom: 1rem;
        }
       
        .sidebar ul {
            list-style: none;
        }
       
        .sidebar ul li {
            margin-bottom: 0.8rem;
        }
       
        .sidebar ul li a {
            color: #e8e8e8;
            text-decoration: none;
        }
       
        .button {
            display: inline-block;
            padding: 0.8rem 2rem;
            background-color: #e8e8e8;
            color: #f5f5f5;
            text-decoration: none;
            border-radius: 5px;
            margin-top: 1rem;
        }
       
        .warning-section {
            background-color: #fff3cd;
            border-left: 4px solid #ffc107;
            padding: 1.5rem;
            margin: 2rem 0;
        }
       
        .contrast-examples {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1rem;
            margin-top: 1rem;
        }
       
        .contrast-box {
            padding: 1.5rem;
            border-radius: 5px;
            text-align: center;
        }
       
        .contrast-box .ratio {
            font-size: 0.9rem;
            margin-top: 0.5rem;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="alert">
        ⚠️ PROBLEMA DE ACCESIBILIDAD 1.4.3-A: Este sitio tiene problemas graves de contraste
    </div>
   
    <header>
        <h1>Mi Blog Personal</h1>
        <p>Compartiendo ideas y experiencias</p>
    </header>
   
    <div class="container">
        <div class="hero">
            <h2>Bienvenido a mi blog</h2>
            <p>Aquí encontrarás artículos sobre tecnología, diseño y desarrollo web.
            Comparto mis experiencias y aprendizajes para ayudar a la comunidad.</p>
            <a href="#" class="button">Leer más artículos</a>
        </div>
       
        <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 2rem;">
            <div>
                <article class="article">
                    <h3>El futuro del diseño web</h3>
                    <p>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.</p>
                    <p>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.</p>
                    <p class="meta">Publicado el 15 de enero de 2025</p>
                </article>
               
                <article class="article">
                    <h3>Mejores prácticas en CSS</h3>
                    <p>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.</p>
                    <p class="meta">Publicado el 10 de enero de 2025</p>
                </article>
            </div>
           
            <aside class="sidebar">
                <h3>Artículos populares</h3>
                <ul>
                    <li><a href="#">Introducción a React</a></li>
                    <li><a href="#">CSS Grid en profundidad</a></li>
                    <li><a href="#">JavaScript moderno</a></li>
                    <li><a href="#">Accesibilidad web</a></li>
                </ul>
            </aside>
        </div>
       
        <div class="warning-section">
            <h3 style="color: #856404; margin-bottom: 1rem;">⚠️ Problemas de contraste en este ejemplo:</h3>
           
            <div class="contrast-examples">
                <div class="contrast-box" style="background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);">
                    <p style="color: #f0f0f0; font-weight: bold;">Texto claro sobre fondo claro</p>
                    <p class="ratio" style="color: #856404;">Ratio: ~1.3:1 ❌</p>
                </div>
               
                <div class="contrast-box" style="background-color: #f5f5f5;">
                    <p style="color: #c0c0c0; font-weight: bold;">Gris claro sobre gris muy claro</p>
                    <p class="ratio" style="color: #856404;">Ratio: ~1.5:1 ❌</p>
                </div>
               
                <div class="contrast-box" style="background-color: #e8e8e8;">
                    <p style="color: #f5f5f5; font-weight: bold;">Casi el mismo color</p>
                    <p class="ratio" style="color: #856404;">Ratio: ~1.1:1 ❌</p>
                </div>
               
                <div class="contrast-box" style="background: linear-gradient(135deg, #a29bfe 0%, #6c5ce7 100%);">
                    <p style="color: #e8e8e8; font-weight: bold;">Texto claro sobre morado</p>
                    <p class="ratio" style="color: #856404;">Ratio: ~2.1:1 ❌</p>
                </div>
            </div>
           
            <ul style="margin-top: 1.5rem; margin-left: 2rem; color: #856404;">
                <li>Sección hero: Texto claro (#f0f0f0) sobre fondo claro amarillo - Ratio: 1.3:1</li>
                <li>Artículos: Texto gris (#c0c0c0) sobre fondo gris claro (#f5f5f5) - Ratio: 1.5:1</li>
                <li>Botón: Texto casi blanco (#f5f5f5) sobre fondo casi blanco (#e8e8e8) - Ratio: 1.1:1</li>
                <li>Sidebar: Texto claro (#e8e8e8) sobre morado medio - Ratio: 2.1:1</li>
                <li><strong>Todos estos contrastes están por debajo del mínimo requerido de 4.5:1</strong></li>
            </ul>
        </div>
    </div>
</body>
</html>
|noa_barrera_explicacion=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.
|noa_barrera_usuarios=- 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.
|acc_barrera_evidencia_img=2025 26 UFV 1.1.1-A ACC.png
|acc_barrera_evidencia_html=<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog - ACCESIBLE 1.4.3-A</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
       
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
        }
       
        header {
            background: linear-gradient(135deg, #2d3436 0%, #000000 100%);
            color: white;
            padding: 2rem;
            text-align: center;
        }
       
        .alert {
            background-color: #27ae60;
            color: white;
            padding: 1rem;
            text-align: center;
            font-weight: bold;
        }
       
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
        }
       
        .hero {
            background: linear-gradient(135deg, #0984e3 0%, #0652DD 100%);
            padding: 3rem;
            border-radius: 10px;
            margin-bottom: 2rem;
        }
       
        .hero h2 {
            color: #ffffff;
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }
       
        .hero p {
            color: #ffffff;
            font-size: 1.2rem;
            line-height: 1.8;
        }
       
        .article {
            background-color: #ffffff;
            padding: 2rem;
            margin-bottom: 2rem;
            border-radius: 8px;
            border: 1px solid #ddd;
        }
       
        .article h3 {
            color: #2d3436;
            margin-bottom: 1rem;
            font-size: 1.5rem;
        }
       
        .article p {
            color: #2d3436;
            margin-bottom: 1rem;
        }
       
        .article .meta {
            color: #636e72;
            font-size: 0.9rem;
        }
       
        .sidebar {
            background-color: #2d3436;
            padding: 2rem;
            border-radius: 8px;
        }
       
        .sidebar h3 {
            color: #ffffff;
            margin-bottom: 1rem;
        }
       
        .sidebar ul {
            list-style: none;
        }
       
        .sidebar ul li {
            margin-bottom: 0.8rem;
        }
       
        .sidebar ul li a {
            color: #ffffff;
            text-decoration: none;
            transition: color 0.3s;
        }
       
        .sidebar ul li a:hover {
            color: #74b9ff;
            text-decoration: underline;
        }
       
        .button {
            display: inline-block;
            padding: 0.8rem 2rem;
            background-color: #ffffff;
            color: #0652DD;
            text-decoration: none;
            border-radius: 5px;
            margin-top: 1rem;
            font-weight: bold;
            border: 2px solid #ffffff;
        }
       
        .button:hover {
            background-color: #0652DD;
            color: #ffffff;
        }
       
        .success-section {
            background-color: #d4edda;
            border-left: 4px solid #28a745;
            padding: 1.5rem;
            margin: 2rem 0;
        }
       
        .contrast-examples {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1rem;
            margin-top: 1rem;
        }
       
        .contrast-box {
            padding: 1.5rem;
            border-radius: 5px;
            text-align: center;
            border: 2px solid #28a745;
        }
       
        .contrast-box .ratio {
            font-size: 0.9rem;
            margin-top: 0.5rem;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="alert">
        ✅ ACCESIBLE 1.4.3-A: Este sitio cumple con los requisitos de contraste mínimo
    </div>
   
    <header>
        <h1>Mi Blog Personal</h1>
        <p>Compartiendo ideas y experiencias</p>
    </header>
   
    <div class="container">
        <div class="hero">
            <h2>Bienvenido a mi blog</h2>
            <p>Aquí encontrarás artículos sobre tecnología, diseño y desarrollo web.
            Comparto mis experiencias y aprendizajes para ayudar a la comunidad.</p>
            <a href="#" class="button">Leer más artículos</a>
        </div>
       
        <div style="display: grid; grid-template-columns: 2fr 1fr; gap: 2rem;">
            <div>
                <article class="article">
                    <h3>El futuro del diseño web</h3>
                    <p>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.</p>
                    <p>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.</p>
                    <p class="meta">Publicado el 15 de enero de 2025</p>
                </article>
               
                <article class="article">
                    <h3>Mejores prácticas en CSS</h3>
                    <p>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.</p>
                    <p class="meta">Publicado el 10 de enero de 2025</p>
                </article>
            </div>
           
            <aside class="sidebar">
                <h3>Artículos populares</h3>
                <ul>
                    <li><a href="#">Introducción a React</a></li>
                    <li><a href="#">CSS Grid en profundidad</a></li>
                    <li><a href="#">JavaScript moderno</a></li>
                    <li><a href="#">Accesibilidad web</a></li>
                </ul>
            </aside>
        </div>
       
        <div class="success-section">
            <h3 style="color: #155724; margin-bottom: 1rem;">✅ Contrastes correctos en este ejemplo:</h3>
           
            <div class="contrast-examples">
                <div class="contrast-box" style="background: linear-gradient(135deg, #0984e3 0%, #0652DD 100%);">
                    <p style="color: #ffffff; font-weight: bold;">Texto blanco sobre azul oscuro</p>
                    <p class="ratio" style="color: #155724;">Ratio: 7.2:1 ✅</p>
                </div>
               
                <div class="contrast-box" style="background-color: #ffffff;">
                    <p style="color: #2d3436; font-weight: bold;">Texto oscuro sobre blanco</p>
                    <p class="ratio" style="color: #155724;">Ratio: 14.8:1 ✅</p>
                </div>
               
                <div class="contrast-box" style="background-color: #ffffff;">
                    <p style="color: #636e72; font-weight: bold;">Gris medio sobre blanco</p>
                    <p class="ratio" style="color: #155724;">Ratio: 5.3:1 ✅</p>
                </div>
               
                <div class="contrast-box" style="background-color: #2d3436;">
                    <p style="color: #ffffff; font-weight: bold;">Texto blanco sobre gris oscuro</p>
                    <p class="ratio" style="color: #155724;">Ratio: 14.8:1 ✅</p>
                </div>
            </div>
           
            <ul style="margin-top: 1.5rem; margin-left: 2rem; color: #155724;">
                <li>Header: Texto blanco (#ffffff) sobre negro (#000000) - Ratio: 21:1 ✅</li>
                <li>Hero: Texto blanco (#ffffff) sobre azul oscuro (#0652DD) - Ratio: 7.2:1 ✅</li>
                <li>Artículos: Texto oscuro (#2d3436) sobre blanco (#ffffff) - Ratio: 14.8:1 ✅</li>
                <li>Metadatos: Gris medio (#636e72) sobre blanco - Ratio: 5.3:1 ✅</li>
                <li>Sidebar: Texto blanco (#ffffff) sobre gris oscuro (#2d3436) - Ratio: 14.8:1 ✅</li>
                <li>Botón: Texto azul oscuro (#0652DD) sobre blanco (#ffffff) - Ratio: 7.2:1 ✅</li>
                <li><strong>Todos los contrastes cumplen o superan el mínimo de 4.5:1</strong></li>
            </ul>
           
            <p style="margin-top: 1rem; color: #155724; font-weight: bold;">
                Los usuarios con baja visión pueden leer todo el contenido sin dificultad.
            </p>
        </div>
    </div>
</body>
</html>
|acc_barrera_explicacion=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.
}}
}}

Revisión actual - 21:39 11 ene 2026

Edición de la página como formulario

1. Información básica

Id del criterio: 1.4.3 - Contraste (mínimo) (Nivel: AA)
Título del subcriterio: 1.4.3-A
Universidad participante: UPSA
Curso académico: 2025-26

Enlace directo a la página del subcriterio en la wiki https://wikiwcag.udl.cat/Principio_1/1.4_Distinguible/1.4.3-A


2. Ejemplos prácticos

2.1. Ejemplo NO accesible

2.1.1. Evidencia en imagen y enlace:
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> Blog - NO Accesible 1.4.3-A

⚠️ 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. 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> Blog - ACCESIBLE 1.4.3-A

✅ 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.





Obtenido de «https://wikiwcag.udl.cat/index.php?title=2526UPSA1.4.3-A-000&oldid=4304»