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

De WCAG Wiki
← Edición anterior
VisualWikitexto
Sin resumen de edición
Sin resumen de edición
 
(No se muestran 3 ediciones intermedias del mismo usuario)
Línea 1: Línea 1:
== '''1.4.3- B. 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''' ==
{{CriterioWCAG
'''A) EJEMPLO ACCESIBLE:'''
|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_Distinguible
|wcag_pauta_url=Principio_1/1.4_Distinguible
|wcag_grupo=Contraste
|wcag_subgrupo=Texto_grande


'''B) EJEMPLO NO ACCESIBLE:'''
|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><span lang="en">[https://www.w3.org/WAI/WCAG21/Techniques/general/G145 G145: Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text) and background behind the text]</span></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><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>
 
|wcag_recursos=
<strong> Consejos </strong>
<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=
<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">
<li><span class="paso-badge">Paso 1.</span>
Localizar todos los textos de tamaño grande de la página.
</li>
<li><span class="paso-badge">Paso 2.</span>
Comprobar que presentan un contraste de al menos <strong>3:1</strong> con el fondo:
<ul>
<li>a. Pulsar en el icono en la sección <strong>“Foreground colour”</strong> y seleccionar el color del texto en la página.</li>
<li>b. Pulsar en el icono en la sección <strong>“Background colour”</strong> y seleccionar el color del fondo de la página.</li>
<li>c. Comprobar que el <strong>“Contrast ratio”</strong> que aparece junto a <strong>“WCAG 2.1 results”</strong> es superior a <strong>3:1</strong>.</li>
</ul>
</li>
</ol>
 
2. Usa la herramienta '''[https://webaim.org/resources/contrastchecker/ Color contrast checker]
 
<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=
 
<div class="accessibility-card">
Se muestra un texto grande con buen contraste entre el fondo y el primer plano.
<pre class="wcag-codigo-html">
<h1 style="color:#000000; background:#FFFFFF; font-size:24px;">
Título de sección claramente visible
</h1>
</pre>
</div>
 
|wcag_otras_herramientas_evaluacion=
<ul>
<li>'''Revisión visual''': comprobar si el texto grande (≥ 18 px normal o ≥ 14 px en negrita) es claramente legible sobre el fondo.</li>
<li>'''Medición de contraste''': usar herramientas de análisis de contraste (Chrome DevTools, Colour Contrast Analyser, WebAIM Contrast Checker) para verificar una relación mínima de 3:1 entre texto grande y fondo.</li>
<li>'''Inspección del navegador''': revisar estilos CSS (color, background-color, transparencias, imágenes de fondo) para asegurar que el contraste cumple los requisitos.</li>
<li>'''Pruebas con filtros visuales''': aplicar simuladores de visión reducida o filtros de accesibilidad para validar que el texto sigue siendo legible en condiciones visuales variadas.</li>
</ul>
 
}}

Revisión actual - 12:37 6 nov 2025

1.4.3-B. Contraste mínimo en texto grande

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

Recursos de apoyo

Consejos
  • 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

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 grande de la página.
  2. Paso 2. Comprobar que presentan un contraste de al menos 3:1 con el fondo:
    • a. Pulsar en el icono en la sección “Foreground colour” y seleccionar el color del texto en la página.
    • b. Pulsar en el icono en la sección “Background colour” y seleccionar el color del fondo de la página.
    • c. Comprobar que el “Contrast ratio” que aparece junto a “WCAG 2.1 results” es superior a 3:1.

2. Usa la herramienta Color contrast checker

  1. Paso 1. Identificar texto grande (títulos, encabezados, destacados).
  2. Paso 2. Medir contraste mínimo de 3:1 con herramientas.
  3. 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

Se muestra un texto grande con buen contraste entre el fondo y el primer plano. 

<h1 style="color:#000000; background:#FFFFFF; font-size:24px;">
Título de sección claramente visible
</h1>

Otras herramientas de evaluación

  • Revisión visual: comprobar si el texto grande (≥ 18 px normal o ≥ 14 px en negrita) es claramente legible sobre el fondo.
  • Medición de contraste: usar herramientas de análisis de contraste (Chrome DevTools, Colour Contrast Analyser, WebAIM Contrast Checker) para verificar una relación mínima de 3:1 entre texto grande y fondo.
  • Inspección del navegador: revisar estilos CSS (color, background-color, transparencias, imágenes de fondo) para asegurar que el contraste cumple los requisitos.
  • Pruebas con filtros visuales: aplicar simuladores de visión reducida o filtros de accesibilidad para validar que el texto sigue siendo legible en condiciones visuales variadas.










Ejemplos accesibles y no accesibles creados por alumnos

Comentarios

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

Loading comments...




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