Ir al contenido principal
Bethemesh
Web y SEO

Verificador de contraste

Compara un color de texto con un color de fondo, calcula su relación de contraste y verifica rápidamente los umbrales WCAG AA y AAA.

Integrar este widget

Personaliza el resultado, comprueba la vista previa y copia el código.

Vista previa

Tipo de código de integración

Código para copiar

Responsive y redimensionado automáticamente por Bethemesh.

  • 100 % local
  • Instantáneo
  • Gratis
  • Sin cuenta
  • Funciona sin conexión
  • Portapapeles

¿Por qué usar esta herramienta?

Mide la relación de contraste entre un color de texto y un color de fondo y compara el resultado con los umbrales WCAG AA y AAA. La herramienta permite comprobar rápidamente una combinación antes de utilizarla en una interfaz, web o componente.

100 % local y seguro

Tus datos permanecen en tu dispositivo y nunca se envían a nuestros servidores.

Procesamiento inteligente

Crea y verifica contenidos web con ajustes pensados para obtener resultados utilizables.

Formatos compatibles

Formatos web, metadatos y contenido estructurado según las funciones disponibles.

Ahorra tiempo

Obtén un resultado limpio y listo para usar en segundos, sin instalar programas ni configurar procesos complejos.

Guide

Cómo utilizar esta herramienta

  1. 1

    Introduce los dos colores

    Indica el color del texto y el del fondo que quieres comparar.

  2. 2

    Consulta la relación de contraste

    La herramienta calcula el contraste e indica los niveles WCAG correspondientes.

  3. 3

    Ajusta los colores si es necesario

    Modifica uno de los colores y vuelve a comprobarlos hasta obtener un resultado adecuado.

Consejos y buenas prácticas

  • Un buen contraste mejora la legibilidad, pero la accesibilidad también depende del tamaño del texto, la jerarquía visual y las interacciones.
  • Los umbrales aplicables pueden diferir entre texto normal y texto de gran tamaño.
  • Comprueba los colores en su contexto real, incluidos distintos dispositivos y estados hover, focus o disabled.

Preguntas frecuentes

¿Qué es una relación de contraste?

Mide la diferencia de luminancia entre dos colores, desde 1:1 para colores idénticos hasta 21:1 para el contraste máximo.

¿Qué diferencia hay entre WCAG AA y AAA?

AAA utiliza requisitos más estrictos que AA. El nivel adecuado depende del contenido y del grado de conformidad buscado.

¿Un buen contraste garantiza la accesibilidad?

No. El contraste es solo uno de los criterios, junto con navegación por teclado, etiquetas, estructura y estados de foco visibles.

¿Se guardan o envían los colores introducidos?

No. El cálculo se realiza localmente en tu navegador.

¿Te ha resultado útil esta herramienta?

También te puede interesar

Workflow recomendado

Continúa tu proceso

Descubre herramientas que encajan antes, después o como complemento de esta.

Herramientas complementarias

Web y SEO

Codificador y decodificador URL

Codifica o decodifica una URL, sus parámetros y los caracteres especiales que contiene.

100 % local
Usar esta herramienta
Web y SEO

Generador de slug

Convierte un título o una frase en un slug limpio y listo para utilizar en una URL.

100 % local
Usar esta herramienta
Web y SEO

Validador de URL

Valida, normaliza e inspecciona direcciones web localmente.

100 % local
Usar esta herramienta