Diferencia entre revisiones de «Principio 1/1.4 Distinguible/1.4.3-A»

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
(No se muestran 4 ediciones intermedias del mismo usuario)
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.2
|wcag_version=2.0
|wcag_principio=1_Perceptible
|wcag_principio=1_Perceptible
|wcag_principio_url=Principio_1
|wcag_principio_url=Principio_1
|wcag_pauta=1.4_Facilitar_ver_y_escuchar_contenido
|wcag_pauta=1.4_Distinguible
|wcag_pauta_url=Principio_1/1.4_Facilitar_ver_y_escuchar_contenido
|wcag_pauta_url=Principio_1/1.4_Distinguible
|wcag_grupo=Contraste
|wcag_grupo=Contraste
|wcag_subgrupo=Texto_normal
|wcag_subgrupo=Texto_normal
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. La presentación visual de texto e imágenes de texto tiene una relación de contraste mínima de 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: Uso de una relación de contraste de 4.5:1</li>
<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: Proveer alternativa para ajustar contraste</li>
<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: Fallo al no cumplir contraste mínimo</li>
<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=
<span class="paso-badge">Nota: </span> puede usarse cualquiera de los dos métodos o combinarlos.
1. Usa la herramienta  ‘’’[https://www.tpgi.com/color-contrast-checker/ Colour Contrast Analyser]’’’
<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>
<li><span class="paso-badge">Paso 2.</span> Medir contraste con herramientas especializadas.</li>
Localizar todos los textos de tamaño normal de la página.
<li><span class="paso-badge">Paso 3.</span> Confirmar que el contraste mínimo es 4.5:1.</li>
</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>
</ol>
2. Usa 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>
Si se muestran inconsistencias, usar Colour Contrast Analyser</li>
</ol>


|wcag_resultado_evaluacion=
|wcag_resultado_evaluacion=
Línea 63: Línea 93:


|wcag_ejemplo_evaluacion=
|wcag_ejemplo_evaluacion=
Ejemplo accesible:
Se muestra un codigo HTML que presenta con un contraste adecuado entre fondo y primer plano.
<div class="accessibility-card">
<div class="accessibility-card">
<pre class="wcag-codigo-html">
<pre class="wcag-codigo-html">
Línea 70: Línea 100:
</div>
</div>


Ejemplo no accesible:
<div class="accessibility-card-error">
<pre class="wcag-codigo-html">
<p style="color:#999999; background:#FFFFFF;">Texto con contraste insuficiente.</p>
</pre>
</div>


|wcag_otras_herramientas_evaluacion=
|wcag_otras_herramientas_evaluacion=
<ul>
<ul>
<li>Colour Contrast Analyser</li>
<li>'''Revisión visual''': comprobar si el texto es difícil de leer sobre el fondo, especialmente en tamaños pequeños o colores claros.</li>
<li>Contrast checker WCAG</li>
<li>'''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.</li>
<li>Herramientas de inspección de navegador</li>
<li>'''Inspección del navegador''': revisar estilos CSS para identificar colores definidos en texto y fondo, incluidas clases, variables CSS o imágenes de fondo.</li>
<li>'''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.</li>
</ul>
</ul>
}}
}}

Revisión actual - 12:37 6 nov 2025

1.4.3-A. Contraste mínimo en texto normal

Discapacidades afectadas

Este criterio puede afectar a distintas personas con discapacidad. A continuación se indican las más relevantes.

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

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’’’

  1. Paso 1. Localizar todos los textos de tamaño normal de la página.
  2. 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

  1. Paso 1. Localizar los textos de tamaño normal (marcados como “small” en la columna “size”).
  2. Paso 2. Verificar que tienen un contraste mínimo de 4.5:1 (marcados con un check).
  3. Paso 3.
  4. Seleccionar cada elemento y comprobar que los colores calculados coinciden con los visibles en la página.
  5. 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

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

Comentarios

A continuación se muestran comentarios sobre el criterio 1.4.3-A. Contraste mínimo en texto normal

Loading comments...




Obtenido de «https://wikiwcag.udl.cat/index.php?title=Principio_1/1.4_Distinguible/1.4.3-A&oldid=3707»