Comprueba el contraste antes de elegir tus colores
El mismo verde, otro fondo y un resultado distinto. Cuatro pares para probar por tu cuenta.
Un verde que se ve bien en una paleta puede ser difícil de leer como etiqueta pequeña. Verifica el color del texto junto con su fondo antes de usarlo en un diseño.
Aquí tienes cuatro combinaciones que puedes reproducir en Estudio de color. La tercera usa exactamente el mismo verde que la segunda; solo cambia el fondo.
Cambiar el fondo puede reducir el contraste por debajo del mínimo
| Muestra | Texto / fondo | Relación de contraste |
|---|---|---|
| 1 | #8DAA91 / #FFFFFF |
2.53:1 |
| 2 | #647C66 / #FFFFFF |
4.55:1 |
| 3 | #647C66 / #F3E7CE |
3.71:1 |
| 4 | #4B7051 / #F3E7CE |
4.59:1 |
Las muestras 2 y 4 superan el umbral de contraste AA de WCAG para texto normal. Las muestras 1 y 3 no lo superan. Los números que se muestran aquí están redondeados para la visualización; las comprobaciones usan los valores completos calculados.
Cambiar el blanco por crema hizo que la muestra 2 dejara de cumplir el mínimo. Oscurecer el verde en la muestra 4 lo devolvió por encima del umbral. Estos son colores de ejemplo, no una paleta obligatoria para tu proyecto. Descarga su CSS para probarlos en tu propio diseño.
Comprueba también el tamaño del texto
La guía de contraste de texto de WCAG establece una relación mínima de 4.5:1 para texto normal en el nivel AA. El texto grande tiene un umbral más bajo de 3:1. “Grande” significa al menos 24 píxeles CSS para texto regular, o unos 18.67 píxeles CSS para texto en negrita.
Esa distinción importa para una etiqueta pequeña debajo de un titular. Un par de colores puede aprobar para el titular y aun así suspender para la etiqueta. Evalúa cada uno en su tamaño real mostrado, incluso cuando una imagen social se reduce en un feed.
No redondees un valor que suspende para que parezca que aprueba. Un resultado de 4.499:1 sigue estando por debajo de 4.5:1.
Prueba los cuatro pares en la herramienta
- Abre Estudio de color y elige Contraste.
- Introduce el primer par en Color del texto y Color de fondo.
- Comprueba Texto normal AA y luego compara Texto grande AA.
- Repite con los otros pares. Para las muestras 2 y 3, cambia solo el fondo para ver por qué ambos valores importan.
- Pon el par elegido en el diseño real y léelo en su tamaño final. Revisa etiquetas y enlaces más pequeños, no solo el encabezado grande de la muestra.
En un teléfono, la vista previa y los ajustes aparecen uno después del otro. Las comprobaciones usan los mismos valores que en el escritorio.
Los colores sólidos son solo el punto de partida
El verificador compara dos colores sólidos y opacos. No inspecciona cada píxel detrás del texto en una fotografía o degradado, ni tiene en cuenta una superposición parcialmente transparente. Revisa las zonas más claras y más oscuras bajo el texto, o dale al texto un panel sólido cuyo color puedas probar.
Prueba el diseño en temas claro y oscuro si los ofreces. Aprobar en una tarjeta blanca no dice nada sobre el mismo texto en un menú oscuro. Las letras finas también pueden ser más difíciles de leer de lo que sugiere la relación, así que deja un margen por encima del mínimo en lugar de apuntar al aprobado más cercano posible.
Lo que comprobamos
El 5 de octubre de 2026, ejecutamos los cuatro pares a través de la misma función de contraste que Estudio de color. El archivo de resultados registra las relaciones exactas y las decisiones AA. El CSS descargable y la ilustración usan esos mismos valores de color.
Esto comprueba el contraste del texto, no la accesibilidad de toda una página. No evalúa el acceso por teclado, las etiquetas, el orden de lectura ni si alguien puede entender tu contenido.