Herramientas de color

Verificador de Contraste

Comprueba la relación de contraste WCAG entre dos colores. Mira los distintivos de aprobación para AA y AAA en texto normal y grande, con vista previa en vivo.

Color del texto

Color de fondo

Ejemplo de título grande

Este es un texto de tamaño normal — la línea que leerías en párrafos y formularios.

Esta es la letra pequeña — pies de foto, notas al pie, textos de ayuda.

Relación de contraste

WCAG AA — Normal --

WCAG AA — Grande --

WCAG AAA — Normal --

WCAG AAA — Grande --

¿Qué es la relación de contraste?

La relación de contraste es un número de 1:1 (sin contraste) a 21:1 (negro puro sobre blanco puro) que mide qué tan distinguible es el color del texto frente al fondo. Las Pautas de Accesibilidad para el Contenido Web (WCAG) usan ese número como referencia legal para saber si un texto es legible para personas con baja visión, daltonismo, o para cualquiera leyendo en una pantalla con reflejos. Cuanto mayor la relación, más segura la elección — y más universalmente legible tu interfaz.

Cómo usar este verificador

Elige el color de texto en el selector Color del texto y la superficie detrás en Color de fondo — o pega los códigos hex directamente. La vista previa en vivo se redibuja en tiempo real para mostrar exactamente lo que verán los usuarios, y los cuatro distintivos te dicen de un vistazo qué niveles WCAG estás superando. Usa Invertir colores para alternar la pareja cuando estés diseñando una versión en modo oscuro o probando botones de CTA invertidos.

Buenas prácticas

Apunta a AA Normal (4,5:1) en el cuerpo de texto como mínimo absoluto, y a AAA Normal (7:1) cuando la accesibilidad sea valor de marca. No te quedes en el límite — relaciones marginales fallan en monitores baratos y al aire libre. Prueba tus colores reales en el tamaño real que vas a publicar, no aproximaciones de la paleta. Recuerda que estados deshabilitados, placeholders y textos publicitarios también cuentan como texto — necesitan contraste. Nunca uses solo el color para transmitir significado; combínalo con íconos, subrayados o etiquetas.

La matemática detrás de la relación

WCAG calcula contraste a partir de la luminancia relativa, no de los valores RGB en bruto. Cada canal se linealiza primero desde sRGB — los valores por debajo de 0.03928 se dividen por 12.92, el resto pasa por ((c + 0.055) / 1.055)^2.4. La luminancia entonces es L = 0.2126·R + 0.7152·G + 0.0722·B, ponderada porque el ojo humano es más sensible al verde y menos al azul. La relación es (L_mayor + 0.05) / (L_menor + 0.05). El término + 0.05 modela la luz ambiental reflejada en pantallas reales y es lo que limita el máximo en 21:1.

Niveles de conformidad WCAG en resumen

AA Normal: mínimo de 4,5:1 para texto de cuerpo bajo 18pt (o 14pt en negrita). AA Grande: 3:1 para texto desde 18pt (o 14pt+ negrita). AAA Normal: 7:1 — el nivel mejorado, recomendado para sitios que apuntan al estándar máximo de legibilidad. AAA Grande: 4,5:1 — texto grande bajo el nivel mejorado. Componentes de UI no textuales (íconos, anillo de foco, bordes de formulario) necesitan al menos 3:1 contra la superficie adyacente para cumplir con WCAG 2.1 SC 1.4.11.

Preguntas frecuentes

¿Qué es "texto grande" en WCAG?

Texto grande es cualquier cosa desde 18pt, o desde 14pt si está en negrita — aproximadamente 24px y 18,66px en píxeles CSS. La razón: las letras más grandes tienen trazos más gruesos y más masa visual, así que siguen siendo legibles con menos contraste que el cuerpo de texto apretado. Si tu sistema de diseño mezcla pesos regular y negrita en el mismo tamaño, evalúa cada uno por separado.

¿Esta herramienta envía mis colores a un servidor?

No. Cada cálculo de contraste corre en tu navegador a través de matemática JavaScript estándar — ninguna petición de red se dispara cuando cambias los valores. Puedes confirmarlo abriendo DevTools → pestaña Red y arrastrando el selector. Las auditorías de colores de marca se pueden hacer aquí con paletas no lanzadas, sin problema.

¿Por qué mis colores reprueban en 4,49:1 pero pasan en 4,50:1?

WCAG define sus umbrales como mínimos inclusivos — 4,5:1 significa al menos 4,5, no estrictamente mayor. Redondeamos a dos decimales para mostrar pero comparamos el número con precisión completa internamente, así que un resultado de 4,4998 falla por un margen mínimo aunque el distintivo diga 4,50. Si estás tan cerca, ajusta un canal en uno o dos puntos para pasar con holgura.

¿Y los elementos no textuales como íconos o bordes de formulario?

El criterio WCAG 2.1 SC 1.4.11 exige 3:1 de contraste mínimo para componentes gráficos de UI — trazos de ícono, bordes de input, indicadores de foco, contornos de botón. Usa este verificador en el color de frente del ícono contra su superficie; si el ícono es multicolor, evalúa el trazo de mayor contraste que transmita significado.

¿AAA importa de verdad para sitios típicos?

AA es el piso legal en la mayoría de jurisdicciones. AAA es aspiracional y no siempre se puede mantener en toda la paleta sin sacrificar identidad de marca. Apunta a AAA en cuerpo de texto siempre que puedas — ahí está el mayor beneficio de legibilidad — y acepta AA en hovers de acento y títulos grandes.

¿Se admiten nombres de color como "red" o "blue"?

Los selectores y campos hex aceptan códigos hex de 6 y 3 dígitos. Para colores nombrados de CSS, usa nuestra herramienta Colores Nombrados para encontrar el hex equivalente y pégalo aquí.

Verificador de Contraste