Cómo se usa
- Escriba el color del texto en Color del texto y el color que hay detrás en Color de fondo.
- Lea la Relación de contraste. Las cuatro comprobaciones del texto y la del componente indican qué niveles alcanza la pareja.
- Para el texto del cuerpo, busque AA, texto normal. El texto grande necesita menos contraste; los tamaños están en las secciones siguientes.
- Si una comprobación no se cumple, parta del Color de texto sugerido y pruebe el resultado en su diseño real.
Cómo se calcula la relación
WCAG 2.2 asigna a cada color una luminancia relativa. Cada valor de rojo, verde y azul se linealiza primero: un valor de como máximo 0,04045 (en una escala de 0 a 1) se divide entre 12,92, y uno mayor se eleva a la potencia 2,4 después de sumar 0,055 y dividir entre 1,055. Los tres resultados se ponderan después: 0,2126 para el rojo, 0,7152 para el verde y 0,0722 para el azul. La relación de contraste es la luminancia del color más claro más 0,05, dividida entre la luminancia del color más oscuro más 0,05.
El resultado va de 1, para dos colores idénticos, a 21, para negro sobre blanco.
L = 0,2126 × R + 0,7152 × G + 0,0722 × B
relación = (L1 + 0,05) ÷ (L2 + 0,05)
L1 luminancia del color más claro
L2 luminancia del color más oscuroLos niveles
WCAG 2.2 fija estas relaciones mínimas. Se indican el nivel y el criterio de éxito, para que pueda buscar el texto exacto.
- AA, texto normal: 4,5:1 (criterio 1.4.3).
- AA, texto grande: 3:1, para texto de 18 puntos, o de 14 puntos si va en negrita (1.4.3).
- AAA, texto normal: 7:1 (criterio 1.4.6).
- AAA, texto grande: 4,5:1 (1.4.6).
- Botones, bordes e iconos que el lector necesita para usar la página: 3:1 (1.4.11).
Lo que esta herramienta no cubre
- Texto sobre fotos, imágenes y degradados: el fondo cambia a lo largo del texto, así que compruebe los píxeles reales.
- Colores transparentes: escriba el color que el lector ve realmente en la página.
- Estados al pasar el ratón, de foco y otros: compruebe también los colores de cada estado.
- Si el texto es grande para el lector: lo deciden el tamaño y el grosor de la fuente, y la página no puede conocerlos.
Ejemplo resuelto: gris #777 sobre blanco
El gris #777 tiene cada canal en 119 sobre 255, lo que da una luminancia relativa de unos 0,184. El blanco tiene una luminancia de 1, así que la relación es (1 + 0,05) ÷ (0,184 + 0,05) = 4,48.
Por tanto, #777 sobre blanco no cumple AA para texto normal por poco margen, cumple AA para texto grande y la comprobación de 3:1 para componentes, y no cumple AAA. El gris más oscuro más cercano que cumple AA es #767676, con una relación de 4,54.
| Comprobación | Necesita | #777 sobre blanco |
|---|---|---|
| AA, texto normal | 4,5:1 | 4,48: no cumple |
| AA, texto grande | 3:1 | Cumple |
| AAA, texto normal | 7:1 | No cumple |
| AAA, texto grande | 4,5:1 | No cumple |
| Botones, bordes e iconos | 3:1 | Cumple |
Preguntas frecuentes
¿Qué relación de contraste necesita el texto del cuerpo?
Para el nivel AA de WCAG 2.2, el texto normal necesita al menos 4,5:1 y el texto grande 3:1. El nivel AAA pide 7:1 para el texto normal y 4,5:1 para el texto grande.
¿Por qué una relación de 4,4999 se muestra como 4,50 y sigue sin cumplir?
La comprobación usa la relación exacta, no los dos decimales de la pantalla. Una relación justo por debajo de 4,5 se redondea a 4,50 al mostrarla, pero no llega a 4,5:1, así que la comprobación no se cumple.
¿El orden de los dos colores cambia la relación?
No. La relación es la misma sea cual sea el color del texto y cuál el del fondo, porque el color más claro siempre va en el numerador.
¿Qué es el color sugerido?
Es el color de texto más parecido al suyo en luminosidad que alcanza 4,5:1 sobre su fondo. Mantiene el mismo tono y la misma saturación, y es más oscuro o más claro, lo que suponga el cambio menor.
¿Puedo escribir un color con transparencia?
Aquí no. Escriba el color que el visitante ve de verdad, que es el color transparente ya mezclado con el fondo que hay detrás.
¿Se envían mis colores a un servidor?
No. El cálculo se hace en su navegador, y nada de lo que escribe se guarda ni se envía.
¿Que una relación cumpla significa que el texto es fácil de leer?
No siempre. La relación es el mínimo que fija WCAG. También influyen el tamaño y el grosor de la fuente, el espaciado y la vista de cada lector, así que pruebe el diseño real con personas siempre que pueda.
Fuentes
- WCAG 2.2 (en inglés): Web Content Accessibility Guidelines, criterios de éxito y glosario
- Glosario de WCAG 2.2 (en inglés): luminancia relativa y relación de contraste
Cifras y texto revisados por última vez el martes, 10 de noviembre de 2026.