Fórmula de relação de contraste WCAG
Formula
Contraste = (L1 + 0,05) / (L2 + 0,05) onde L1 é a luminância mais clara.
Variables
- R, G, B
- Canais sRGB (0–255 ou 0–1 normalizados)
- H, S, L
- Matiz (graus), saturação e luminosidade (0–1) em HSL
- eu
- Luminância relativa (WCAG) ou luminosidade em HSL/OKLCH
FAQ
- A fórmula de taxa de contraste WCAG é precisa para fluxos de trabalho de impressão?
- A tela RGB e a impressão CMYK usam gamas diferentes. Trate as conversões como provas aproximadas; calibre com perfis ICC para impressão comercial.
- Posso usar esta fórmula em CSS?
- CSS moderno oferece suporte a color-mix(), oklch() e lab() para muitas operações. Para pipelines complexos, calcule em JavaScript e exporte variáveis CSS.
- O Color DevByte carrega minhas cores?
- Não. As páginas de referência de fórmulas são documentação estática; ferramentas interativas são executadas 100% do lado do cliente em seu navegador.
Visão geral
Calcule o contraste de luminância relativo entre as cores de primeiro plano e de fundo.
O Color DevByte documenta essa fórmula para desenvolvedores, designers e revisores de acessibilidade que precisam de matemática de cores reproduzível sem enviar dados a um servidor.
Use as ferramentas de cores vinculadas para aplicar esta fórmula de forma interativa com visualização ao vivo e exportação multiformato.
Quando usar esta fórmula
Aplique a fórmula de taxa de contraste wcag ao criar tokens de design, validar o contraste WCAG ou automatizar pipelines de cores em CSS, Tailwind ou JSON do sistema de design.
Para UI de produção, sempre verifique os resultados com um verificador de contraste ou visualização visual – casos extremos na correção de gama e no mapeamento de gama podem alterar os resultados.
Notas de implementação
As ferramentas baseadas em navegador devem linearizar o sRGB antes dos cálculos de luminância ou ΔE.
Prefira a interpolação OKLCH ou LAB para gradientes e temas para evitar pontos médios acinzentados comuns em misturas RGB.