Como é calculada a taxa de contraste de cores da WCAG?

A taxa de contraste da WCAG 2.1 é calculada pela fórmula (L1 + 0.05) / (L2 + 0.05), onde L1 é a luminância relativa da cor mais clara e L2 é a luminância relativa da cor mais escura. A luminância é obtida convertendo os canais sRGB de 8 bits (0 a 255) em valores lineares de luz: se C / 255 <= 0.04045, o valor linear de C é (C / 255) / 12.92; caso contrário, é (((C / 255) + 0.055) / 1.055)^2.4. Em seguida, aplica-se a ponderação espectral L = 0.2126*R + 0.7152*G + 0.0722*B. A razão resultante varia de 1:1 (cores idênticas) a 21:1 (preto absoluto #000000 sobre branco puro #FFFFFF).

Qual é a diferença entre os requisitos de contraste WCAG AA e AAA?

O Nível AA da WCAG é o padrão legal mandatário referenciado pela Lei Brasileira de Inclusão (LBI - Lei nº 13.146/2015), pelo e-MAG, pela Diretiva Europeia EN 301 549, pela Section 508 e pela ADA Title III nos EUA. Ele exige contraste mínimo de 4.5:1 para texto normal (abaixo de 18pt / 24px regular, ou abaixo de 14pt / 18.66px em negrito) e 3.0:1 para texto grande e componentes gráficos essenciais de UI. O Nível AAA é a faixa avançada voltada a condições severas de baixa visão, exigindo 7.0:1 para texto normal e 4.5:1 para texto grande. A maioria dos design systems corporativos padroniza o nível AA em escala global, reservando o AAA para interfaces de missão crítica, como avisos legais, prontuários de saúde e serviços públicos essenciais.

Qual tamanho de fonte é considerado texto grande na WCAG?

Pelas diretrizes da WCAG 2.1, 'texto grande' é explicitamente definido como pelo menos 18 pontos (geralmente 24 pixels CSS na resolução de 96 DPI) ou pelo menos 14 pontos em negrito (geralmente 18.66 pixels CSS com font-weight 700 ou superior). O texto grande requer apenas 3.0:1 de taxa de contraste para conformidade no Nível AA e 4.5:1 no Nível AAA, uma vez que traços tipográficos mais encorpados projetam uma superfície óptica consideravelmente maior sobre a retina humana.

Por que textos de espaço reservado (placeholder) e botões desativados costumam reprovar no contraste?

O texto placeholder padrão dos navegadores (como #767676 sobre branco) frequentemente oscila próximo a 4.5:1, mas muitas bibliotecas de componentes reduzem sua opacidade para 0.4 ou 0.5, derrubando o contraste real para cerca de ~2.2:1. Embora o critério WCAG 1.4.3 isente elementos inativos de interface (como botões desabilitados) das taxas mandatórias, campos de formulário NÃO estão isentos se o placeholder contiver orientações instrutivas necessárias ao preenchimento. Substituir textos transitórios por rótulos flutuantes (floating labels) persistentes garante a conformidade com 4.5:1 sem gerar fricção de usabilidade.

Qual é a diferença entre o cálculo de contraste da WCAG 2.1 e o APCA da WCAG 3.0?

A WCAG 2.1 utiliza uma fórmula matemática estática (de 1:1 a 21:1) baseada unicamente na luminância relativa, desconsiderando a frequência espacial (espessura do traço e peso da fonte) e a polaridade visual (texto escuro sobre fundo claro versus texto claro sobre fundo escuro). Já o APCA (Accessible Perceptual Contrast Algorithm), desenvolvido para a futura WCAG 3.0, calcula um valor de Contraste de Luminosidade com sinal (Lc de 0 a 108+) fundamentado na fisiologia dos fotorreceptores e no processamento cortical humano. No APCA, fontes finas demandam valores de Lc substancialmente maiores que fontes encorpadas, e o modo escuro exige maiores contrastes de luminância para entregar a mesma legibilidade do modo claro.

Verificador de Contraste WCAG & Cores

Q: Qual é a diferença entre os requisitos de contraste WCAG AA e AAA?

O Nível AA da WCAG é o padrão legal mandatário referenciado pela Lei Brasileira de Inclusão (LBI - Lei nº 13.146/2015), pelo e-MAG, pela Diretiva Europeia EN 301 549, pela Section 508 e pela ADA Title III nos EUA. Ele exige contraste mínimo de 4.5:1 para texto normal (abaixo de 18pt / 24px regular, ou abaixo de 14pt / 18.66px em negrito) e 3.0:1 para texto grande e componentes gráficos essenciais de UI. O Nível AAA é a faixa avançada voltada a condições severas de baixa visão, exigindo 7.0:1 para texto normal e 4.5:1 para texto grande. A maioria dos design systems corporativos padroniza o nível AA em escala global, reservando o AAA para interfaces de missão crítica, como avisos legais, prontuários de saúde e serviços públicos essenciais.

Q: Qual tamanho de fonte é considerado texto grande na WCAG?

Pelas diretrizes da WCAG 2.1, 'texto grande' é explicitamente definido como pelo menos 18 pontos (geralmente 24 pixels CSS na resolução de 96 DPI) ou pelo menos 14 pontos em negrito (geralmente 18.66 pixels CSS com font-weight 700 ou superior). O texto grande requer apenas 3.0:1 de taxa de contraste para conformidade no Nível AA e 4.5:1 no Nível AAA, uma vez que traços tipográficos mais encorpados projetam uma superfície óptica consideravelmente maior sobre a retina humana.

Q: Por que textos de espaço reservado (placeholder) e botões desativados costumam reprovar no contraste?

O texto placeholder padrão dos navegadores (como #767676 sobre branco) frequentemente oscila próximo a 4.5:1, mas muitas bibliotecas de componentes reduzem sua opacidade para 0.4 ou 0.5, derrubando o contraste real para cerca de ~2.2:1. Embora o critério WCAG 1.4.3 isente elementos inativos de interface (como botões desabilitados) das taxas mandatórias, campos de formulário NÃO estão isentos se o placeholder contiver orientações instrutivas necessárias ao preenchimento. Substituir textos transitórios por rótulos flutuantes (floating labels) persistentes garante a conformidade com 4.5:1 sem gerar fricção de usabilidade.

Q: Qual é a diferença entre o cálculo de contraste da WCAG 2.1 e o APCA da WCAG 3.0?

A WCAG 2.1 utiliza uma fórmula matemática estática (de 1:1 a 21:1) baseada unicamente na luminância relativa, desconsiderando a frequência espacial (espessura do traço e peso da fonte) e a polaridade visual (texto escuro sobre fundo claro versus texto claro sobre fundo escuro). Já o APCA (Accessible Perceptual Contrast Algorithm), desenvolvido para a futura WCAG 3.0, calcula um valor de Contraste de Luminosidade com sinal (Lc de 0 a 108+) fundamentado na fisiologia dos fotorreceptores e no processamento cortical humano. No APCA, fontes finas demandam valores de Lc substancialmente maiores que fontes encorpadas, e o modo escuro exige maiores contrastes de luminância para entregar a mesma legibilidade do modo claro.

Verifique a taxa de contraste WCAG e acessibilidade cromática instantaneamente. Teste texto e fundo nos padrões WCAG 2.1 AA/AAA e encontre correções de cores.

Predefinições Prontas

Configuração de Cores e Tipografia

Cor do Texto

255, 255, 255

Canal Alfa (Opacidade)100%

H:0° S:0% L:100%

Cor de Fundo

24, 24, 27

H:240° S:6% L:10%

Luminância Relativa 0.0093

Escala Tipográfica e LegibilidadeTexto Normal (<18pt)

Tamanho da Fonte16px

Peso da Fonte

Padrão Regulamentar

Simulação de Deficiência Visual (Daltonismo)

Iluminação Ambiente

Pipeline Matemático de Contraste e AcessibilidadeFórmula WCAG 2.1: (L1 + 0.05) / (L2 + 0.05)

Pronto para análiseLuminância Relativa do Texto (Y_fg) 1.0000 | Luminância Relativa do Fundo (Y_bg) 0.0093

Razão de Contraste WCAG

17.72:1AAA Aprovado

Lc Perceptual (Algoritmo APCA): Lc -106.7