WCAG 1.4.3: Contraste (Mínimo)

O que Esta Regra Significa

WCAG 1.4.3 — Contraste (Mínimo) é um critério de sucesso de Nível AA sob a Diretriz 1.4 (Distinguível) das Web Content Accessibility Guidelines 2.2. Ele determina que a apresentação visual de texto e imagens de texto mantenha uma razão de contraste de luminância suficiente em relação ao seu plano de fundo, para que pessoas com baixa visão moderada possam ler o conteúdo sem depender de tecnologia assistiva que aumente o contraste.

As razões de contraste exigidas são as seguintes. Texto normal — qualquer texto menor que 18 pontos (aproximadamente 24 pixels CSS) ou 14 pontos em negrito (aproximadamente 18,67 pixels CSS) — deve atingir uma razão de contraste de pelo menos 4,5:1. Texto grande, definido como texto com 18 pontos ou mais em peso normal ou 14 pontos em negrito, exige uma razão de contraste mínima de 3:1. Os mesmos limites se aplicam a imagens de texto: imagens rasterizadas ou vetoriais que renderizam caracteres legíveis também devem atender a essas razões em relação a qualquer cor de fundo adjacente.

A razão de contraste é calculada usando a fórmula de luminância relativa definida na especificação WCAG. A luminância relativa (L) é calculada a partir de valores de cor sRGB após correção de gama, e a razão é expressa como (L1 + 0,05) / (L2 + 0,05), em que L1 é o maior dos dois valores de luminância e L2 é o menor. Uma razão de 1:1 significa ausência total de contraste (cores idênticas), enquanto 21:1 é o máximo, alcançado apenas por preto puro sobre branco puro.

O critério abrange todo o texto em primeiro plano renderizado pelo navegador, incluindo texto dentro de botões, links, rótulos, campos de formulário, células de tabela, tooltips, texto de placeholder dentro de inputs e texto sobreposto a imagens ou gradientes. Ele também abrange elementos de texto em SVG e texto renderizado via conteúdo gerado por CSS (pseudo-elementos ::before e ::after).

WCAG 1.4.3 define várias exceções oficiais que são explicitamente excluídas da exigência:

• Texto incidental: Texto ou imagens de texto que sejam puramente decorativos, não estejam visíveis ou façam parte de um componente de interface de usuário inativo (desabilitado) estão isentos. Por exemplo, o rótulo esmaecido de um campo de formulário desabilitado não precisa atender à razão.
• Logotipos: Texto que faça parte de um logotipo ou nome de marca não tem exigência mínima de contraste, porque a identidade da marca muitas vezes depende de escolhas específicas de cor e espera-se que as pessoas reconheçam logotipos visualmente.
• Texto grande: Como observado acima, texto grande tem uma razão relaxada de 3:1 em vez de 4,5:1, reconhecendo que formas de letras maiores são mais fáceis de discernir em contraste mais baixo.

Um aprovado ocorre quando a razão de contraste calculada é igual ou superior ao limite aplicável para cada trecho de texto visível e não isento. Uma falha ocorre quando qualquer texto visível e não isento ou imagem de texto fica abaixo do limite, mesmo que por uma fração de ponto na razão.

Por Que Isso Importa

Aproximadamente 2,2 bilhões de pessoas no mundo vivem com algum tipo de deficiência visual, de acordo com a Organização Mundial da Saúde. Um subconjunto significativo dessas pessoas — incluindo pessoas com baixa visão devido a condições como catarata, glaucoma, degeneração macular e retinopatia diabética — ainda consegue ler texto na tela quando o contraste é suficiente, mas tem dificuldade ou falha completamente quando o contraste é ruim. Contraste (Mínimo) aborda diretamente as necessidades dessa população ao definir um piso mensurável e testável abaixo do qual o texto se torna inacessível.

Além da baixa visão diagnosticada, estima-se que 8% dos homens e 0,5% das mulheres de ascendência do norte da Europa experimentem algum tipo de deficiência de visão de cores (daltonismo). Embora daltonismo seja distinto de baixo contraste, muitas formas de daltonismo reduzem a diferença de luminância percebida entre certos matizes, tornando o contraste inadequado ainda mais problemático. Um rótulo vermelho em um fundo verde pode parecer quase cinza uniforme para alguém com deuteranopia, tornando o texto invisível se o contraste de luminância subjacente for insuficiente.

