Por que o contraste importa
Texto com pouco contraste é difícil de ler para pessoas com baixa visão ou daltonismo, e para qualquer um usando o celular no sol. Além de acessibilidade, contraste adequado melhora a legibilidade e a conversão de botões.
Como usar
- Escolha a cor do texto e a cor do fundo (no seletor ou digitando o HEX).
- Veja a taxa de contraste e quais níveis do WCAG a combinação atende.
- Se não passar, clique na sugestão para usar a cor corrigida mais próxima.
O endereço da página guarda as duas cores, então dá para compartilhar o link com o time.
Perguntas frequentes
Qual o contraste mínimo recomendado?
Pelo WCAG 2, nível AA: 4,5:1 para texto normal e 3:1 para texto grande (a partir de 24 px, ou 18,66 px em negrito) e para ícones e bordas de campos. O nível AAA pede 7:1 e 4,5:1.
O que é WCAG?
As Web Content Accessibility Guidelines são as diretrizes internacionais de acessibilidade na web, usadas como referência pela legislação de vários países, incluindo a Lei Brasileira de Inclusão.
Como a sugestão de cor funciona?
Ela mantém o mesmo tom da cor do texto e ajusta só a luminosidade, no espaço de cor OKLCH, até atingir 4,5:1, escolhendo a opção mais próxima da cor original.