Comprueba la relación de contraste de accesibilidad WCAG entre colores
Un comprobador de contraste mide la relación de contraste entre un color de primer plano y un color de fondo, y te dice si cumple los estándares de accesibilidad WCAG para texto legible. La relación de contraste es un número de 1:1 (colores idénticos, invisible) a 21:1 (negro sobre blanco), y cuanto más alta es, más fácil de leer es el texto — sobre todo para personas con baja visión, deficiencias de color, o cualquiera usando una pantalla bajo sol intenso. Introduces dos colores y obtienes la relación exacta más un claro aprobado o suspenso frente a los umbrales reconocidos.
Esto importa porque el gris claro sobre blanco y otras combinaciones de bajo contraste quedan elegantes en un diseño pero son genuinamente difíciles de leer para una gran parte de usuarios, y el contraste es uno de los fallos de accesibilidad más comunes y más comprobables. Las directrices WCAG fijan mínimos específicos — 4,5:1 para texto normal y 3:1 para texto grande en el nivel AA — así que un comprobador convierte el "¿esto es legible?" de una conjetura en una respuesta verificable. Esta herramienta calcula la relación en tu navegador a medida que ajustas los colores.
Bajo WCAG AA, el texto normal necesita al menos 4,5:1 y el texto grande (en torno a 18pt, o 14pt en negrita) necesita 3:1. El nivel más estricto AAA pide 7:1 y 4,5:1 respectivamente. El comprobador muestra tu relación frente a estos umbrales para que sepas exactamente cuál pasa.
El texto de bajo contraste es difícil o imposible de leer para personas con visión reducida, deficiencias de visión del color, o cualquiera con mala iluminación. Un contraste suficiente es uno de los requisitos de accesibilidad de mayor impacto y más fácilmente medibles, por eso WCAG fija mínimos explícitos.
Sí. El texto más grande y en negrita es más legible con menos contraste, así que el estándar relaja el requisito para él — 3:1 en AA en vez de 4,5:1. El comprobador tiene en cuenta esta distinción para que los titulares grandes se juzguen con el umbral correcto.
El máximo es 21:1, que es negro puro sobre blanco puro. El mínimo es 1:1, dos colores idénticos sin ningún contraste. Cualquier par de colores reales cae en algún punto intermedio, y el objetivo es superar el umbral para tu tamaño de texto.
Generador de paleta de colores · Generador de degradado CSS · Mezclador de colores · Buscador de nombre de color