Acessibilidade de Cor: Por que as cores de sua landing page podem estar trancafiando visitantes

Você escolheu uma paleta em Figma. Pareceu limpa em seu display 5K em um quarto escuro. Depois você lançou, abriu a página em seu telefone ao sol, e apertou os olhos para ler seu próprio headline.

A maioria dos construtores trata cor como decoração. Não é. Cor é como visitantes acham sua CTA, analisam seus erros de formulário e decidem se sua página parece profissional ou desleixada. Quando o contraste está errado ou você sinaliza tudo só com matiz, um pedaço real de seu tráfego só rejeita, e eles não te contam por quê.

Este é o princípio que conserta.

O que acessibilidade de cor realmente é

Acessibilidade de cor significa qualquer um pode ler seu texto e agir em suas CTAs, incluindo pessoas com baixa visão, os 8% de homens que são daltônicos vermelho-verde, o visitante lendo em um pátio ensolarado e seu futuro eu às 2da com fadiga ocular.

"Se um design não funciona para todos, não funciona bem para ninguém." - Jared Spool

A ideia central é simples: contraste e clareza. O texto tem que claramente se destacar de seu fundo, e significado nunca pode viver só em cor.

Por que isto importa em uma landing page

Você não precisa se importar com acessibilidade por causa de um checklist. Você precisa se importar porque cada visitante que não consegue ler seu headline é um signup perdido.

Alcance

Aproximadamente 300 milhões de pessoas mundialmente têm alguma forma de deficiência de visão de cor. Adicione qualquer um em uma tela com brilho, em um telefone de orçamento ou sobre 50, e você está falando sobre um pedaço significativo de seu tráfego.

Confiança

Texto cinza fraco em branco lê como "isto parece inacabado". Até visitantes com visão perfeita sentem algo está errado. A página perde autoridade antes de chegarem em sua oferta.

Conversão

Se um visitante não consegue dizer qual botão é a ação primária, eles não escolhem um botão. Eles saem.

Como usar isto em sua página

Você não tem que desistir de sua marca. Você só tem que aplicá-la com um pouco mais de disciplina.

1. Acerte a barra de contraste WCAG

As Diretrizes de Acessibilidade de Conteúdo Web te dão números concretos. Use-os como seu piso.

• Texto do corpo: Mínimo 4.5:1.
• Texto grande (18pt+ ou 14pt negrito): Mínimo 3:1.

Execute seu hero headline, cópia do corpo e rótulos de CTA através de um verificador de contraste. Se o número está abaixo 4.5:1, aumente o peso, o tamanho ou a cor. Não envie o design até aqueles números passarem.

2. Teste sua página fora de Figma

Sua paleta tem que sobreviver ao mundo real.

• Luz solar direta: Abra em seu telefone fora. Você ainda consegue ler?
• Modo claro e escuro: Seu "sucesso verde" ainda parece sucesso quando o fundo vira?
• Night Shift / filtros de luz azul: Muitos visitantes navegam com um filtro morno. Confirme suas cores de acento ainda leem.

3. Nunca deixe cor levar significado sozinha

Se um visitante é daltônico, uma borda vermelha ao redor de um campo de formulário parece idêntico a um cinzento. Cor é uma dica, não um sinal.

• Faça isto: Pareie cor com um ícone, um rótulo ou texto. "Email é inválido" mais uma borda vermelha mais um ícone de aviso.
• Evite isto: Um ponto verde e um ponto vermelho sem rótulos de texto.

Para mais em sinais visuais, veja Ícones: Melhorando Navegação com Significado.

4. Cheque sua página através de olhos daltônicos

Use a pré-visualização de daltonismo em Figma ou Chrome DevTools. Depois olhe sua CTA, seus estados de erro e seus gráficos. Se um visitante deuteranopic não consegue dizer seu botão "Inscrever-se" de seu botão "Saiba mais", sua página está quebrada para eles.

Combinações comuns para observar:

• Verde e vermelho
• Azul e roxo
• Verde claro e amarelo

5. Não desapareça a cópia secundária muito longe

O erro que quase todo construtor solo faz: texto secundário vira #CCCCCC em branco. Parece elegante em mockups, ilegível na vida real. Construa hierarquia com peso e tamanho, não tornando texto desaparecer.

Se você está ajustando texto em geral, também verifique Regras de Legibilidade: Desenhando para Legibilidade.

---

Formas comuns de construtores quebrarem isto

Texto secundário cinzento em cinzento

• O erro: Subheads e captions pairam ao redor de contraste 2:1 porque "parece minimalista."
• A correção: Mantenha um piso 4.5:1. Obtenha hierarquia de peso de fonte e tamanho em vez.

Estados de erro só de cor

• O erro: Um campo vira vermelho com nenhuma mensagem e nenhum ícone.
• A correção: Adicione texto explícito ("Email é obrigatório") e um ícone. Cor é a terceira camada, não a primeira.

Cores de link que se blendo

• O erro: Links inline que são distinguíveis só por um azul um pouco diferente.
• A correção: Sublinhe links dentro de texto do corpo. É o sinal universal que não depende de cor.

---

Como produtos reais lidam com isto

Google Analytics

Seus gráficos nunca dependem só de cor. Estados de hover, rótulos numéricos e formas de legenda distintas significam até um visitante totalmente daltônico pode ler os dados.

Duolingo

Respostas certas não só viram verde, há um ícone de check e um som. Respostas erradas não só viram vermelhas, há um ícone de cruz e um som diferente. Três sinais para cada estado. Ninguém adivinha.

Gmail

A tag amarela "Importante" senta em um fundo branco limpo com uma borda escura. O contraste é alto e é pareado com texto. Fácil de notar, fácil de ler.

Princípios relacionados

Cor é um pedaço. Estes vão direto perto:

Ícones: Melhorando Navegação

Use ícones ao lado de cor para tornar sinais legíveis para todos.

Regras de Legibilidade

Como escolha de fonte, altura de linha e espaçamento tornam texto do corpo realmente legível.

Recursos e leitura complementar

Quem pode usar?

Uma ferramenta prática para checagem de contraste de cor e pré-visualização de sua paleta através de diferentes tipos de visão.

Diretrizes WCAG 2.1

A especificação oficial para acessibilidade de conteúdo web, os números que tudo o mais referencia.

Kolor

Um pequeno jogo que aguça seu olho para matiz e saturação.

Perguntas frequentes