Texto grande
Texto corrido normal
Legenda pequena
#000000 Sobre esta ferramenta
A razão de contraste de cor mede a diferença perceptual de luminância entre duas cores, expressa por um valor que vai de 1:1 (idênticas) a 21:1 (preto puro sobre branco puro). A fórmula WCAG 2.x lineariza cada canal sRGB — um segmento linear abaixo de 0.03928 e uma curva de potência 2.4 acima dele — pondera-os em 0.2126 R / 0.7152 G / 0.0722 B para obter a luminância relativa e, em seguida, calcula (mais clara + 0.05) / (mais escura + 0.05). As Web Content Accessibility Guidelines definem quatro limiares: AA exige 4.5:1 para texto normal e 3:1 para texto grande (>=24px, ou >=18.66px em negrito); AAA eleva esses valores para 7:1 e 4.5:1.
Use-o para verificar se o corpo do texto, os botões, os links e os rótulos de formulário atendem aos requisitos de acessibilidade antes de publicar, para depurar um par de cores de design system sinalizado por uma auditoria, ou para encontrar uma alternativa aprovada sem abandonar sua paleta. Insira qualquer cor CSS — hexadecimal, rgb(), hsl(), ou uma cor nomeada — em qualquer um dos campos, leia ao vivo a razão e a grade de notas e, quando o nível AA falhar, aplique o primeiro plano sugerido que ajusta a luminosidade OKLCH da cor original apenas o suficiente para atingir 4.5:1.
A razão de contraste depende apenas da luminância, não da matiz — duas cores com a mesma luminosidade podem ser radicalmente diferentes em cor e ainda assim falhar, pois usuários daltônicos e com baixa visão dependem da diferença de luminância.
Perguntas frequentes
Qual razão de contraste é necessária para passar no WCAG?
O WCAG 2.1 nível AA exige uma razão de contraste de pelo menos 4.5:1 para texto normal e 3:1 para texto grande (24px ou maior, ou 18.66px e em negrito). O nível AAA exige 7:1 para texto normal e 4.5:1 para texto grande.
O que conta como texto grande para fins de contraste?
Texto grande tem 18.66px (14pt) ou mais quando em negrito, ou 24px (18pt) ou mais em peso normal. Ele é submetido a um limiar de contraste mais baixo porque glifos maiores permanecem legíveis com contraste menor.
Como a razão de contraste WCAG é calculada?
A luminância relativa de cada cor é obtida linearizando seus canais sRGB e ponderando-os em 0.2126 R + 0.7152 G + 0.0722 B. A razão é então (luminância mais clara + 0.05) / (luminância mais escura + 0.05), gerando um valor entre 1:1 e 21:1 que independe de qual cor é o primeiro plano.