Centro Global de Herramientas
Idioma actual: Spanish

Contrast Checker

Compara el color del texto y del fondo para validar contraste y niveles WCAG.

Cómo usarlo

  1. Ingresa colores HEX de primer plano y fondo o selecciónalos con los selectores.
  2. Usa el botón para intercambiar rápidamente los colores.
  3. Revisa la relación de contraste y los resultados WCAG más abajo.

Usa valores HEX de 6 dígitos (por ejemplo #111827).

Usa valores HEX de 6 dígitos (por ejemplo #111827).

Guía rápida de contraste

Usa este verificador para validar legibilidad rápidamente y pasa a guías prácticas cuando necesites ajustar colores con más detalle.

Cuándo usar esta herramienta

  • Antes de publicar colores nuevos para botones, enlaces o texto.
  • Cuando en revisión dicen que el texto se lee mal.
  • Cuando pruebas colores de marca en fondos claros y oscuros.

Pasos rápidos

  1. Ingresa los HEX de texto (primer plano) y fondo.
  2. Revisa ratio y resultados WCAG AA/AAA.
  3. Ajusta colores y repite hasta que el texto clave apruebe.

Errores comunes

  • Revisar solo títulos y no texto pequeño.
  • Validar un solo estado y olvidar hover, focus o disabled.
  • Decidir por gusto visual sin mirar el ratio.

Guías relacionadas de Contrast Checker

Lee guías breves para corregir bajo contraste y mejorar decisiones de color accesible en UI.