wikitel.org - Contraste de colores WCAG: comprobar AA y AAA

Conversores wikitel.org/herramientas/contraste-colores

Wiki Te cuento en una frase para qué sirve y aquí mismo la usas, sin registrarte.

Color del texto

No reconozco este color: escríbelo como #1a73e8, rgb(26, 115, 232) o hsl(214, 82%, 51%).

Tiene transparencia: se calcula con el color que se ve sobre el fondo.

Color del fondo

No reconozco este color: escríbelo como #1a73e8, rgb(26, 115, 232) o hsl(214, 82%, 51%).

Tiene transparencia: se calcula sobre un fondo blanco.

Texto grande, de 24 px

Texto normal, de 16 px: así se leería un párrafo con estos colores en tu web.

Letra pequeña, como la de un aviso legal o un pie de foto.

${ relacionTexto } ${ veredicto.texto }

Nivel	Para	Mínimo	Resultado
${ r.nivel }	${ r.para }	${ r.minimoTexto }	${ r.cumple ? 'Cumple' : 'No cumple' }

Texto grande: desde 24 px, o desde 18,66 px en negrita.

Colores parecidos que sí cumplen

Qué no comprueba esta herramienta

Mide el contraste entre dos colores lisos: con texto sobre una foto o un degradado, comprueba el color más claro (o el más oscuro) que quede detrás de las letras.
No sabe el tamaño ni el grosor real de tu letra: eres tú quien mira si es texto normal o grande. Una fuente muy fina puede leerse mal aunque cumpla.
Cumplir el contraste no hace accesible una web: WCAG también pide, entre otras cosas, textos alternativos en las imágenes, que se pueda usar con el teclado y no dar información solo con el color.

¿Qué es la relación de contraste?

Es un número que dice cuánto se distinguen dos colores, de 1:1 (el mismo color) a 21:1 (negro sobre blanco). No sale de comparar los colores tal cual, sino de su luminancia relativa: lo claros que los ve el ojo humano, que es mucho más sensible al verde que al azul. Por eso un amarillo y un azul con el mismo «brillo» en el selector de color pueden tener contrastes muy distintos sobre blanco.

Los niveles AA y AAA

Las pautas de accesibilidad WCAG fijan unos mínimos según el tamaño del texto:

AA: 4,5:1 para el texto normal y 3:1 para el grande. Es el nivel que exigen las leyes y el que deberías cumplir siempre.
AAA: 7:1 para el texto normal y 4,5:1 para el grande. Es el nivel más alto, recomendable en textos largos o para personas mayores.
Iconos, bordes de campos y gráficos: 3:1 con lo que tienen al lado, para que se vea dónde está un botón o un campo de formulario.

Texto grande es el de 24 px o más, o el de 18,66 px (14 puntos) en negrita. Los logotipos y el texto de adorno no tienen mínimo.

Las relaciones no se redondean: 4,49:1 no cumple AA, aunque se quede a una centésima. Por eso aquí se enseñan truncadas, sin redondear hacia arriba.

Colores que suelen fallar

El gris claro sobre blanco, tan de moda en textos secundarios y placeholders: #999999 se queda en 2,84:1. El gris más claro que cumple AA sobre blanco es #767676 (4,54:1); #777777 ya no llega (4,47:1).
El texto blanco sobre colores vivos: sobre el naranja #ff9800 se queda en 2,15:1, y sobre el verde de WhatsApp (#25d366), en 1,98:1. Con esos colores, el texto va mejor en negro o en un tono muy oscuro.
Los colores de marca: un azul que queda bien en el logo puede no llegar como color de los enlaces. Si es así, usa una versión un poco más oscura para el texto y deja la original para los adornos.

¿Es obligatorio?

En España, las webs y las aplicaciones del sector público tienen que cumplir el nivel AA desde el Real Decreto 1112/2018, que remite a la norma europea EN 301 549. Desde el 28 de junio de 2025, con la Ley 11/2023 que traspone la Ley Europea de Accesibilidad, también muchas empresas privadas: tiendas online, bancos, transporte, libros electrónicos… Las microempresas que prestan servicios (menos de 10 trabajadores y no más de 2 millones de euros de facturación) quedan fuera. Aunque no te obligue, un texto que se lee bien lo agradece todo el mundo, también quien mira el móvil a pleno sol.

¿Y WCAG 3?

La próxima versión de las pautas, todavía en borrador, propone otro método de cálculo (APCA) que tiene en cuenta el tamaño y el grosor de la letra y si el texto es claro sobre oscuro o al revés. Mientras no se apruebe, las leyes siguen usando WCAG 2, que es lo que calcula esta herramienta.