Verificador de contraste de color (WCAG)

WCAG 2.1 AA exige 4.5:1 para texto normal y 3:1 para texto grande (18pt o 14pt en negrita). AAA exige 7:1 y 4.5:1. Los componentes de la interfaz necesitan >= 3:1.

El sRGB se corrige por gamma a lineal y luego la luminancia relativa = 0.2126R + 0.7152G + 0.0722B. Relación = (L1 + 0.05) / (L2 + 0.05), donde L1 es el más claro.

Accessible Perceptual Contrast Algorithm (para WCAG 3): tiene en cuenta el grosor del texto, la polaridad y la frecuencia espacial. Se muestra como referencia; las relaciones de WCAG 2 siguen siendo el estándar normativo hoy en día.

Sí, el Color Contrast Checker (WCAG) es 100% gratis, sin registro, sin tarifas ocultas y sin límites de uso. Todo el procesamiento se realiza localmente en tu navegador, garantizando una privacidad total.

Por supuesto. El Color Contrast Checker (WCAG) procesa todo en el lado del cliente, dentro de tu navegador. No se sube ni se almacena ningún dato en ningún servidor. Tu contenido permanece privado en tu dispositivo en todo momento.

Sí, el Color Contrast Checker (WCAG) es totalmente adaptable y funciona en smartphones y tablets. Puedes usarlo en cualquier dispositivo con un navegador web moderno, sin necesidad de descargar ninguna app.

No se necesita ninguna cuenta ni registro. Simplemente abre el Color Contrast Checker (WCAG) en tu navegador y empieza a usarlo de inmediato. No hay muros de registro ni restricciones de uso.

El Color Contrast Checker (WCAG) admite una amplia gama de formatos y lenguajes populares. Consulta la interfaz de la herramienta para ver la lista completa de opciones disponibles.

Solo tienes que introducir tu entrada en el campo indicado, ajustar la configuración a tu gusto y la herramienta la procesará al instante. Después puedes copiar el resultado al portapapeles o descargarlo.

El Color Contrast Checker (WCAG) funciona en todos los navegadores modernos, incluidos Chrome, Firefox, Safari, Edge y Opera. Para una mejor experiencia, usa la última versión de tu navegador preferido.

Según WCAG 2.1, el texto grande es cualquiera de 18pt en adelante, o de 14pt en adelante si está en negrita. Como las herramientas de diseño trabajan en píxeles, eso equivale aproximadamente a 24px en texto regular o unos 18.66px (comúnmente redondeado a 18.5px o 19px) en negrita. El texto grande solo necesita un ratio de contraste de 3:1 para AA y de 4.5:1 para AAA, mientras que el texto de cuerpo normal necesita los umbrales más estrictos de 4.5:1 y 7:1. La razón es sencilla: las letras más grandes y gruesas tienen trazos más anchos, por lo que siguen siendo legibles con menos contraste. Esta distinción importa porque un color de encabezado que aprueba a 24px puede reprobar directamente en un texto de cuerpo de 16px. Este comprobador muestra el ratio frente a todos los umbrales a la vez, para que veas si tu combinación supera el límite del texto normal o solo califica como texto grande.

Todo depende de qué umbral de WCAG se aplica a cada tamaño de fuente. Un encabezado renderizado a 24px o más (o 18.66px en negrita) se trata como texto grande y solo necesita un ratio de 3:1, mientras que el texto de cuerpo por debajo de ese tamaño es texto normal y debe alcanzar 4.5:1. Así, un primer plano y un fondo que producen, por ejemplo, un ratio de 3.5:1 obtendrán una insignia de Aprobado para el encabezado pero un claro Reprobado para el párrafo que use los mismos colores. El ratio en sí nunca cambia con el tamaño de la fuente, solo cambia el listón que debe superar. Por eso una paleta de colores puede parecer válida en tu sección principal y fallar silenciosamente en pies de foto y etiquetas. Esta herramienta renderiza muestras tanto de 16px como de 24px en la pestaña de Vista previa y enumera todos los umbrales, así que ves de inmediato dónde una combinación se sostiene y dónde falla.

Normalmente solo necesitas ajustar la luminosidad de un color en lugar de rehacer toda la paleta. El camino más rápido es oscurecer el texto o aclarar el fondo (o viceversa) en pasos pequeños hasta que el ratio supere el 4.5:1, manteniendo el tono original intacto para que la identidad de marca no se pierda. Este comprobador tiene botones dedicados de Oscurecer y Aclarar que desplazan la luminosidad de un color de forma incremental preservando su tono, y el ratio se actualiza en tiempo real para que puedas detenerte en cuanto aparezca un Aprobado. Un botón de Intercambiar invierte el primer plano y el fondo para probar la combinación inversa, que a veces aprueba cuando la original no lo hace. Si prefieres empezar de cero, el botón de Par accesible aleatorio genera una combinación que ya supera el 4.5:1, dándote una base conforme desde la que ajustar.

Sí. Puedes escribir un valor HEX de 3 o 6 dígitos, ajustar cada canal RGB de 0 a 255, modificar el tono, la saturación y la luminosidad en HSL, o usar el selector de color nativo, y las cuatro representaciones se actualizan juntas de forma automática. Cambiar cualquiera de las entradas recalcula las demás, así que un ajuste en un solo canal RGB se refleja al instante en los campos HEX y HSL y en el ratio de contraste en tiempo real. Esto importa porque las especificaciones de diseño y el código llegan en formatos mixtos: una guía de marca puede indicar HEX, un archivo CSS puede usar rgb(), y una herramienta de diseño puede exponer deslizadores HSL. Mantenerlos sincronizados evita conversiones manuales y errores de copiar y pegar. Cuando una combinación funciona, el botón Copiar como variables CSS te entrega un bloque :root listo para pegar con las propiedades personalizadas de primer plano y fondo para tu hoja de estilos.

No, siguen un umbral distinto y más bajo. El Criterio de Éxito 1.4.11 de WCAG 2.1, Contraste no textual, exige solo un contraste de 3:1 para los componentes de interfaz de usuario y los gráficos con significado, incluyendo bordes de campos, iconos, estados de conmutadores e indicadores de foco, medido frente a sus colores adyacentes. Es el mismo listón que el texto grande, no el 4.5:1 que se exige al texto normal. La idea es que el contorno de un botón o un icono no necesita ser tan nítido como un párrafo para seguir siendo perceptible, pero aun así debe ser distinguible. Un fallo común es un borde de campo gris pálido que desaparece sobre un formulario blanco. Este comprobador enumera el umbral de componentes de interfaz y gráficos junto con los niveles de texto, y renderiza un botón y una tarjeta con borde en la pestaña de Vista previa, para que confirmes que los elementos interactivos son visibles, no solo las palabras.