• PASS
  • FAIL
  • WARN
  • HUMAN

Cómo auditar paletas de diseño con tu IA

Conecta tu paleta de colores a tu cliente de IA para realizar pruebas de accesibilidad al instante. La IA calcula los ratios de contraste por ti.

Pregunta a la IA sobre esta página

Respuesta rápida

¿Cómo puedo verificar la accesibilidad de mis colores?

Tu IA utiliza Color Contrast Checker para probar combinaciones de colores según las pautas WCAG para distintos tamaños y formatos de texto. Obtendrás un desglose claro de qué pares cumplen o fallan. Esto abarca desde códigos hex hasta componentes específicos de la interfaz.

Donde se registran todos los problemas.

Resultados de la auditoría

La IA procesa tu paleta y organiza los resultados en estas categorías.

PASS

Pares conformes

La IA identifica combinaciones de colores que cumplen con los estándares WCAG tanto para texto normal como para texto grande. Obtienes una lista de colores seguros para usar juntos.

FAIL

Violaciones de accesibilidad

La IA señala las combinaciones que no alcanzan los ratios de contraste requeridos. Especifica exactamente qué colores causan el problema.

WARN

Advertencias de casos límite

La IA resalta colores que pasan para texto grande pero fallan en cuerpos de texto pequeños. Esto te ayuda a evitar problemas sutiles de usabilidad.

HUMAN

Decisiones de diseño

La IA identifica dónde los colores están muy cerca del límite. Tú decides si ajustar los colores de la marca o cambiar el peso del texto.

El flujo

Qué hace tu IA al recibir la paleta.

La IA toma tus datos de color y los somete a una serie de comprobaciones matemáticas.

  1. Ingesta de colores

    Tu IA lee los códigos hex o los arrays de colores que incluyas en tu prompt o archivo de diseño.

    check_color_contrast
  2. Cálculo de ratios

    La IA realiza los cálculos de contraste para cada combinación de primer plano y fondo que hayas especificado.

    check_color_contrast
  3. Prueba de tamaños

    La herramienta comprueba si los colores funcionan para texto de cuerpo estándar frente a encabezados más grandes.

    check_color_contrast
  4. Reporte de resultados

    La IA resume los pares que pasan y los que fallan en una lista legible para tu revisión.

    check_color_contrast

Pruébalo

Copia estos ejemplos para empezar.

Usa estos prompts para iniciar una auditoría.

Puntos de partida

Reemplaza el texto entre corchetes con tus códigos hex o rutas de archivos reales.

colord Connector

Todo listo. Elige tu cliente MCP y sigue las instrucciones de configuración.

Enlace del conectorhttps://edge.vinkius.com/vk_preview_hc2RovnBSudbXvkpfLpH4ef2sc9X9Pt3zfhUEHq9/mcp

Claude Desktop

Sigue los pasos siguientes para conectarte en segundos.

  1. 1In Claude Desktop, open Settings → Connectors.
  2. 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
  3. 3Click Add and start a new chat — colord capabilities are ready to use.
Configuración · claude_desktop_config.jsonCopiar
{
  "mcpServers": {
    "color-contrast-checker-alternative-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_hc2RovnBSudbXvkpfLpH4ef2sc9X9Pt3zfhUEHq9/mcp"
    }
  }
}
Copia en el chat04
  • Comprueba el contraste de estos códigos hex: #FFFFFF y #000000.

  • Audita mi paleta de marca de este archivo de Figma para cumplir con WCAG AA.

  • Prueba estos colores para la accesibilidad de texto grande: #333333 y #F5F5F5.

  • Realiza una comprobación de contraste de mis colores de marca principales listados en este archivo JSON.

  • Claude
  • ChatGPT
  • Cursor
  • VS Code
  • Windsurf
  • Claude Code
  • JetBrains
  • Cline

Empieza aquí

Conecta Color Contrast Checker una vez y luego pregunta.

Solo haz clic para conectar el MCP a tu cliente preferido. Tus credenciales permanecen cifradas y puedes empezar a auditar de inmediato.

Conecta Color Contrast Checker a tu IA

FAQ

Cómo funciona esta tarea

  • 01

    ¿Puede la IA corregir mis colores por mí?

    No. La IA identifica los fallos, pero tú debes elegir manualmente los nuevos valores de color para mantener la integridad de la marca.

  • 02

    ¿Comprueba el daltonismo?

    La herramienta se centra en los ratios de contraste. No simula tipos específicos de deficiencia en la visión del color.

  • 03

    ¿Puedo subir un archivo completo de un sistema de diseño?

    Sí, si tu cliente de IA puede leer el archivo, la IA puede pasar los datos de color a la herramienta.

  • 04

    ¿Cambiará la IA mis archivos de Figma?

    No. La IA solo lee los datos de color para realizar la comprobación. No puede escribir ni modificar tus archivos de diseño.

  • 05

    ¿Es compatible con RGB o HSL?

    La herramienta trabaja con códigos hex, pero tu cliente de IA puede convertir RGB o HSL a hex antes de ejecutar la comprobación.

  • ¿Tienes más dudas sobre Color Contrast Checker? La página del conector las responde. Ver todo lo que puede hacer el conector Color Contrast Checker

Conecta colord a Claude, Cursor, ChatGPT y más