Comprobador de contraste para WCAG 2.2.

Introduce un color de texto y un color de fondo para ver su relación de contraste y si cumplen WCAG 2.2 AA y AAA. Funciona en tu navegador y no se sube nada de lo que introduces.

Color del textoColor de fondo

Texto grande, 24pxTexto normal a 15px, el tamaño que usan la mayoría de los párrafos.

Relación de contraste

13.79:1

Texto normal AA · 4.5:1Cumple
Texto grande AA · 3:1Cumple
Texto normal AAA · 7:1Cumple
Texto grande AAA · 4.5:1Cumple
Iconos y elementos de UI AA · 3:1Cumple

Funciona en tu navegador. Nada de lo que añadas aquí se sube ni se guarda.

Cómo comprobar el contraste de color

Introduce el color del texto como código HEX, por ejemplo #1F2A22 o #333, o elígelo en la muestra.
Introduce el color de fondo de la misma forma. El botón de intercambio entre los dos campos los intercambia.
Lee el resultado. La relación se actualiza mientras escribes, el ejemplo muestra tus colores a 24px y a 15px, y cada nivel de WCAG indica Cumple o No cumple.

Los campos aceptan códigos HEX de tres o seis dígitos, con o sin #. Para un color semitransparente, introduce el color sólido que resulta sobre tu fondo. La relación se redondea hacia abajo, así que una pareja que muestra 4.50:1 cumple de verdad.

Requisitos de contraste de WCAG 2.2

Qué	AA	AAA
Texto normal	4.5:1	7:1
Texto grande (24px, o 18.66px en negrita)	3:1	4.5:1
Iconos y elementos de UI	3:1	Ninguno

Los niveles de texto corresponden a los criterios de conformidad 1.4.3 (AA) y 1.4.6 (AAA). Los iconos, los bordes de los campos, los indicadores de foco y otras partes de los controles entran en el 1.4.11, que solo tiene nivel AA. Los logos y el texto de los controles desactivados están exentos. Las relaciones van de 1:1 (sin contraste) a 21:1 (negro sobre blanco) y se calculan con la fórmula de luminancia relativa de WCAG 2.

Crea un sistema de diseño accesible con Codex

Comprobar las parejas de una en una funciona mientras eliges colores. Para que todo un producto se lea bien, comprueba las parejas de las que depende tu sistema de diseño y convierte la norma en algo que Codex siga:

Comprueba las parejas principales: el texto sobre el fondo de la página, el texto sobre las tarjetas, el texto de los botones sobre tu color principal y el gris atenuado que usas para el texto secundario, que es la pareja que falla más a menudo.
Escribe la norma en DESIGN.md. El generador de DESIGN.md te avisa cuando on-primary sobre primary, u on-surface sobre surface o neutral, queda por debajo de 4.5:1, y añade al archivo “Mantén el contraste del texto en WCAG AA (4.5:1) o superior”.
Pasa el linter al archivo. npx @google/design.md lint DESIGN.md también comprueba las relaciones de contraste, como explica la guía de DESIGN.md.
Pídele a Codex que audite las pantallas terminadas, donde aparecen parejas nuevas: texto sobre imágenes, insignias y texto de marcador de posición.

Auditoría de contraste

Comprueba cada pareja de color de texto y de fondo de [screen.html] según WCAG 2.2 AA: 4.5:1 para el texto normal, 3:1 para el texto de 24px o más (o 18.66px en negrita) y 3:1 para los iconos, los bordes de los campos y los anillos de foco. Enumera cada pareja que no cumpla con su relación y sugiere el color más cercano que cumpla manteniendo el tono. Usa solo colores de DESIGN.md, o dime qué token tiene que cambiar.

Preguntas frecuentes

¿Qué relación de contraste es buena?

Al menos 4.5:1 para el texto normal y 3:1 para el texto grande, los iconos y las partes de los controles. Eso es WCAG AA, el nivel que exigen la mayoría de las políticas de accesibilidad. El texto normal con 7:1 o más cumple AAA, y 21:1 es el máximo posible.

¿Qué se considera texto grande?

El texto de 24px (18pt) o más, o de 18.66px (14pt) o más cuando está en negrita.

¿Usa APCA?

No. Usa la fórmula de contraste de WCAG 2, la que se usa para medir la conformidad con WCAG 2.2. APCA, un método distinto que se debate para un futuro WCAG 3, no forma parte de WCAG 2.2.

¿Es gratis?

Sí. Es gratis, no requiere registro y los colores que introduces se quedan en tu navegador.