- PASS
- FAIL
- WARN
- HUMAN
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.
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_contrastCá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_contrastPrueba de tamaños
La herramienta comprueba si los colores funcionan para texto de cuerpo estándar frente a encabezados más grandes.
check_color_contrastReporte 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.
https://edge.vinkius.com/vk_preview_hc2RovnBSudbXvkpfLpH4ef2sc9X9Pt3zfhUEHq9/mcpClaude Desktop
Sigue los pasos siguientes para conectarte en segundos.
- 1In Claude Desktop, open Settings → Connectors.
- 2Click “Add custom connector” and paste the connector link above as the remote MCP server URL.
- 3Click Add and start a new chat — colord capabilities are ready to use.
{
"mcpServers": {
"color-contrast-checker-alternative-mcp": {
"url": "https://edge.vinkius.com/vk_preview_hc2RovnBSudbXvkpfLpH4ef2sc9X9Pt3zfhUEHq9/mcp"
}
}
}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 IAFAQ
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
