Diferencia entre revisiones de «Principio 1/1.4 Distinguible/1.4.3-B»
De WCAG Wiki
Sin resumen de edición |
Sin resumen de edición |
||
| Línea 1: | Línea 1: | ||
== | {{CriterioWCAG | ||
|id_wcag_criterio=1.4.3 | |||
|id_wcag_subcriterio=1.4.3-B | |||
|wcag_titulo_criterio=1.4.3-B. Contraste mínimo en texto grande | |||
|wcag_nivel=AA | |||
|wcag_version=2.2 | |||
|wcag_principio=1_Perceptible | |||
|wcag_principio_url=Principio_1 | |||
|wcag_pauta=1.4_Facilitar_ver_y_escuchar_contenido | |||
|wcag_pauta_url=Principio_1/1.4_Facilitar_ver_y_escuchar_contenido | |||
|wcag_grupo=Contraste | |||
|wcag_subgrupo=Texto_grande | |||
|wcag_discapacidades= | |||
<li class="discapacidad-item"> | |||
[[Archivo:Bajavision.png|20px|class=icon-discapacidad|alt=Baja visión]] | |||
<span class="discapacidad-texto">[[:Categoría:Discapacidad baja visión|Baja visión]]</span> – | |||
<span class="gravedad gravedad-grave">Barrera grave</span> | |||
< | </li> | ||
|wcag_lista_discapacidades= | |||
[[Categoría:Discapacidad baja visión]] | |||
|wcag_texto_criterioOAW= | |||
El texto grande (tamaño superior a 18 puntos o a 14 puntos y negrita) y el texto grande en imágenes deben tener un contraste respecto al color de fondo de al menos 3:1. | |||
</ | |wcag_descripcion_resumida= | ||
</ | El texto grande, incluyendo imágenes de texto, debe tener una relación de contraste mínima de 3:1 con su fondo para garantizar su legibilidad. | ||
Se considera texto grande aquel de 18 puntos o más, o de 14 puntos o más si está en negrita. | |||
|wcag_objetivo= | |||
Asegurar que los títulos, encabezados y texto destacado sean legibles para personas con baja visión, mediante un contraste adecuado. | |||
|wcag_importancia= | |||
El texto grande suele ser más legible, por lo que el requisito es menos estricto que para el texto normal. | |||
Un contraste insuficiente aún puede impedir que muchas personas puedan leer contenido importante. | |||
|wcag_referencias= | |||
<ul> | |||
<li>G145: Contraste mínimo 3:1 para texto grande</li> | |||
<li>G174: Ofrecer alternativas para modificar contraste</li> | |||
<li>F83: Fallo al no cumplir contraste mínimo</li> | |||
</ul> | |||
|wcag_recursos= | |||
<ul> | |||
<li>Contraste mínimo de 3:1 para texto grande.</li> | |||
<li>Evitar fondos con imágenes o colores similares al texto.</li> | |||
<li>Se puede cumplir proporcionando un modo de alto contraste.</li> | |||
<li>Recordatorio: 18pt ≈ 24px y 14pt ≈ 18.5px en CSS.</li> | |||
</ul> | |||
|wcag_tipo_evaluacion=Semiautomática | |||
|wcag_pasos_evaluacion= | |||
<ol class="paso-list"> | |||
<li><span class="paso-badge">Paso 1.</span> Identificar texto grande (títulos, encabezados, destacados).</li> | |||
<li><span class="paso-badge">Paso 2.</span> Medir contraste mínimo de 3:1 con herramientas.</li> | |||
<li><span class="paso-badge">Paso 3.</span> Confirmar que se mantiene el contraste en todos los estados (hover, focus, activo).</li> | |||
</ol> | |||
|wcag_resultado_evaluacion= | |||
El texto grande y las imágenes de texto presentan una relación de contraste mínima de 3:1 respecto al fondo. | |||
|wcag_ejemplo_evaluacion= | |||
Ejemplo accesible: | |||
<div class="accessibility-card"> | |||
<pre class="wcag-codigo-html"> | |||
<h1 style="color:#000000; background:#FFFFFF; font-size:24px;"> | |||
Título de sección claramente visible | |||
</h1> | |||
</pre> | |||
</div> | |||
Ejemplo no accesible: | |||
<div class="accessibility-card-error"> | |||
<pre class="wcag-codigo-html"> | |||
<h1 style="color:#777777; background:#FFFFFF; font-size:24px;"> | |||
Título con bajo contraste | |||
</h1> | |||
</pre> | |||
</div> | |||
|wcag_otras_herramientas_evaluacion= | |||
<ul> | |||
<li>Colour Contrast Analyser (TPGi)</li> | |||
<li>WCAG Color Contrast Checker</li> | |||
<li>Herramientas del navegador</li> | |||
</ul> | |||
}} | |||
Revisión del 19:00 4 nov 2025
1.4.3-B. Contraste mínimo en texto grande
- Nivel: AA
- Versión: 2.2
- Principio: 1_Perceptible
- Pauta: 1.4_Facilitar_ver_y_escuchar_contenido
- Grupo: Contraste
- Subgrupo: Texto_grande
Discapacidades afectadas
Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.
-
Baja visión –
Barrera grave
Enunciado del criterio (Observatorio de Accesibilidad Web)
- El texto grande (tamaño superior a 18 puntos o a 14 puntos y negrita) y el texto grande en imágenes deben tener un contraste respecto al color de fondo de al menos 3:1.
Comprensión del criterio
Descripción resumida
El texto grande, incluyendo imágenes de texto, debe tener una relación de contraste mínima de 3:1 con su fondo para garantizar su legibilidad.
Se considera texto grande aquel de 18 puntos o más, o de 14 puntos o más si está en negrita.
Objetivo
Asegurar que los títulos, encabezados y texto destacado sean legibles para personas con baja visión, mediante un contraste adecuado.
Importancia de cumplir el criterio
El texto grande suele ser más legible, por lo que el requisito es menos estricto que para el texto normal.
Un contraste insuficiente aún puede impedir que muchas personas puedan leer contenido importante.
Referencias WCAG
- G145: Contraste mínimo 3:1 para texto grande
- G174: Ofrecer alternativas para modificar contraste
- F83: Fallo al no cumplir contraste mínimo
Recursos de apoyo
- Contraste mínimo de 3:1 para texto grande.
- Evitar fondos con imágenes o colores similares al texto.
- Se puede cumplir proporcionando un modo de alto contraste.
- Recordatorio: 18pt ≈ 24px y 14pt ≈ 18.5px en CSS.
Evaluación del criterio
Tipo de evaluación
Evaluación Semiautomática
Procedimiento de evaluación
- Paso 1. Identificar texto grande (títulos, encabezados, destacados).
- Paso 2. Medir contraste mínimo de 3:1 con herramientas.
- Paso 3. Confirmar que se mantiene el contraste en todos los estados (hover, focus, activo).
Resultado esperado
El texto grande y las imágenes de texto presentan una relación de contraste mínima de 3:1 respecto al fondo.
Ejemplo ilustrativo
Ejemplo accesible:
<h1 style="color:#000000; background:#FFFFFF; font-size:24px;"> Título de sección claramente visible </h1>
Ejemplo no accesible:
<h1 style="color:#777777; background:#FFFFFF; font-size:24px;"> Título con bajo contraste </h1>
Otras herramientas de evaluación
- Colour Contrast Analyser (TPGi)
- WCAG Color Contrast Checker
- Herramientas del navegador
Ejemplos accesibles y no accesibles creados por alumnos
<!DOCTYPE html>
⚠️ PROBLEMA 3.3.2-C: Este formulario NO tiene etiquetas ni instrucciones claras
Reserva de Hotel
⚠️ Problemas de este formulario:
- No hay etiquetas
<label>para ningún campo - Algunos placeholders son ambiguos ("Código" - ¿qué código?)
- No se indica qué campos son obligatorios
- No hay instrucciones sobre el formato esperado
- El select dice "Selecciona" pero ¿seleccionar qué?
- Un campo no tiene ni placeholder ni etiqueta (campo de email)
- No hay indicación de formato de fecha específico
- No se explica para qué sirve cada campo
<!DOCTYPE html>
✅ ACCESIBLE 3.3.2-C: Este formulario tiene etiquetas e instrucciones claras
Reserva de Hotel
Complete el siguiente formulario para reservar su estadía
Nota: Los campos marcados con * son obligatorios
✅ Implementación correcta:
- Cada campo tiene una etiqueta
<label>clara asociada - Los campos obligatorios están claramente marcados con *
- Hay instrucciones específicas sobre formato y contenido esperado
- Los selectores tienen opciones descriptivas, no ambiguas
- Se explica el propósito de cada campo cuando no es obvio
- Se proporcionan ejemplos en los placeholders
- Hay una nota inicial explicando la convención de campos obligatorios
- Se usan atributos ARIA apropiados (aria-required, aria-describedby)
Comentarios
A continuación se muestran comentarios sobre el criterio 1.4.3-B. Contraste mínimo en texto grande
Loading comments...
