Diferencia entre revisiones de «Principio 1/1.4 Distinguible/1.4.3-A»
De WCAG Wiki
Sin resumen de edición |
Sin resumen de edición |
||
| (No se muestra una edición intermedia del mismo usuario) | |||
| Línea 7: | Línea 7: | ||
|wcag_principio=1_Perceptible | |wcag_principio=1_Perceptible | ||
|wcag_principio_url=Principio_1 | |wcag_principio_url=Principio_1 | ||
|wcag_pauta=1. | |wcag_pauta=1.4_Distinguible | ||
|wcag_pauta_url=Principio_1/1. | |wcag_pauta_url=Principio_1/1.4_Distinguible | ||
|wcag_grupo=Contraste | |wcag_grupo=Contraste | ||
|wcag_subgrupo=Texto_normal | |wcag_subgrupo=Texto_normal | ||
| Línea 75: | Línea 75: | ||
2. | 2. Usa la herramienta '''[https://webaim.org/resources/contrastchecker/ Color contrast checker] | ||
<ol> | <ol> | ||
<li><span class="paso-badge">Paso 1.</span> | <li><span class="paso-badge">Paso 1.</span> | ||
Revisión actual - 12:37 6 nov 2025
1.4.3-A. Contraste mínimo en texto normal
- Nivel: AA
- Versión: 2.0
- Principio: 1_Perceptible
- Pauta: 1.4_Distinguible
- Grupo: Contraste
- Subgrupo: Texto_normal
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 normal (tamaño inferior a 18 puntos o a 14 puntos y negrita) y el texto normal en imágenes deben tener un contraste respecto al color de fondo de al menos 4.5:1
Comprensión del criterio
Descripción resumida
El texto y las imágenes de texto deben presentar un contraste suficiente respecto al fondo para garantizar su legibilidad.
Para texto normal (tamaño inferior a 18 puntos o a 14 puntos y negrita), se exige una relación de contraste mínima de 4.5:1.
Objetivo
Garantizar que el contenido textual pueda ser leído por personas con baja visión o con dificultades para percibir diferencias de color.
Importancia de cumplir el criterio
Un contraste insuficiente dificulta o impide la lectura del contenido, especialmente para usuarios con baja visión.
El texto más pequeño requiere mayor contraste para ser legible.
Referencias WCAG
- G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
- G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast
- F83: Failure due to using background images that do not provide sufficient contrast with foreground text (or images of text)
Recursos de apoyo
Consejos
- Verificar contraste 4.5:1 para texto normal.
- Se puede cumplir ofreciendo un modo de alto contraste.
- Evitar combinaciones de colores suaves o similares.
Evaluación del criterio
Tipo de evaluación
Evaluación Semiautomática
Procedimiento de evaluación
Nota: puede usarse cualquiera de los dos métodos o combinarlos.
1. Usa la herramienta ‘’’Colour Contrast Analyser’’’
- Paso 1. Localizar todos los textos de tamaño normal de la página.
- Paso 2.
Comprobar que presentan un contraste de al menos 4.5:1 con el fondo.
- a. Pulsar en el icono de “Foreground colour” y seleccionar el color del texto en la página.
- b. Pulsar en el icono de “Background colour” y seleccionar el color del fondo de la página.
- c. Comprobar que el “Contrast ratio” junto a “WCAG 2.1 results” es superior a 4.5:1.
2. Usa la herramienta Color contrast checker
- Paso 1. Localizar los textos de tamaño normal (marcados como “small” en la columna “size”).
- Paso 2. Verificar que tienen un contraste mínimo de 4.5:1 (marcados con un check).
- Paso 3.
- Seleccionar cada elemento y comprobar que los colores calculados coinciden con los visibles en la página.
- Paso 4. Si se muestran inconsistencias, usar Colour Contrast Analyser
Resultado esperado
El texto normal y las imágenes de texto presentan una relación de contraste mínima de 4.5:1 respecto al fondo.
Ejemplo ilustrativo
Se muestra un codigo HTML que presenta con un contraste adecuado entre fondo y primer plano.
<p style="color:#000000; background:#FFFFFF;">Texto con contraste adecuado.</p>
Otras herramientas de evaluación
- Revisión visual: comprobar si el texto es difícil de leer sobre el fondo, especialmente en tamaños pequeños o colores claros.
- Medición de contraste: usar herramientas de comprobación de contraste (Chrome DevTools, Colour Contrast Analyser, WebAIM Contrast Checker) para verificar una relación mínima de 4.5:1 entre texto y fondo.
- Inspección del navegador: revisar estilos CSS para identificar colores definidos en texto y fondo, incluidas clases, variables CSS o imágenes de fondo.
- Pruebas con filtros visuales: usar simuladores de baja visión o filtros de accesibilidad para asegurarse de que el texto sigue siendo legible en diferentes condiciones visuales.
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-A. Contraste mínimo en texto normal
Loading comments...
