Técnica Técnicas generales WCAG 2.2
G18Garantizar una relación de contraste de al menos 4.5:1 entre el texto (y las imágenes de texto) y el fondo situado detrás del texto
En resumen
Esta técnica explica cómo conseguir y medir la relación de contraste mínima de 4.5:1 entre el texto y su fondo que exige el criterio 1.4.3 (AA) para el texto de tamaño normal. Incluye la fórmula de luminancia relativa, la equivalencia entre puntos y píxeles CSS, y soluciones para fondos con imágenes o degradados (atenuar el fondo, añadir un contorno o halo, variar el tono de las letras). Beneficia a personas con baja visión, daltonismo o pérdida de contraste por la edad, y a cualquier usuario con pantallas de poca calidad o mucha luz ambiental.
Ejemplo práctico
Los textos secundarios en gris claro y los botones con texto blanco sobre colores corporativos claros son la causa más común de fallos de contraste (criterio 1.4.3). El texto normal necesita al menos 4,5:1 con su fondo.
Así no: Tarjeta de cita previa con gris claro y botón azul claro
La nota usa #999999 sobre blanco (2,9:1) y el botón tiene texto blanco sobre #44AFE4 (2,5:1). Ambos textos son de 16 px y no están en negrita, así que necesitan 4,5:1.
<style>
.tarjeta { max-width: 340px; padding: 12px 16px; border: 1px solid #c9c9c9; border-radius: 8px; }
.tarjeta h2 { margin: 0 0 6px; color: #0B2239; font-size: 20px; }
.nota { color: #999999; margin: 0 0 12px; }
.boton { font: inherit; padding: 10px 18px; border: 0; border-radius: 6px; background: #44AFE4; color: #fff; }
.boton:focus-visible { outline: 3px solid #0B2239; outline-offset: 2px; }
</style>
<div class="tarjeta">
<h2>Cita previa en el registro</h2>
<p class="nota">Plazas limitadas. Recibirá la confirmación por correo electrónico.</p>
<button type="button" class="boton">Pedir cita</button>
</div>
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Así sí: Mismos colores corporativos con contraste suficiente
La nota pasa a #595959 (7:1 sobre blanco) y el texto del botón a #0B2239 sobre el mismo azul #44AFE4 (6,5:1). Se mantiene el diseño y ambos textos superan 4,5:1.
<style>
.tarjeta { max-width: 340px; padding: 12px 16px; border: 1px solid #c9c9c9; border-radius: 8px; }
.tarjeta h2 { margin: 0 0 6px; color: #0B2239; font-size: 20px; }
.nota { color: #595959; margin: 0 0 12px; }
.boton { font: inherit; padding: 10px 18px; border: 0; border-radius: 6px; background: #44AFE4; color: #0B2239; }
.boton:focus-visible { outline: 3px solid #0B2239; outline-offset: 2px; }
</style>
<div class="tarjeta">
<h2>Cita previa en el registro</h2>
<p class="nota">Plazas limitadas. Recibirá la confirmación por correo electrónico.</p>
<button type="button" class="boton">Pedir cita</button>
</div>Pruébelo aquí:
Cómo comprobarlo
Errores frecuentes en auditorías
- Textos de ayuda, marcadores de posición (
placeholder) y precios antiguos tachados en grises claros como #999 o #aaa. - Botones con texto blanco sobre el color corporativo claro (azules, verdes o naranjas) sin comprobar la relación de contraste.
- Textos sobre fotografías o carruseles sin velo ni fondo detrás de las letras.
- Medir solo el estado normal y olvidar el «hover» o el foco, donde el color del texto cambia.
Técnica completa: traducción al español del texto del W3C
Aplicabilidad
Cualquier tecnología que produzca salida visual.
Descripción
El objetivo de esta técnica es asegurarse de que los usuarios pueden leer el texto que se presenta sobre un fondo. Para el criterio de conformidad 1.4.3, esta técnica describe la relación de contraste mínima para el texto de menos de 18 puntos (si no es negrita) y de menos de 14 puntos (si es negrita). Para el criterio de conformidad 1.4.6, esta técnica relaja el requisito de relación de contraste de 7:1 para el texto de al menos 18 puntos (si no es negrita) o de al menos 14 puntos (si es negrita).
Al evaluar este criterio de conformidad, el tamaño de fuente en puntos debe obtenerse del agente de usuario o calcularse a partir de las métricas de la fuente del mismo modo en que lo hacen los agentes de usuario. Los tamaños en puntos se basan en el tamaño pt de CSS (CSS3 Values). La relación entre los tamaños en puntos y los píxeles CSS es 1pt = 1.333px; por tanto, 14pt y 18pt equivalen aproximadamente a 18.5px y 24px.
Si el fondo es de un color uniforme (o completamente negro o completamente blanco), la luminancia relativa del texto puede mantenerse asegurándose de que cada una de las letras del texto tenga una relación de contraste de 4.5:1 con el fondo.
Si el fondo o las letras varían en luminancia relativa (o tienen un patrón), entonces el fondo que rodea las letras puede elegirse o sombrearse de forma que las letras mantengan una relación de contraste de 4.5:1 con el fondo situado inmediatamente detrás de ellas, aunque no tengan esa relación de contraste con el fondo completo.
Por ejemplo, si una letra es más clara en la parte superior que en la inferior, puede resultar difícil mantener la relación de contraste entre la letra y el fondo en toda la letra. En ese caso, el diseñador podría oscurecer el fondo situado detrás de la letra o añadir un contorno negro fino (de al menos un píxel de anchura) alrededor de la letra para mantener la relación de contraste entre la letra y el fondo por encima de 4.5:1.
La relación de contraste a veces puede mantenerse cambiando la luminancia relativa de las letras a medida que la luminancia relativa del fondo cambia a lo largo de la página.
Por ejemplo, si una página es muy clara en un borde y se va oscureciendo hasta ser muy oscura en el borde opuesto, no existe ningún color que pueda recorrer toda la página y cumplir las pautas de contraste en ambos bordes. Una forma de resolverlo sería cambiar también la claridad de las letras, de modo que cada letra cumpla siempre la relación de contraste respecto al fondo situado inmediatamente detrás de ella.
Otro método consiste en añadir un halo alrededor del texto que proporcione la relación de contraste necesaria cuando la imagen o el color de fondo no presenten por sí mismos una diferencia suficiente de luminancia relativa.
Ejemplos
- Se elige un fondo negro para poder utilizar letras de color claro que coincidan con el logotipo de la empresa.
-
Se coloca un texto sobre una fotografía del campus universitario. Como en la fotografía aparece una gran variedad de colores y tonos, la zona situada detrás del texto se atenúa con un velo blanco, de modo que la fotografía queda muy tenue y su punto más oscuro sigue siendo lo bastante claro para mantener una relación de contraste de 4.5:1 con el texto negro escrito sobre la fotografía.
Consulte también las muestras de contraste en los recursos relacionados.
Pruebas
Procedimiento
-
Medir la luminancia relativa de cada letra (salvo que todas sean uniformes) mediante la fórmula:
-
L = 0.2126 * R + 0.7152 * G + 0.0722 * B donde R, G y B se definen como:
- si R sRGB <= 0.04045, entonces R = R sRGB /12.92; en caso contrario, R = ((R sRGB +0.055)/1.055) ^ 2.4
- si G sRGB <= 0.04045, entonces G = G sRGB /12.92; en caso contrario, G = ((G sRGB +0.055)/1.055) ^ 2.4
- si B sRGB <= 0.04045, entonces B = B sRGB /12.92; en caso contrario, B = ((B sRGB +0.055)/1.055) ^ 2.4
y R sRGB, G sRGB y B sRGB se definen como:
- R sRGB = R 8bit /255
- G sRGB = G 8bit /255
- B sRGB = B 8bit /255
El carácter «^» es el operador de exponenciación.
En el caso de letras con suavizado de bordes (aliasing), utilizar el valor de luminancia relativa que se encuentre dos píxeles hacia el interior desde el borde de la letra.
-
- Medir la luminancia relativa de los píxeles del fondo inmediatamente contiguos a la letra utilizando la misma fórmula.
-
Calcular la relación de contraste mediante la siguiente fórmula.
-
(L1 + 0.05) / (L2 + 0.05), donde
- L1 es la luminancia relativa del color más claro de entre el de primer plano y el de fondo, y
- L2 es la luminancia relativa del color más oscuro de entre el de primer plano y el de fondo.
-
- Comprobar que la relación de contraste es igual o superior a 4.5:1
Resultados esperados
- La comprobación n.º 4 es verdadera.
Antes de mayo de 2021, el valor 0.04045 de la definición era distinto (0.03928). Se había tomado de una versión anterior de la especificación y se ha actualizado. No tiene ningún efecto práctico en los cálculos en el contexto de estas pautas.
Recursos
- TPGi Colour Contrast Analyser (CCA) – Application (aplicación de análisis de contraste de color)
- Contrast Ratio Analyser - online service (servicio en línea de análisis de la relación de contraste)
- Color Contrast Samples (web.archive.org) (muestras de contraste de color)
- Atypical colour response (respuesta atípica al color)
- Colors On the Web Color Contrast Analyzer (analizador de contraste de color de Colors On the Web)
Cómo lo comprobamos en ADDAW
En las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica G18 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.
