Principio 1/1.4 Distinguible/1.4.3-B

De WCAG Wiki

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

  • 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

  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

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

Comentarios

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

Loading comments...