• PASS
  • FAIL
  • WARN
  • HUMAN

Como auditar paletas de design system com sua IA

Conecte sua paleta de cores ao seu cliente de IA para realizar testes de acessibilidade instantaneamente. A IA faz todos os cálculos de contraste por você.

Pergunte à IA sobre esta página

Resposta rápida

Como posso verificar a acessibilidade das cores da minha marca?

Sua IA utiliza o Color Contrast Checker para testar combinações de cores seguindo as diretrizes WCAG para diferentes tamanhos e formatos de texto. Você receberá um relatório claro de quais pares passam ou falham. Isso abrange desde códigos hexadecimais até componentes específicos de UI.

Onde cada problema é registrado.

Resultados da auditoria

A IA processa sua paleta e organiza os resultados nestas categorias.

PASS

Pares em conformidade

A IA identifica combinações de cores que atendem aos padrões WCAG para textos normais e grandes. Você recebe uma lista de cores seguras para usar juntas.

FAIL

Violações de acessibilidade

A IA sinaliza combinações que ficam abaixo das taxas de contraste exigidas, especificando exatamente quais cores estão causando o problema.

WARN

Alertas de casos limítrofes

A IA destaca cores que passam para textos grandes, mas falham em textos de corpo menores. Isso ajuda a evitar problemas sutis de usabilidade.

HUMAN

Decisões de design

A IA identifica onde as cores estão no limite para passar. Você decide se ajusta as cores da marca ou altera o peso do texto.

O fluxo

O que sua IA faz ao receber a paleta.

A IA pega seus dados brutos de cores e os submete a uma série de verificações matemáticas.

  1. Ingerir cores

    Sua IA lê os códigos hexadecimais ou arrays de cores que você fornecer no prompt ou no arquivo de design.

    check_color_contrast

  2. Calcular proporções

    A IA executa o cálculo de contraste para cada combinação de primeiro plano e fundo que você especificou.

    check_color_contrast

  3. Testar tamanhos

    A ferramenta verifica se as cores funcionam para textos de corpo padrão em comparação com títulos maiores.

    check_color_contrast

  4. Relatar resultados

    A IA resume os pares que passaram e os que falharam em uma lista legível para sua revisão.

    check_color_contrast

Teste

Copie estes exemplos para começar.

Use estes prompts para iniciar uma auditoria.

Pontos de partida

Substitua o texto entre colchetes pelos seus códigos hexadecimais ou caminhos de arquivo reais.

colord Connector

Tudo pronto. Escolha seu cliente MCP e siga as instruções de configuração.

Link do conectorhttps://edge.vinkius.com/vk_preview_hc2RovnBSudbXvkpfLpH4ef2sc9X9Pt3zfhUEHq9/mcp

Claude Desktop

Siga os passos abaixo para conectar em 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.
Configuração · claude_desktop_config.jsonCopiar
{
  "mcpServers": {
    "color-contrast-checker-alternative-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_hc2RovnBSudbXvkpfLpH4ef2sc9X9Pt3zfhUEHq9/mcp"
    }
  }
}
Copie no chat04

  • Verifique o contraste para estes códigos hexadecimais: #FFFFFF e #000000.

  • Audite a paleta da minha marca neste arquivo do Figma para conformidade com WCAG AA.

  • Teste estas cores para acessibilidade em textos grandes: #333333 e #F5F5F5.

  • Execute uma verificação de contraste nas cores primárias da minha marca listadas neste arquivo JSON.

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

Comece aqui

Conecte o Color Contrast Checker uma vez e pronto.

Basta clicar para conectar o MCP ao seu cliente de preferência. Suas credenciais ficam criptografadas e você pode começar a auditar imediatamente.

Conectar Color Contrast Checker à sua IA

FAQ

Como funciona esta tarefa

  • 01

    A IA pode corrigir minhas cores para mim?

    Não. A IA identifica as falhas, mas você deve escolher manualmente os novos valores de cor para manter a integridade da marca.

  • 02

    Ela verifica daltonismo?

    A ferramenta foca em taxas de contraste. Ela não simula tipos específicos de deficiência de visão de cores.

  • 03

    Posso enviar um arquivo completo de design system?

    Sim. Se o seu cliente de IA conseguir ler o arquivo, a IA poderá passar os dados de cores para a ferramenta.

  • 04

    A IA vai alterar meus arquivos do Figma?

    Não. A IA apenas lê os dados de cores para realizar a verificação. Ela não pode escrever ou modificar seus arquivos de design.

  • 05

    Suporta RGB ou HSL?

    A ferramenta trabalha com códigos hexadecimais, mas seu cliente de IA pode converter RGB ou HSL para hex antes de rodar a verificação.

  • Mais dúvidas sobre o Color Contrast Checker? A página do Connector responde. Veja tudo o que o Connector Color Contrast Checker pode fazer

Conecte colord ao Claude, Cursor, ChatGPT e outros