Pílula 16 · Módulo 1

Contraste

A régua objetiva da WCAG 2.2: 4,5:1 em texto normal, 3:1 em texto grande. Com medidor ao vivo e por que "fundo claro sempre" não é o que a norma exige.

Xdiag
Xdiag® Tecnologias
Módulo 1 · 2026
Pílula de Conhecimento
Contraste
Legibilidade · WCAG 2.2 · critério 1.4.3
Não é gosto — é uma razão entre duas luminâncias
Definição
Razão entre a luminância relativa do texto e a do fundo. Vai de 1:1 (invisível) a 21:1 (preto sobre branco). Para texto normal, a norma exige no mínimo 4,5:1 — e isso se mede, não se opina.
Quatro combinações — toque para ver a medida
IA na Medicina — ICS & Xdiag®xdiag.com.br
Xdiag
Xdiag® Tecnologias
Pílula de Conhecimento — Módulo 1
Contraste:
por que o seu material não está sendo lido
Você escreve o artigo, monta o slide, publica o post — e ninguém responde. A conclusão fácil é que o assunto não interessou. Às vezes é isso mesmo. Mas com frequência o texto simplesmente não foi lido, porque estava por cima de uma foto, ou num cinza claro que só funciona no monitor do consultório.
A diferença entre as duas hipóteses é que a segunda é medível.
A régua
O critério 1.4.3 da WCAG 2.2, nível AA, fixa dois mínimos:
4,5:1
texto normal — o corpo do post, a legenda, o rodapé do slide
3:1
texto grande — a partir de 24px, ou 18,7px em negrito
Duas cores que você acha bonitas juntas podem estar em 2:1. O olho treinado no próprio material não é um bom medidor — ele já sabe o que está escrito.
Meça agora
Troque as duas cores e veja a razão mudar. Os quatro atalhos são as combinações que mais aparecem na prática.
Medidor — troque as duas cores
Texto#FFFFFF
Fundo#B8B8B8
IA na rotina do consultório
Texto normal, do tamanho que vai no corpo do post: se você precisa aproximar o celular do rosto, já reprovou.
1,98:1
✕ Texto normal
mínimo 4,5:1 — critério 1.4.3, nível AA
✕ Texto grande
mínimo 3:1 — a partir de 24px, ou 18,7px em negrito
O erro mais comum: texto por cima da foto
Mesma frase, mesmo tamanho, mesma fonte. A única variável é a apresentação — e ela decide se a frase é lida ou não.
Como costuma ser
IA na rotina do consultório
1,98:1 — reprovado
Como deveria ser
IA na rotina do consultório
14,18:1 — aprovado
O lado esquerdo usa o tom médio da foto (#B8B8B8) no lugar da imagem, que é exatamente o que o olho enxerga atrás das letras. Sombra no texto costuma ser a maquiagem que esconde esse problema do autor — e não do leitor.
Contraste não é polaridade
Existe uma versão simplificada que circula bastante: "fundo claro e texto escuro, sempre". Não é o que a norma diz. A exigência é sobre a razão entre as duas luminâncias, em qualquer polaridade — fundo escuro com texto claro passa, desde que atinja o mínimo. O par #F4F6F5 sobre #0E1A26 dá 16,20:1.
Esta página é a demonstração: use o botão de tema na barra do topo. Os dois temas foram medidos, e nos dois cada par de texto e fundo fica acima de 4,5:1.
A conta, se você quiser conferir
Luminância relativa de cada cor, depois a razão entre as duas. É a mesma função que está calculando todos os números desta página, ao vivo, no seu navegador:
function lum(hex) {
  const v = [0,2,4].map(i =>
    parseInt(hex.slice(i+1, i+3), 16) / 255);
  const f = c => c <= 0.03928 ? c/12.92
    : Math.pow((c + 0.055)/1.055, 2.4);
  return 0.2126*f(v[0]) + 0.7152*f(v[1]) + 0.0722*f(v[2]);
}

function razao(a, b) {
  const [l1, l2] = [lum(a), lum(b)].sort((x,y) => y - x);
  return (l1 + 0.05) / (l2 + 0.05);
}
Na prática
Antes de publicar
✓Imagem ao lado do texto, não embaixo dele. É a correção que resolve a maioria dos casos sem mexer em mais nada.
✓Teste no celular, na claridade — não no monitor do consultório, à noite, com a tela no máximo.
✓Modo escuro pode, desde que passe nos mesmos 4,5:1.
✓Converta uma cópia para escala de cinza: se a diferença sumir, o contraste vinha da cor, não da luminosidade — e some para quem tem daltonismo.
✓Meça a peça pronta, não a paleta. O que vale é a cor que sobrou no arquivo exportado.
"Material que não é lido não ensina, não convence e não gera pergunta nenhuma. Legibilidade é a primeira condição do conteúdo — e a única que dá para conferir com uma conta."
— ICS & Xdiag® · IA na Medicina · Módulo 1 · 2026
Referências
1. W3C. Web Content Accessibility Guidelines (WCAG) 2.2 — critério de sucesso 1.4.3 Contraste (Mínimo), nível AA. W3C Recommendation, 2023.
2. W3C. Understanding Success Criterion 1.4.3 — definição de texto grande e cálculo da luminância relativa.
3. ICS & Xdiag Tecnologias. IA na Medicina: O Método Prático para o Médico Moderno — Módulo 1. 2026.
IA na Medicina — ICS & Xdiag®xdiag.com.br