Principio 1/1.4 Distinguible/1.4.3-B
1.4.3-B. Contraste mínimo en texto grande
- Nivel: AA
- Versión: 2.2
- Principio: 1_Perceptible
- Pauta: 1.4_Distinguible
- Grupo: Contraste
- Subgrupo: Texto_grande
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 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
Objetivo
Importancia de cumplir el criterio
Referencias WCAG
- G145: Ensuring that a contrast ratio of at least 3: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
- 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
Procedimiento de evaluación
1. Usa la herramienta ‘’’Colour Contrast Analyser’’’
- Paso 1. Localizar todos los textos de tamaño grande de la página.
- 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
- Paso 1. Identificar texto grande (títulos, encabezados, destacados).
- Paso 2. Medir contraste mínimo de 3:1 con herramientas.
- Paso 3. Confirmar que se mantiene el contraste en todos los estados (hover, focus, activo).
Resultado esperado
Ejemplo ilustrativo
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
| Última modificación | |
|---|---|
| 25261.4.3B-001 | 13 febrero 2026 11:42:28 |
| 2526UFV1.4.3-B-001 | 11 enero 2026 18:57:24 |
| 2526UPSA1.4.3-B000 | 20 diciembre 2025 16:01:36 |
Comentarios
A continuación se muestran comentarios sobre el criterio 1.4.3-B. Contraste mínimo en texto grande
2. SUBCRITERIO 1.4.3-B: Contraste mínimo
ID del Criterio: 1.4.3 Contraste (mínimo) (Nivel AA)
2.1. Ejemplo NO Accesible (NOA)
URL de origen: https://www.art.yale.edu
Explicación:
En la web de Yale School of Art se utilizan combinaciones de colores muy llamativas donde el texto no siempre alcanza el contraste mínimo exigido. Algunos textos grises sobre fondos claros dificultan la lectura.
El contraste insuficiente impide que el contenido sea claramente perceptible, incumpliendo el criterio 1.4.3 nivel AA.
Impacto:
Personas con baja visión, usuarios mayores o personas con daltonismo pueden tener serias dificultades para leer el contenido, lo que limita el acceso a la información.
2.2. Ejemplo Accesible (ACC)
URL de origen: https://www.bbc.com
Explicación:
La BBC utiliza texto negro o gris oscuro sobre fondo blanco, asegurando una relación de contraste superior a 4.5:1. Esto cumple con el nivel AA y garantiza legibilidad en diferentes dispositivos y condiciones de iluminación.
Impacto:
Mejora la experiencia de lectura, reduce la fatiga visual y facilita el acceso a la información para todos los usuarios.
