colorize
ColorKit
CK

Verificador de Contraste de Cores

Teste combinações de cores para texto e fundo para atender às normas internacionais de acessibilidade digital.

Contrast Ratio

6.29 : 1

WCAG AA (Normal)PASS
WCAG AA (Large)PASS
WCAG AAA (Normal)FAIL
UI ComponentsPASS

Auto-Adjust to Pass:

Live Preview Headline

This is a subheadline that demonstrates slightly smaller text. It needs at least a 4.5:1 ratio to be considered legible under WCAG AA guidelines.

This is a standard body paragraph. Good contrast ensures that all users, including those with visual impairments, can read your content without eye strain.

UI components and borders require a 3.0:1 ratio.

O que faz o Verificador de Contraste?

Esta ferramenta calcula o índice exato de contraste entre as cores do texto e do fundo para garantir legibilidade de acordo com as Diretrizes de Acessibilidade para Conteúdo Web (WCAG 2.2).

Para quem é esta ferramenta?

Criada para designers UI/UX, desenvolvedores frontend e auditores de acessibilidade que precisam garantir experiências digitais universais e em conformidade legal.

Exigências WCAG AA e AAA

  • WCAG AA (Texto normal): Requer proporção mínima de 4.5:1.
  • WCAG AA (Texto grande): Requer ao menos 3.0:1 para 18pt ou 14pt em negrito.
  • WCAG AAA (Padrão mais rigoroso): Exige 7.0:1 para textos convencionais.
Base de Conhecimento & FAQ

Perguntas Frequentes

Respostas e soluções diretas para dúvidas frequentes, desafios técnicos e padrões da indústria.

Qual é a relação mínima de contraste exigida pelas diretrizes WCAG de acessibilidade?expand_more
Sob a norma WCAG 2.1 / 2.2 Nível AA (o padrão legal global de acessibilidade digital):
  • Texto normal (< 18pt ou 14pt negrito): Deve atingir no mínimo uma proporção de contraste de 4.5:1 com o fundo.
  • Texto grande (≥ 18pt regular ou 14pt negrito): Exige no mínimo 3.0:1.
  • Componentes visuais e de interface: Bordas de formulários e ícones funcionais devem alcançar pelo menos 3.0:1.
Qual a diferença entre os níveis de conformidade WCAG AA e AAA?expand_more
O nível WCAG AA é a exigência legal padrão para e-commerces, sistemas bancários e portais corporativos (4.5:1 no corpo de texto). O nível WCAG AAA é o padrão mais alto de excelência recomendado para portais governamentais e de saúde, exigindo rigorosos 7.0:1 para textos normais e 4.5:1 para títulos.
Por que os textos de espaços reservados (placeholders) costumam reprovar em testes de acessibilidade?expand_more
O cinza padrão de navegadores em campos de entrada (como #9CA3AF sobre fundo branco) gera apenas 2.0:1 a 2.5:1, sendo reprovado no Nível AA. A melhor prática é nunca usar placeholders no lugar de elementos <label> visíveis e estilizar os placeholders com contraste adequado.
Como a fórmula da W3C calcula a luminância relativa?expand_more
A luminância relativa (L) mede o brilho percebido em uma escala de 0.0 (preto absoluto) a 1.0 (branco puro). Como a visão humana é mais sensível ao verde, os canais lineares sRGB recebem ponderações específicas: 
L = 0.2126 * R_lin + 0.7152 * G_lin + 0.0722 * B_lin
A relação final é expressa por (L1 + 0.05) / (L2 + 0.05).
É aceitável usar texto branco sobre botões amarelos (#FFFF00) ou ciano (#00FFFF)?expand_more
Não. Amarelo e ciano possuem luminância muito elevada. Combinados com texto branco, a relação fica entre 1.07:1 e 1.25:1, tornando a leitura impossível para pessoas com baixa visão. Ao combiná-los com texto escuro (#0F172A), a proporção salta para 16.8:1, sendo aprovada nos níveis AA e AAA.