Grade de Contraste

Coloque toda a sua paleta em uma tabela de auditoria N×N — razões WCAG e Lc APCA para cada par de primeiro plano × plano de fundo, decididas rapidamente.

Cada célula mostra a taxa WCAG e APCA Lc


Ag1.0Lc0	Ag4.2Lc+35	Ag3.8Lc+31	Ag5.2Lc+42	Ag8.4Lc+62	Ag1.2Lc0	Ag17.4Lc+104
Ag4.2Lc-33	Ag1.0Lc0	Ag1.1Lc0	Ag1.3Lc0	Ag2.0Lc+25	Ag5.0Lc-34	Ag4.2Lc+67
Ag3.8Lc-29	Ag1.1Lc0	Ag1.0Lc0	Ag1.4Lc+10	Ag2.2Lc+30	Ag4.6Lc-30	Ag4.6Lc+72
Ag5.2Lc-40	Ag1.3Lc0	Ag1.4Lc-11	Ag1.0Lc0	Ag1.6Lc+18	Ag6.3Lc-41	Ag3.3Lc+60
Ag8.4Lc-61	Ag2.0Lc-27	Ag2.2Lc-32	Ag1.6Lc-20	Ag1.0Lc0	Ag10.2Lc-62	Ag2.1Lc+40

Aprovação WCAG AA para corpo Apenas para texto grande AA Reprovado

Linhas = cor do texto (primeiro plano), colunas = fundo. Cada célula renderiza o par real de primeiro plano sobre fundo com duas métricas de acessibilidade: taxa WCAG (AA corpo ≥ 4,5, AA texto grande ≥ 3,0) e APCA Lc (75+ para texto de corpo, 60+ para texto grande).

Como auditar uma paleta inteira — adicionar, ler, decidir.

Todas as cores candidatas em uma matriz N×N — acessibilidade para cada par primeiro plano × fundo de uma vez.

01
Adicionar cores
Inclua cores de marca, cores semânticas e neutras (até 10). As linhas são os primeiros planos, as colunas são os fundos.
02
Ler a tabela
Cada célula mostra a razão WCAG e o Lc da APCA. Os pontos acendem: texto principal precisa de Lc 75+, texto grande 60+.
03
Decida
Registre pares de botões e pares de texto principal na sua especificação de design; elimine combinações que falham antes do lançamento.

Perguntas frequentes sobre a grade de contraste

Três perguntas frequentes em auditorias de matriz completa.

Por que não verificar pares um por um na ferramenta de contraste?: 5 cores formam 30 pares direcionados — verificações individuais facilitam erros. A grade mostra tudo de uma vez e revela relações espelhadas.
WCAG ou APCA — qual conta?: WCAG 2.1 é o que as regulamentações referenciam hoje; APCA é a candidata do WCAG 3 e lê texto de modo escuro e de baixo contraste com mais precisão. Cumpra o WCAG, julgue com a APCA.
Por que as colunas de preto e branco estão sempre presentes?: Texto preto ou branco é o recurso universal — o desempenho de uma cor contra ambos é a base para definir cores semânticas.

Após a auditoria

Incorpore os pares aprovados na sua paleta e especificação semântica.

Verificador de Contraste

Validação de contraste WCAG 2.1 entre qualquer cor de primeiro plano e plano de fundo.

Simulador de Daltonismo

Simule 8 tipos de deficiência de visão de cores para auditar a acessibilidade.

Paletas Científicas Seguras para Daltonismo

Os padrões de fato da publicação acadêmica — Okabe-Ito (recomendado pela Nature Methods), a série Paul Tol, a paleta da revista Nature NPG e o Viridis perceptualmente uniforme. Cada amostra vem com uma nota de contraste APCA, e um simulador de visão de cores de 8 tipos abaixo verifica cada paleta em tempo real.

Paleta Semântica para UI

Insira uma cor de marca, obtenha primária / secundária / sucesso / aviso / perigo — exportada como configuração Tailwind e variáveis CSS.

fg ↓ / bg →

Ag1.0Lc0

Ag4.2Lc+35

Ag3.8Lc+31

Ag5.2Lc+42

Ag8.4Lc+62

Ag1.2Lc0

Ag17.4Lc+104

Ag4.2Lc-33

Ag1.0Lc0

Ag1.1Lc0

Ag1.3Lc0

Ag2.0Lc+25

Ag5.0Lc-34

Ag4.2Lc+67

Ag3.8Lc-29

Ag1.1Lc0

Ag1.0Lc0

Ag1.4Lc+10

Ag2.2Lc+30

Ag4.6Lc-30

Ag4.6Lc+72

Ag5.2Lc-40

Ag1.3Lc0

Ag1.4Lc-11

Ag1.0Lc0

Ag1.6Lc+18

Ag6.3Lc-41

Ag3.3Lc+60

Ag8.4Lc-61

Ag2.0Lc-27

Ag2.2Lc-32

Ag1.6Lc-20

Ag1.0Lc0

Ag10.2Lc-62

Ag2.1Lc+40

Como auditar uma paleta inteira — adicionar, ler, decidir.

Todas as cores candidatas em uma matriz N×N — acessibilidade para cada par primeiro plano × fundo de uma vez.

Adicionar cores

Inclua cores de marca, cores semânticas e neutras (até 10). As linhas são os primeiros planos, as colunas são os fundos.

Ler a tabela

Cada célula mostra a razão WCAG e o Lc da APCA. Os pontos acendem: texto principal precisa de Lc 75+, texto grande 60+.

Decida

Registre pares de botões e pares de texto principal na sua especificação de design; elimine combinações que falham antes do lançamento.

Perguntas frequentes sobre a grade de contraste

Três perguntas frequentes em auditorias de matriz completa.

Por que não verificar pares um por um na ferramenta de contraste?

5 cores formam 30 pares direcionados — verificações individuais facilitam erros. A grade mostra tudo de uma vez e revela relações espelhadas.

WCAG ou APCA — qual conta?

WCAG 2.1 é o que as regulamentações referenciam hoje; APCA é a candidata do WCAG 3 e lê texto de modo escuro e de baixo contraste com mais precisão. Cumpra o WCAG, julgue com a APCA.

Por que as colunas de preto e branco estão sempre presentes?

Texto preto ou branco é o recurso universal — o desempenho de uma cor contra ambos é a base para definir cores semânticas.