Idosos são desproporcionalmente afetados. O olho envelhecido perde sensibilidade ao contraste e o tamanho da pupila diminui, reduzindo a quantidade de luz que atinge a retina. Uma pessoa na casa dos setenta pode precisar de um contraste de luminância significativamente maior para alcançar a mesma legibilidade que uma pessoa na casa dos trinta, mesmo sem um diagnóstico clínico de baixa visão.

Considere um cenário concreto do mundo real: um site de e-commerce turco usa texto cinza claro (#999999) em um fundo branco (#FFFFFF) para descrições de produtos e informações de preço — uma tendência de design comum, favorecida por sua estética minimalista. A razão de contraste dessa combinação é de aproximadamente 2,85:1, bem abaixo do limite de 4,5:1. Uma pessoa com degeneração macular em estágio inicial pode ser completamente incapaz de ler o preço de um produto, forçando-a a abandonar a compra. Isso não apenas exclui uma pessoa de uma transação comercial fundamental, como também representa uma perda direta de receita para o comerciante e uma exposição legal em jurisdições que exigem conformidade com acessibilidade.

Do ponto de vista de usabilidade e SEO, texto com alto contraste beneficia todas as pessoas em ambientes desafiadores: luz solar intensa em uma tela de celular, painéis de exibição de baixa qualidade ou simplesmente alguém que não calibrou o monitor. Escolhas de cor acessíveis reduzem a fadiga visual de pessoas com visão normal durante sessões prolongadas de leitura, e melhorias de legibilidade se correlacionam com menores taxas de rejeição e maior tempo na página — sinais que mecanismos de busca usam como indicadores de qualidade.

Regras Relacionadas do Axe-core

• color-contrast: Esta é a principal regra automatizada que aplica a WCAG 1.4.3 no Nível AA. O mecanismo axe-core calcula as cores de primeiro plano e de fundo de cada nó de texto no DOM, resolvendo cascata de CSS, opacidade, empilhamento de z-index e transparência alfa. Ele sinaliza qualquer elemento de texto cuja razão de contraste fique abaixo de 4,5:1 para texto normal ou 3:1 para texto grande. A regra relata a razão real encontrada, a razão exigida e o elemento específico que falhou, tornando a correção direta. No entanto, o axe-core só pode analisar cores que consegue determinar a partir dos estilos computados; texto renderizado dentro de <canvas>, sobre gradientes CSS complexos ou sobre imagens de fundo pode não ser totalmente resolvível sem contexto adicional, e o axe marcará esses casos como “needs review” em vez de aprovado ou reprovado de forma definitiva. O texto de placeholder em inputs de formulário também é verificado por esta regra.
• color-contrast-enhanced: Esta regra aplica os limites mais rigorosos da WCAG 1.4.6 — Contraste (Aprimorado) de 7:1 para texto normal e 4,5:1 para texto grande (Nível AAA). Embora 1.4.6 não seja exigido para conformidade AA, executar esta regra durante o desenvolvimento é valioso para equipes que buscam acessibilidade aprimorada ou se preparam para ambientes regulatórios que possam adotar requisitos AAA. O axe-core relata violações desta regra separadamente para que as equipes possam priorizar falhas AA (color-contrast) versus melhorias aspiracionais AAA (color-contrast-enhanced).

Testes manuais são necessários em vários cenários que ferramentas automatizadas não conseguem resolver completamente. Quando o texto é sobreposto a uma imagem de fundo ou gradiente CSS, a cor de fundo efetiva varia ao longo da caixa delimitadora do texto. Ferramentas automatizadas precisam amostrar a cor dominante, assumir a região de pior caso ou delegar a um revisor manual. Da mesma forma, texto dentro de elementos <canvas> é renderizado como pixels sem informação de cor semântica disponível para a árvore de acessibilidade, então a inspeção manual com uma ferramenta conta-gotas é a única abordagem confiável. Texto que aparece apenas em estados de :hover ou :focus também pode exigir interação manual para ser acionado antes que ferramentas automatizadas possam avaliá-lo.

Como Testar

1. Varredura automatizada com axe DevTools: Instale a extensão de navegador axe DevTools (disponível para Chrome, Firefox e Edge). Navegue até a página em teste, abra o painel da extensão e execute uma análise de página inteira. No painel de resultados, filtre pelos IDs de regra color-contrast e color-contrast-enhanced. Para cada violação, a ferramenta destaca o elemento com falha, informa a razão de contraste real (por exemplo, “2,85:1”), a razão exigida (por exemplo, “4,5:1”) e as cores de primeiro plano e de fundo computadas em hex. Exporte os resultados como CSV ou JSON para acompanhamento. Repita em todos os breakpoints, porque layouts responsivos podem alterar tamanhos de fonte (afetando o limite de texto grande) ou trocar esquemas de cores.
2. Auditoria com Lighthouse: Abra o Chrome DevTools, navegue até a aba Lighthouse, selecione “Accessibility” e execute a auditoria. O Lighthouse apresenta violações de contraste de cor em sua seção de Acessibilidade com referências aos elementos. Observe que o Lighthouse usa uma versão mais antiga do axe-core em alguns ambientes; o uso direto do axe DevTools pode detectar mais problemas.
3. Medição manual de contraste: Use o seletor de cores integrado do DevTools do navegador ou uma ferramenta dedicada como o WebAIM Contrast Checker (webaim.org/resources/contrastchecker/) ou o aplicativo de desktop TPGi Colour Contrast Analyser. Selecione as cores de primeiro plano e de fundo com o conta-gotas e verifique se a razão informada atende ao limite. Para texto sobre gradientes ou imagens, amostre vários pontos na área do texto e use a medição de menor contraste como valor definitivo.
4. Teste de estados interativos: Acione manualmente os estados :hover, :focus, :active e :visited em links e elementos interativos e, em seguida, meça o contraste de cada estado separadamente. Alguns designs usam cores de hover com contraste mais baixo que falham inadvertidamente. Use o recurso “Force element state” do DevTools do navegador para manter um estado enquanto mede.
5. Revisão com leitor de tela e teclado (contextual): Embora contraste seja um critério visual e não seja detectado diretamente por leitores de tela, testar com NVDA + Firefox, VoiceOver + Safari ou JAWS + Chrome confirma que o texto está presente na árvore de acessibilidade e não está oculto por técnicas de CSS (como color: transparent) que o tornariam visualmente inacessível. Se um leitor de tela anunciar texto que parece invisível na tela, investigue se a renderização visual atende aos requisitos de contraste para pessoas que enxergam.
6. Zoom e aumento de fonte: Aumente o tamanho de fonte padrão do navegador (Settings → Appearance → Font size) e o zoom para 200%. Verifique se o texto que passa de “normal” para “grande” nesses tamanhos ainda atende ao limite apropriado. Uma fonte que é 14px no zoom padrão pode se tornar 28px a 200% de zoom, mudando qual limite se aplica.

Como Corrigir

Texto de corpo com contraste insuficiente — Incorreto

<!-- Light gray text on white background: contrast ratio ~2.85:1 -->
<style>
  p.description {
    color: #999999;
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<p class='description'>This product is handcrafted from premium materials.</p>

Texto de corpo com contraste insuficiente — Correto

<!-- Darkened text color achieves 7:1 contrast ratio, exceeding 4.5:1 AA requirement -->
<style>
  p.description {
    color: #595959; /* contrast ratio 7.0:1 against #ffffff */
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<p class='description'>This product is handcrafted from premium materials.</p>

Botão de call-to-action com baixo contraste — Incorreto

<!-- White text on a light blue button: contrast ratio ~2.5:1 -->
<style>
  .btn-primary {
    background-color: #6eb5ff;
    color: #ffffff;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
  }
</style>
<button class='btn-primary'>Add to Cart</button>

Botão de call-to-action com baixo contraste — Correto

<!-- Darker blue background raises contrast to 4.56:1 against white text -->
<style>
  .btn-primary {
    background-color: #0057b8; /* contrast ratio 4.56:1 against #ffffff */
    color: #ffffff;
    font-size: 16px;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
  }
</style>
<button class='btn-primary'>Add to Cart</button>

Texto de placeholder em campo de formulário — Incorreto

<!-- Default browser placeholder is often ~#757575 or lighter; some resets make it worse -->
<style>
  input::placeholder {
    color: #bbbbbb; /* contrast ratio ~1.6:1 against white background */
  }
  input {
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<input type='email' placeholder='Enter your email address' />

Texto de placeholder em campo de formulário — Correto

<!-- #767676 achieves exactly 4.54:1 against white — the practical AA floor for normal text -->
<style>
  input::placeholder {
    color: #767676; /* contrast ratio 4.54:1 against #ffffff — passes AA */
  }
  input {
    background-color: #ffffff;
    font-size: 16px;
  }
</style>
<input type='email' placeholder='Enter your email address' />

Texto sobre imagem de fundo ou gradiente — Incorreto

<!-- Dark text directly on a light-to-dark gradient: passes in some regions, fails in others -->
<style>
  .hero {
    background: linear-gradient(to right, #ffffff, #0057b8);
    padding: 40px;
  }
  .hero h1 {
    color: #333333;
    font-size: 32px;
  }
</style>
<section class='hero'>
  <h1>Welcome to Our Store</h1>
</section>

Texto sobre imagem de fundo ou gradiente — Correto

<!-- A semi-transparent dark scrim behind the text ensures consistent contrast regardless of gradient -->
<style>
  .hero {
    background: linear-gradient(to right, #ffffff, #0057b8);
    padding: 40px;
    position: relative;
  }
  .hero-content {
    background-color: rgba(0, 0, 0, 0.65); /* dark scrim guarantees contrast */
    padding: 16px 24px;
    display: inline-block;
    border-radius: 4px;
  }
  .hero h1 {
    color: #ffffff; /* white on near-black scrim exceeds 4.5:1 */
    font-size: 32px;
    margin: 0;
  }
</style>
<section class='hero'>
  <div class='hero-content'>
    <h1>Welcome to Our Store</h1>
  </div>
</section>

Erros Comuns

• Presumir que uma cor parece boa no seu monitor calibrado: Telas de alto padrão com ampla gama de cores e alto brilho podem fazer combinações de baixo contraste parecerem legíveis para designers com visão normal em um ambiente controlado, enquanto o mesmo texto é ilegível em um laptop básico ou sob iluminação fluorescente de escritório. Sempre verifique com uma ferramenta de razão de contraste, não apenas com julgamento visual.
• Esquecer de testar estados interativos separadamente: Um link pode passar com 4,5:1 em seu estado padrão, mas cair para 2,8:1 em :hover quando a cor clareia. Cada estado interativo deve atender ao limite de forma independente.
• Tratar campos de formulário desabilitados como universalmente isentos: A isenção se aplica apenas a componentes de UI inativos. Se um campo estiver visualmente estilizado como desabilitado, mas ainda estiver programaticamente habilitado (sem o atributo disabled), ele não está isento e deve atender aos requisitos de contraste.
• Usar opacidade para escurecer texto sem considerar a cor efetiva: Definir opacity: 0.5 em texto escuro efetivamente o mistura com o plano de fundo, produzindo uma cor composta mais clara. A razão de contraste deve ser calculada em relação à cor composta resultante, não ao valor CSS original. Por exemplo, #000000 com 50% de opacidade sobre branco é renderizado aproximadamente como #808080, que tem uma razão de contraste de cerca de 3,9:1 — abaixo do limite de 4,5:1 para texto normal.
• Ignorar texto dentro de elementos SVG: Elementos <text> em SVG estilizados com fill em vez de CSS color ainda estão sujeitos à 1.4.3. Ferramentas automatizadas podem não detectá-los dependendo de como o SVG é incorporado (inline vs. <img> vs. <object>). SVG inline é a abordagem mais confiável para testes.
• Identificar incorretamente o tamanho do texto para a isenção de texto grande: Os limites de 18pt / 14pt em negrito se referem ao tamanho renderizado no navegador da pessoa, não ao valor em pixels CSS no código-fonte. CSS font-size: 24px equivale exatamente a 18pt (já que 1pt = 1,333px), mas se a pessoa tiver definido um tamanho de fonte padrão maior, um elemento de 16px pode ser renderizado maior que 18pt. Teste com tamanhos de fonte padrão do navegador e verifique cuidadosamente seus cálculos de tamanho.
• Confiar apenas na cor para distinguir texto de link do texto de corpo: Se um link for estilizado sem sublinhado e usar apenas cor para diferenciá-lo do texto ao redor, a cor do link deve atingir 3:1 em relação à cor do texto de corpo além de 4,5:1 em relação ao plano de fundo da página. Muitos designs falham em um ou ambos esses requisitos. Adicionar sublinhados (ou outro indicador visual que não seja cor) é a abordagem mais segura.
• Ignorar texto dentro de widgets de terceiros e plugins de chat: Widgets incorporados — janelas de chat ao vivo, banners de consentimento de cookies, carrosséis de avaliações, feeds de redes sociais — fazem parte da página e estão no escopo da conformidade com WCAG 1.4.3. Texto com baixo contraste dentro de um widget de terceiros é uma falha mesmo que sua própria base de código esteja totalmente em conformidade.
• Não testar novamente após ativar modo escuro ou modo de alto contraste: Um esquema de cores que passa no modo claro pode falhar no modo escuro se variáveis personalizadas de CSS não forem cuidadosamente gerenciadas. Da mesma forma, o Windows High Contrast Mode substitui muitas declarações de cor em CSS; verifique se o texto permanece legível e se nenhum CSS personalizado reintroduz pares de baixo contraste em ambientes de cores forçadas.
• Usar CSS background-clip: text ou técnicas de texto em gradiente sem fallback: Texto preenchido com gradiente criado via -webkit-background-clip: text; color: transparent apresenta um desafio de contraste complexo porque a cor do texto varia ao longo do glifo. Ferramentas automatizadas normalmente não conseguem resolver isso, e a luminância real de cada parte da forma da letra deve ser verificada manualmente em relação ao plano de fundo da página.

Relação com os Regulamentos de Acessibilidade da Turquia

O Decreto Presidencial nº 2025/10 da Turquia, publicado no Diário Oficial (Resmî Gazete) nº 32933 em 21 de junho de 2025, estabelece um marco nacional vinculativo para acessibilidade digital. O Decreto exige conformidade com padrões de acessibilidade na web reconhecidos internacionalmente — alinhando efetivamente os requisitos regulatórios turcos com a WCAG 2.2 — e introduz o Erişilebilirlik Logosu (Logotipo de Acessibilidade), emitido pelo Ministério da Família e Serviços Sociais (Aile ve Sosyal Hizmetler Bakanlığı), como a marca oficial de certificação para produtos e serviços digitais conformes.

WCAG 1.4.3 — Contraste (Mínimo) é um critério de sucesso de Nível AA, e a conformidade de Nível AA é a base exigida para se qualificar para o Logotipo de Acessibilidade. Isso significa que qualquer entidade que busque o logotipo deve garantir que todo texto visível e não isento e todas as imagens de texto em seus sites e aplicativos atendam aos limites de contraste de 4,5:1 (texto normal) e 3:1 (texto grande) definidos por este critério. A não conformidade com 1.4.3 é uma das violações automatizadas mais comumente detectadas e seria uma barreira direta à certificação.

O Decreto se aplica a uma ampla gama de entidades dos setores público e privado. As entidades abrangidas incluem instituições e agências públicas em nível de governo central e local; bancos e instituições financeiras regulados pela Banking Regulation and Supervision Agency (BDDK); hospitais e prestadores de serviços de saúde, públicos e privados; operadoras de telecomunicações com 200.000 ou mais assinantes; plataformas de e-commerce que atendam aos limites aplicáveis de receita ou volume de transações; agências de viagem; empresas privadas de transporte; e escolas privadas e instituições de ensino autorizadas pelo Ministério da Educação Nacional (MEB).

Para essas entidades, tratar a conformidade de contraste não é apenas uma recomendação de boa prática — tem peso regulatório. Organizações não conformes correm o risco de escrutínio administrativo e consequências reputacionais, enquanto organizações conformes podem exibir o Erişilebilirlik Logosu como um sinal de confiança para aproximadamente 8,5 milhões de pessoas com deficiência na Turquia, bem como para pessoas idosas, pessoas que usam dispositivos móveis e o público em geral, que se beneficiam de um design legível e com alto contraste.

Organizações que operam na Turquia e ainda não realizaram uma auditoria de WCAG 1.4.3 devem priorizar a varredura automatizada de todos os pontos de contato digitais voltados ao público — web, web móvel e aplicativos nativos, quando aplicável — seguida de revisão manual de fundos em gradiente, sobreposições de imagem e componentes incorporados de terceiros. Estabelecer um sistema de design tokens com pares de cores pré-aprovados e verificados quanto ao contraste é a solução escalável de longo prazo mais eficaz, garantindo que novos componentes de UI herdem combinações de cores acessíveis por padrão e que futuros redesigns não introduzam inadvertidamente falhas de contraste.