Cómo verificar el contraste de colores paso a paso
- Introduce el color del texto — haz clic en el swatch o escribe el código HEX directamente en el campo. Si necesitas convertir un color RGB o HSL a HEX, usa el conversor de colores HEX ↔ RGB ↔ HSL.
- Introduce el color del fondo — el mismo proceso para el segundo color.
- Lee el ratio — el número central muestra el ratio de contraste calculado con la fórmula oficial WCAG 2.1.
- Verifica los 4 criterios — la tabla muestra si pasas AA y AAA tanto para texto normal como para texto grande (≥18pt o ≥14pt negrita).
- Prueba el modo invertido — usa las pestañas para ver cómo quedaría el fondo de tu color sobre texto blanco o negro.
Ratios de contraste WCAG — Tabla de referencia rápida
Esta tabla resume los requisitos de contraste de la especificación WCAG 2.1 para los casos más habituales en diseño web:
Texto sobre fondo (criterio 1.4.3)
| Nivel | Texto normal (<18pt) | Texto grande (≥18pt) | Texto grande negrita (≥14pt) |
|---|---|---|---|
| AA (mínimo legal) | 4.5:1 | 3:1 | 3:1 |
| AAA (óptimo) | 7:1 | 4.5:1 | 4.5:1 |
Componentes de interfaz y gráficos (criterio 1.4.11)
| Elemento | Requisito AA | Ejemplos |
|---|---|---|
| Bordes de inputs activos | 3:1 vs fondo | Borde del campo de formulario enfocado |
| Iconos informativos | 3:1 vs fondo | Icono de búsqueda, icono de menú |
| Indicadores de estado | 3:1 vs fondo | Check de completado, error marker |
| Elementos decorativos | Exento | Separadores decorativos, imágenes de fondo |
Errores de contraste más frecuentes en diseño web
Gris claro sobre blanco — el error más común
El texto gris sobre fondo blanco es el fallo de contraste más frecuente en diseño minimalista. El color #999999 sobre blanco tiene un ratio de 2.85:1 — muy por debajo del mínimo AA de 4.5:1. Para pasar AA con texto normal sobre blanco, el gris debe ser al menos #767676 (ratio 4.54:1). Para texto de apoyo o subtítulos, usa #595959 o más oscuro para garantizar legibilidad. Si necesitas crear una paleta con grises accesibles, el generador de paletas de colores te ayuda a crear variaciones accesibles de cualquier color base.
Colores de marca sobre fondos claros
Muchos colores corporativos como azules medios, verdes saturados o rojos brillantes fallan el contraste cuando se usan como texto sobre fondo blanco. El azul estándar de link (#0000FF) tiene ratio 8.59:1 — pasa AAA — pero un azul de marca como #3B82F6 solo tiene 3.03:1, que falla AA para texto normal. Siempre verifica los colores de marca con esta herramienta antes de usarlos en texto.
Texto sobre imágenes o gradientes
El texto sobre fondos no uniformes — fotografías, gradientes o patrones — no tiene un único ratio de contraste sino que varía según la zona. La práctica correcta es añadir una capa semitransparente entre la imagen y el texto, o usar un halo de texto (text-shadow). Verifica siempre el contraste en el punto de menor diferencia entre texto y fondo. Si usas gradientes de fondo, el generador de gradientes CSS incluye previsualización que te ayuda a elegir gradientes que mantengan legibilidad.
📚 Referencia: WebAIM Contrast Checker · W3C Técnica G18Preguntas frecuentes sobre contraste WCAG
El ratio de contraste WCAG mide la diferencia de luminosidad relativa entre dos colores y se expresa como un número de 1 a 21 — donde 1:1 es ningún contraste (blanco sobre blanco) y 21:1 es el máximo (negro sobre blanco). Se calcula dividiendo la luminancia relativa del color más claro más 0.05 entre la luminancia del más oscuro más 0.05. La luminancia se obtiene transformando los valores RGB al espacio de color lineal según la fórmula IEC 61966-2-1. WCAG 2.1 exige mínimo 4.5:1 para texto normal y 3:1 para texto grande en nivel AA. Verifica la especificación completa en w3.org/TR/WCAG21.
WCAG AA es el nivel mínimo de accesibilidad exigido en la mayoría de legislaciones y contratos públicos. Requiere un ratio de contraste de 4.5:1 para texto normal (menos de 18pt o 14pt negrita) y 3:1 para texto grande. WCAG AAA es el nivel más estricto y exige 7:1 para texto normal y 4.5:1 para texto grande. Alcanzar AAA en toda una web es difícil sin comprometer el diseño, por lo que se recomienda como objetivo para secciones críticas como formularios o navegación. La normativa española RGAA y la directiva europea WAD exigen como mínimo cumplir el nivel AA. Verifica en w3.org/WAI/WCAG21/quickref.
WCAG 2.1 define texto grande como texto de al menos 18 puntos (24px en pantalla) en peso normal, o al menos 14 puntos (aproximadamente 18.67px) en negrita. El texto de tamaño grande aplica ratios de contraste menos estrictos porque es más fácil de leer: 3:1 para nivel AA y 4.5:1 para nivel AAA. Esta distinción es relevante para titulares, call-to-action y elementos prominentes que suelen mostrarse en tamaños grandes. Para texto de cuerpo (16px regular) siempre aplica el criterio más estricto de 4.5:1 para AA. Verifica las definiciones exactas en w3.org/TR/WCAG21/#contrast-minimum.
Aproximadamente 300 millones de personas en el mundo tienen algún tipo de deficiencia en la visión del color, y más de 2.000 millones sufren alguna discapacidad visual. Un contraste insuficiente hace que el texto sea difícil o imposible de leer para estos usuarios. Además, un contraste bajo afecta a cualquier persona en condiciones de luz adversas: pantallas al sol, pantallas con brillo bajo o dispositivos de baja calidad. Diseñar con buen contraste mejora la experiencia de todos los usuarios, no solo de quienes tienen discapacidades. En España, la Ley de Accesibilidad obliga a cumplir WCAG AA en webs y apps del sector público. Verifica en w3.org/WAI.
Los fallos más habituales son: texto gris claro sobre fondo blanco (muy popular en diseño minimalista pero frecuentemente insuficiente), texto amarillo o naranja sobre fondo blanco (colores cálidos claros tienen poca luminancia de contraste), texto blanco sobre colores medios como azules o verdes de saturación media, y texto de color de marca sobre fondos de ese mismo color en tono más claro. Los grises del sistema como #999999 sobre blanco tienen un ratio de solo 2.85:1 — muy por debajo del mínimo AA. Verifica siempre tus colores de marca antes de usarlos en texto. Fuente: webaim.org/resources/contrastchecker.
Sí. WCAG 2.1 criterio 1.4.11 (nivel AA) exige un ratio mínimo de 3:1 para componentes de interfaz y gráficos informativos respecto al fondo adyacente. Esto incluye iconos sin texto alternativo, bordes de campos de formulario, indicadores de estado y gráficos de datos. Los elementos puramente decorativos (sin función informativa) están exentos. Un botón con solo un icono sin texto requiere que ese icono tenga al menos 3:1 de contraste con el fondo. Para texto sobre imágenes o gradientes, debes verificar el contraste en el punto de menor contraste. Verifica los criterios completos en w3.org/WAI/WCAG21/quickref/?showtechniques=1411.
Google utiliza señales de experiencia de usuario como parte de su algoritmo de ranking. Desde la introducción de los Core Web Vitals, la accesibilidad se considera un factor de calidad indirecto — las páginas con problemas de accesibilidad graves tienden a tener peores métricas de engagement (rebote alto, poco tiempo en página). Google Lighthouse incluye auditorías de contraste de color en su categoría de accesibilidad y penaliza con puntuación baja las páginas que fallan. Además, el contraste insuficiente afecta la lectura en móvil, donde el 70% del tráfico web llega actualmente. Verifica tus puntuaciones en web.dev/measure.
Además de este verificador, las herramientas más usadas por profesionales son: WebAIM Contrast Checker (webaim.org/resources/contrastchecker) — la referencia del sector; Colour Contrast Analyser de TPGi — aplicación de escritorio gratuita para Windows y Mac; el panel de accesibilidad de Chrome DevTools que muestra el ratio en tiempo real al inspeccionar elementos; Figma con el plugin "Contrast" o "A11y - Color Contrast Checker" para verificar directamente en diseño; y Stark — plugin para Figma, Sketch y Adobe XD. Verifica los estándares WCAG actualizados siempre en w3.org/WAI/WCAG21/quickref.