• APROVADO
  • REPROVADO
  • DADOS
  • HUMANO

Como testar o contraste de erro com seu AI

Conecte este MCP ao seu cliente de IA uma única vez. Depois, você poderá testar combinações de cores para acessibilidade instantaneamente.

Pergunte à IA sobre esta página

Resposta rápida

Como posso saber se meu texto de erro é legível?

Peça para sua IA realizar um teste de contraste usando seus códigos hexadecimais ou elementos de UI específicos. Ela dirá na hora se o seu texto vermelho de erro atende aos requisitos de acessibilidade nos fundos escolhidos.

Os resultados.

O que você recebe nestes testes.

A IA cuida dos cálculos e das normas, entregando resultados claros para você.

APROVADO

Pares de cores válidos

A IA confirma que seu texto vermelho atende às taxas de contraste. Você recebe sinal verde para usar essas cores na sua interface.

REPROVADO

Alertas de acessibilidade

A IA identifica onde o texto vermelho some no fundo. Ela sinaliza essas combinações específicas como não conformes.

DADOS

Taxas de contraste

Você recebe as taxas numéricas exatas calculadas pela ferramenta. Isso ajuda a entender o quão próximo você está do limite permitido.

HUMANO

Decisões de design

A IA fornece os dados, mas você decide quais ajustes de cor ficam melhores. Você escolhe a paleta final com base nos resultados.

O fluxo

O que sua IA faz quando recebe o pedido.

A IA atua como um auditor especializado para suas escolhas de cores.

  1. Analisar entrada

    Sua IA recebe os códigos hexadecimais do texto de erro e as cores de fundo.

    check_danger_text_contrast

  2. Calcular taxas

    A ferramenta calcula a luminância e a taxa de contraste entre o texto vermelho e o fundo.

    check_danger_text_contrast

  3. Comparar padrões

    A IA compara a taxa calculada com as diretrizes de acessibilidade para ver se ela passa.

    check_danger_text_contrast

  4. Relatar resultados

    A IA informa exatamente quais combinações funcionam e quais falham.

    check_danger_text_contrast

Teste

Copie estes comandos para começar.

Use estes prompts para disparar o teste de contraste imediatamente.

Pontos de partida

Substitua os códigos hexadecimais nestes comandos pelos valores reais do seu design.

WCAG Color Contrast Connector

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

Link do conectorhttps://edge.vinkius.com/vk_preview_ToTQpdJuObTgdPgJyLWHlH7B6StfiSmankHl08eC/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 — WCAG Color Contrast capabilities are ready to use.
Configuração · claude_desktop_config.jsonCopiar
{
  "mcpServers": {
    "color-contrast-checker-mcp": {
      "url": "https://edge.vinkius.com/vk_preview_ToTQpdJuObTgdPgJyLWHlH7B6StfiSmankHl08eC/mcp"
    }
  }
}
Copie no chat04

  • Verifique o contraste do texto #FF0000 em um fundo #FFFFFF.

  • Este texto de erro vermelho (#D32F2F) passa nos testes de contraste em um fundo cinza escuro (#212121)?

  • Execute um teste de contraste para minhas cores de estado de erro: texto #B00020 e fundo #F5F5F5.

  • Verifique se meu texto vermelho de erro é legível neste fundo específico: #000000.

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

Comece aqui

Conecte o Color Contrast Checker uma vez e depois é só pedir.

Clique no link para conectar o MCP ao seu cliente. Seu login permanece criptografado e você pode começar a testar cores na hora.

Conectar Color Contrast Checker ao seu AI

FAQ

Como esta tarefa funciona.

  • 01

    A IA pode alterar meus arquivos CSS automaticamente?

    Não. A IA apenas verifica as cores que você fornece; ela não pode modificar seu código ou arquivos de design.

  • 02

    Ela verifica cores que não sejam vermelho?

    Não. Esta ferramenta específica foi projetada para verificar apenas o texto vermelho de erro.

  • 03

    Ela vai sugerir novos códigos hexadecimais para mim?

    A IA pode sugerir alternativas se um teste falhar, mas ela faz isso apenas através da sua conversa.

  • 04

    Posso verificar vários fundos de uma vez?

    Sim, você pode fornecer uma lista de diferentes códigos hexadecimais de fundo em um único comando.

  • 05

    A IA salva minhas paletas de cores?

    Não. A IA não armazena seus dados de design ou combinações de cores após o fim da sessão.

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

Conecte WCAG Color Contrast ao Claude, Cursor, ChatGPT e outros