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 |
||
| Línea 4: | Línea 4: | ||
|wcag_titulo_criterio=1.4.3-A. Contraste mínimo en texto normal | |wcag_titulo_criterio=1.4.3-A. Contraste mínimo en texto normal | ||
|wcag_nivel=AA | |wcag_nivel=AA | ||
|wcag_version=2. | |wcag_version=2.0 | ||
|wcag_principio=1_Perceptible | |wcag_principio=1_Perceptible | ||
|wcag_principio_url=Principio_1 | |wcag_principio_url=Principio_1 | ||
| Línea 23: | Línea 23: | ||
|wcag_texto_criterioOAW= | |wcag_texto_criterioOAW= | ||
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 | 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 | ||
|wcag_descripcion_resumida= | |wcag_descripcion_resumida= | ||
El texto y las imágenes de texto deben presentar un contraste suficiente respecto al fondo para garantizar su legibilidad. | El texto y las imágenes de texto deben presentar un contraste suficiente respecto al fondo para garantizar su legibilidad. | ||
Para texto normal, se exige una relación de contraste mínima de 4.5:1. | |||
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. | |||
|wcag_objetivo= | |wcag_objetivo= | ||
| Línea 34: | Línea 35: | ||
|wcag_importancia= | |wcag_importancia= | ||
Un contraste insuficiente dificulta o impide la lectura del contenido, especialmente para usuarios con baja visión. | 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. | El texto más pequeño requiere mayor contraste para ser legible. | ||
|wcag_referencias= | |wcag_referencias= | ||
<ul> | <ul> | ||
<li>G18: | <li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G18 G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text]</span></li> | ||
<li>G174: | <li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G174 G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast]</span></li> | ||
<li>F83: | <li><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/failures/F83 F83: Failure due to using background images that do not provide sufficient contrast with foreground text (or images of text)]</span></li> | ||
</ul> | </ul> | ||
|wcag_recursos= | |wcag_recursos= | ||
<strong> Consejos </strong> | |||
<ul> | <ul> | ||
<li>Verificar contraste 4.5:1 para texto normal.</li> | <li>Verificar contraste 4.5:1 para texto normal.</li> | ||
| Línea 53: | Línea 56: | ||
|wcag_pasos_evaluacion= | |wcag_pasos_evaluacion= | ||
'''Dos opciones''' | |||
<small>Nota: puede usarse cualquiera de los dos métodos o combinarlos.</small> | |||
1. Usa la herramienta ‘’’[https://www.tpgi.com/color-contrast-checker/ Colour Contrast Analyser]’’’ | |||
<ol class="paso-list"> | |||
<li><span class="paso-badge">Paso 1.</span> | |||
Localizar todos los textos de tamaño normal de la página. | |||
</li> | |||
<li><span class="paso-badge">Paso 2.</span> | |||
Comprobar que presentan un contraste de al menos <strong>4.5:1</strong> con el fondo. | |||
<ul> | |||
<li>a. Pulsar en el icono de <strong>“Foreground colour”</strong> y seleccionar el color del texto en la página.</li> | |||
<li>b. Pulsar en el icono de <strong>“Background colour”</strong> y seleccionar el color del fondo de la página.</li> | |||
<li>c. Comprobar que el <strong>“Contrast ratio”</strong> junto a <strong>“WCAG 2.1 results”</strong> es superior a <strong>4.5:1</strong>.</li> | |||
</ul> | |||
</li> | |||
</ol> | |||
2. Procedimiento de comprobación de WCAG - Color contrast checker: | |||
Usar la herramienta '''[https://webaim.org/resources/contrastchecker/ Color contrast checker] | |||
<ol> | |||
<li><span class="paso-badge">Paso 1.</span> | |||
Localizar los textos de tamaño normal (marcados como <em>“small”</em> en la columna <em>“size”</em>).</li> | |||
<li><span class="paso-badge">Paso 2.</span> | |||
Verificar que tienen un contraste mínimo de <strong>4.5:1</strong> (marcados con un check).</li> | |||
<li><span class="paso-badge">Paso 3.</span> | |||
<li>Seleccionar cada elemento y comprobar que los colores calculados coinciden con los visibles en la página.</li> | |||
<li><span class="paso-badge">Paso 4.</span> | |||
Para inconsistencias, usar Colour Contrast Analyser o la herramienta de selección de color en <strong>“Color tool”</strong>.</li> | |||
</ol> | |||
<ol class="paso-list"> | <ol class="paso-list"> | ||
<li><span class="paso-badge">Paso 1.</span> Identificar texto normal en la página.</li> | <li><span class="paso-badge">Paso 1.</span> Identificar texto normal en la página.</li> | ||
Revisión del 10:13 5 nov 2025
1.4.3-A. Contraste mínimo en texto normal
- Nivel: AA
- Versión: 2.0
- Principio: 1_Perceptible
- Pauta: 1.4_Facilitar_ver_y_escuchar_contenido
- 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
Dos opciones
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. Procedimiento de comprobación de WCAG - Color contrast checker:
Usar 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. Para inconsistencias, usar Colour Contrast Analyser o la herramienta de selección de color en “Color tool”.
- Paso 1. Identificar texto normal en la página.
- Paso 2. Medir contraste con herramientas especializadas.
- Paso 3. Confirmar que el contraste mínimo es 4.5:1.
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
Ejemplo accesible:
<p style="color:#000000; background:#FFFFFF;">Texto con contraste adecuado.</p>
Ejemplo no accesible:
<p style="color:#999999; background:#FFFFFF;">Texto con contraste insuficiente.</p>
Otras herramientas de evaluación
- Colour Contrast Analyser
- Contrast checker WCAG
- Herramientas de inspección de navegador
Ejemplos accesibles y no accesibles creados por alumnos
Comentarios
A continuación se muestran comentarios sobre el criterio 1.4.3-A. Contraste mínimo en texto normal
Loading comments...
