Ir al contenido
OneKitly
Registrarse · Entrar

Comprobador de contraste de color

Relación de contraste WCAG entre texto y fondo, con aprobado/fallo AA/AAA y una vista previa.

Herramientas relacionadas

Todas las herramientas: Colores y CSS →
Inversor de colorInvierte un color (255 − RGB) o toma su complementario, en HEX/RGB/HSL/CMYK con el contraste.Generador de esquemas de colorDeriva esquemas complementario, análogo, triádico, tetrádico, dividido y monocromático de un color base.Selector de color de imagenCarga una imagen, haz clic para muestrear cualquier píxel y extrae una paleta dominante, con HEX y RGB de cada muestra.Generador de paletas de colorCrea una paleta basada en armonía que puedes bloquear y regenerar, estilo Coolors, con copiar todos los HEX.Conversor de coloresConvierte un color a HEX, RGB, HSL, HSV, CMYK, LAB y OKLCH, con el contraste.Compresor de CSSMinifica CSS eliminando comentarios y espacios para reducir el tamaño de tu hoja de estilos.Laboratorio de CSS FlexboxExperimenta con flex-direction, wrap, justify-content, align-items y gap — vista previa en vivo y CSS para copiar.Generador de CSS GridConstruye un layout CSS Grid visualmente — columnas, filas, espacios y alineación — con vista previa en vivo y CSS para copiar.

Abre Comprobador de contraste de color y obtienes una respuesta al momento, sin crear ninguna cuenta. Está clasificada en Colores y CSS dentro de nuestro catálogo, junto a Inversor de color y Generador de esquemas de color.

Cómo usarlo

  1. Abre la herramienta — sin registro ni instalación.
  2. Introduce tus datos o ajusta las opciones disponibles.
  3. Obtén tu resultado al instante y cópialo o descárgalo.

Preguntas frecuentes

¿Qué es Comprobador de contraste de color?

Relación de contraste WCAG entre texto y fondo, con aprobado/fallo AA/AAA y una vista previa.

¿En qué casos se usa realmente?

Llevar un color de una herramienta de diseño a una hoja de estilos, construir una paleta alrededor de un color de marca y comprobar que el texto será legible sobre él.

¿Cuál es el error más frecuente?

Juzgar el contraste a ojo. Dos colores que parecen distintos en un monitor luminoso pueden suspender de lleno la ratio de accesibilidad, y esa ratio es lo que medirá una auditoría.

¿En qué se diferencia Comprobador de contraste de color de Inversor de color?

Están próximos pero responden a preguntas distintas: Inversor de color es el que conviene abrir cuando se trata de invierte un color (255 − RGB) o toma su complementario, en HEX/RGB/HSL/CMYK con el contraste. Elige el que encaje con tu punto de partida — ambos son gratis.

¿Hay una herramienta para el siguiente paso?

Generador de esquemas de color es el más cercano después de este: Deriva esquemas complementario, análogo, triádico, tetrádico, dividido y monocromático de un color base.

¿Qué más conviene tener abierto al lado?

Selector de color de imagen y Generador de paletas de color: aparecen en la misma tarea lo bastante a menudo como para merecer otra pestaña.

¿De dónde salen los datos?

Las conversiones entre HEX, RGB y HSL son exactas. El contraste sigue la fórmula de luminancia relativa de WCAG 2; el CMYK depende del dispositivo, así que un valor en pantalla es una aproximación de lo que se imprimirá.

Para saber más

Todas las guías →
ExplicaciónRelación de contraste: cómo la calcula realmente la WCAGLa relación WCAG es (L1 + 0,05) ÷ (L2 + 0,05), y L es la luminancia relativa, no el brillo. El verde aporta el 71,52 % y el azul el 7,22 %, por eso el azul puro sobre blanco aprueba con 8,59:1 mientras el gris medio suspende con 3,95:1. Aquí está el cálculo completo, ejecutado de principio a fin.ExplicaciónDegradados, bandeado y por qué el centro se ve turbioInterpolar en sRGB promedia números codificados en gamma: el punto medio de rojo a verde es #808000 cuando la respuesta a media luz es #bcbc00 — un 57,2 % menos de luz. El bandeado es otro problema aritmético: 8 bits dan 256 escalones, y un degradado oscuro puede tener sólo 28. Aquí están ambos, calculados.ExplicaciónLos esquemas de color son geometría sobre una rueda — y la rueda está malComplementario, tríada, análogo y complementario dividido no son más que rotaciones: suma 180°, 120°, 30° o 150° a un tono. La aritmética es trivial. El problema es que el círculo de tonos HSL no es perceptualmente uniforme — el amarillo y el azul con la misma luminosidad HSL difieren 12,85 veces en luminancia — así que una paleta generada hay que comprobarla luego en contraste.TutorialHEX vs RGB: cómo leer y convertir coloresHEX y RGB son dos notaciones para los mismos colores. Aquí tienes cómo leer cada una, convertir entre ellas y añadir transparencia.GuíaQué puede quitar un minificador y qué no debe tocarLa minificación tiene que preservar el significado, y lo interesante son los espacios que llevan significado: el combinador descendiente, los espacios dentro de calc(), el hueco entre dos elementos en línea. Medido aquí sobre archivos reales, incluido lo que brotli te iba a ahorrar de todas formas.GuíaEmbellecer o minificar: para qué sirve cada uno y qué le hace al pesoCuatro hojas de estilo reales pasadas por el minificador, medidas en crudo y tras gzip. Quitar todos los espacios ahorró 48, 103, 104 y 147 bytes comprimidos; quitar los comentarios, 57, 1 358, 2 420 y 1 042. Y las cinco entradas que este minificador rompe.