256 Tools

Comprobador de contraste de color

Ejemplo de texto grande

Así se ve el texto de cuerpo normal con este contraste.

Ratio de contraste
4,48:1
AA · texto normal✕
AAA · texto normal✕
AA · texto grande✓
AAA · texto grande✕
Color de texto sugerido:#717171

Herramientas externas relacionadas

Algunos enlaces son enlaces de afiliados.

Adobe ColorUna herramienta gratuita en línea para crear y explorar paletas de colores y temas. Usa la rueda de color para crear esquemas armoniosos, o extrae colores de una imagen. Las paletas se sincronizan directamente con Creative Cloud.CanvaUna popular plataforma de diseño con arrastrar y soltar para crear publicaciones en redes sociales, presentaciones, carteles y más. Ofrece una enorme biblioteca de plantillas, fotos y gráficos gratuitos y premium. No se necesita experiencia en diseño.

Herramientas relacionadas

Conversor de ColorConvierte cualquier color entre HEX, RGB, HSL, HSV y RGBA a la vez. Edita un valor, copia con un clic, con alfa y contraste WCAG.Generador de Paletas de ColoresGenera paletas de colores armónicas desde un HEX base usando esquemas complementario, análogo, triádico y más. Bloquea colores, regenera el resto y exporta a CSS, Tailwind o JSON.Generador de GradientesCrea gradientes CSS lineales, radiales y cónicos con múltiples paradas de color. Ajusta ángulo, forma y centro, y copia el CSS de background o el valor de Tailwind con un clic.Extractor de Colores de ImagenExtrae la paleta de colores dominantes de cualquier imagen en tu navegador, sin subir nada. Obtén HEX, RGB y porcentaje (%) de cada color, elige cuántos colores y exporta como CSS/JSON.

Comprueba si tu texto se lee bien sobre su fondo. Introduce un color de texto y un color de fondo para ver el ratio de contraste WCAG y si supera los niveles AA y AAA para texto normal y grande, con vista previa en tiempo real. Si falla, la herramienta sugiere un color similar que sí lo pase. Todo funciona en tu navegador.

Cómo usarlo

  1. Elige el color del texto.
  2. Elige el color de fondo.
  3. Consulta el ratio de contraste y los resultados AA / AAA.
  4. Si falla, aplica el color sugerido que sí pasa.

Qué significan los niveles WCAG

El ratio de contraste va de 1:1 (sin contraste) a 21:1 (negro sobre blanco). Para texto normal, AA requiere al menos 4.5:1 y AAA requiere 7:1. Para texto grande, AA requiere 3:1 y AAA requiere 4.5:1. Cumplir al menos AA ayuda a las personas con baja visión a leer el contenido con comodidad.

Dos muestras: una con contraste fuerte y otra con contraste débilAaAa

Características

Ratio de contraste exacto

Consulta el ratio WCAG preciso entre tus dos colores.

Resultados AA y AAA

Comprueba de una vez si pasa o falla para texto normal y grande.

Vista previa en tiempo real

Ve texto real con tus colores para juzgar la legibilidad directamente.

Color alternativo sugerido

Si el contraste es insuficiente, obtén un color cercano que cumpla AA.

Privacidad por diseño

Todo se calcula en tu navegador. Nada se sube.

Casos de uso habituales

UI accesible

Asegúrate de que el texto de la interfaz cumple los requisitos de accesibilidad.

Colores de marca

Comprueba si los pares de colores corporativos son legibles como texto.

Botones y enlaces

Verifica que las etiquetas de botones y enlaces de color sean legibles.

Documentos y presentaciones

Confirma que el texto destaca suficientemente sobre fondos de color.

Notas y consejos

  • Texto grande significa aproximadamente 18 pt o 14 pt negrita y más, que tiene requisitos de contraste menores.
  • No dependas solo del color para transmitir significado; combínalo con texto o iconos.
  • El contraste es un factor de legibilidad, junto con el tamaño de fuente y el espaciado.
  • Todo funciona en tu dispositivo; nada se envía a un servidor.

Preguntas frecuentes

¿Qué es el ratio de contraste?
Mide cuánto difieren dos colores en brillo, de 1:1 (idénticos) a 21:1 (negro sobre blanco). A mayor valor, más fácil de leer.
¿Cuál es la diferencia entre AA y AAA?
AA es el nivel de accesibilidad estándar (4.5:1 para texto normal); AAA es más estricto (7:1) para mayor legibilidad.
¿Qué se considera texto grande?
Aproximadamente 18 pt regular o 14 pt negrita y más. El texto grande tiene requisitos de contraste menores (3:1 para AA).
¿Qué es el color sugerido?
Si tu color de texto no pasa AA, la herramienta lo aclara u oscurece hasta alcanzar 4.5:1 frente a tu fondo, y te ofrece ese color.
¿Se sube algo a un servidor?
No. La comprobación se ejecuta completamente en tu navegador. Nada se envía a un servidor.

Usamos cookies para anuncios y análisis.