Verificador Contraste Color Gratis: WCAG AA AAA Accesibilidad Online

A No, esta herramienta solo funciona con pares de colores sólidos. Para imágenes necesitarás otro programa. Toma una captura de pantalla del área y usa un cuentagotas para muestrear los píxeles más claros y más oscuros donde esté el texto. Prueba ambos contra tu color de texto. Si alguno falla, considera añadir una capa semitransparente detrás del texto — un negro al 40% de opacidad suele funcionar bien.

A Sí, puedes ingresar colores en HEX, RGB o HSL. Solo pega el valor en el campo — la herramienta detecta el formato automáticamente. Por ejemplo, escribe 'rgb(255, 0, 0)' o 'hsl(0, 100%, 50%)' y funciona al instante. Es muy útil cuando tomas colores directamente del código CSS.

A Sí. Ingresa primero el par predeterminado, luego intercambia los colores de hover por separado. WCAG exige que los estados de hover y focus también cumplan con los contrastes mínimos — no solo el texto estático. Por ejemplo, si el fondo de tu botón cambia de #007bff a #0056b3 al pasar el ratón, prueba ambos contra el texto blanco. Un error común: los diseñadores aclaran demasiado los fondos en hover, lo que arruina el contraste.

A Los elementos no textuales también necesitan contraste, pero con reglas ligeramente distintas. WCAG exige una relación 3:1 para componentes de interfaz y objetos gráficos como íconos, botones y bordes de formularios. Pruebe aquí el color de su ícono contra el fondo. Si la relación es menor a 3:1, no cumple AA. Un consejo: use el mismo color del texto para los íconos.

A No confíes en tus ojos — son pésimos juzgando contraste. Dos colores que te parecen bien podrían alcanzar solo 2.5:1, fallando incluso WCAG AA. Esta herramienta calcula matemáticamente, considerando la percepción humana del color y la luminancia. Por ejemplo, un gris claro #C0C0C0 sobre blanco #FFFFFF se ve legible pero solo da 1.6:1. Verifica siempre con nuestro indicador de aprobado/reprobado.

A Sí, totalmente. El nivel AA exige 4,5:1 para texto normal menor de 18px, pero solo 3:1 para texto grande (18px negrita o 24px normal). El AAA pide 7:1 para texto normal y 4,5:1 para texto grande. Si tu encabezado de 32px da 4,0:1, pasa AA pero no AAA. Nuestra herramienta muestra ambos límites al instante. Consejo práctico: busca AA para el cuerpo y AAA para encabezados, ya que su tamaño facilita lograr la relación más alta.

A El calibrado del monitor y el tipo de panel afectan cómo se ven los colores, pero el ratio es matemática pura. Pasar 4.5:1 significa que la diferencia de luminancia es real, no subjetiva. Si se ve lavado, el problema suele ser el brillo, no el contraste. Pruébalo en otro dispositivo o ajusta el perfil de color del sistema. Consejo práctico: cambia al perfil sRGB en la configuración del sistema operativo; es el estándar para diseño web y te dará una idea más precisa de cómo percibirá tu paleta el usuario medio.

A La luz del sol no cambia las matemáticas, pero sí cambia lo que resulta cómodo. El nivel AA de 4,5:1 es el mínimo, pero al aire libre querrás más margen. Apunta a 7:1 (AAA) para cualquier texto que leas más de unos segundos. Para iconos o marcas de tiempo que se miran rápido, 3:1 puede colar, pero prueba tu paleta en un teléfono real con el brillo al máximo. Un par con 2,9:1 se verá invisible al exterior, aunque pase en tu monitor.

A Sin límite, sin registro y sin cuota diaria. Da igual si pruebas 5 pares o 500: cada resultado aparece en menos de un segundo con el ratio exacto y el veredicto AA/AAA. No se guarda nada, así que tu paleta de marca nunca sale del navegador. Una diseñadora que conozco probó 40 combinaciones hasta dar con un color de acento accesible para un cliente. Guárdala en marcadores y úsala como borrador mientras ajustas tu paleta.

A Ese método suele fallar. Un color negro con cincuenta por ciento de opacidad sobre fondo blanco genera un gris tenue que incumple las normas WCAG. Prueba siempre el tono resultante directamente en nuestro verificador. Introduce el valor RGB exacto del color mezclado para obtener una calificación precisa de inmediato.