As diretrizes WCAG definem razão de contraste luminosa entre texto (ou ícone essencial) e seu fundo. Quanto maior a razão, mais pessoas com baixa visão ou glare em telas conseguem ler.

Referência rápida (WCAG 2.x)

  • Texto normal (< 18pt ou < 14pt bold): 4.5:1 para AA; 7:1 para AAA.
  • Texto grande (≥ 18pt ou ≥ 14pt bold): 3:1 AA; 4.5:1 AAA.

UI components

Componentes não textuais (bordas de input, ícones funcionais) têm requisitos de contraste adjacente em WCAG 2.1/2.2 — verifique guidelines específicas do projeto.

OKLCH ajuda

Trabalhar em OKLCH facilita ajustar L mantendo matiz e reduzir croma até a razão fechar, sem “chutar” HEX manualmente.

Ferramenta

Abrir conversor de cores com WCAG no Cod3x Tools

Use o verificador integrado ao alternar pares texto/fundo e exportar tokens acessíveis.