A história por trás do verificador de contraste
O baixo contraste é um dos problemas de acessibilidade mais comuns na web. As suas regras parecem números mágicos, mas cada uma tem uma razão, ligada à forma como os olhos perdem sensibilidade com a idade e como os ecrãs produzem luz.
De onde vêm 4,5 e 7
A WCAG 2.0 tornou-se uma recomendação do W3C em dezembro de 2008. Os autores partiram de um mínimo de 3:1 da norma ISO 9241-3 e aumentaram-no para compensar a perda de sensibilidade ao contraste de uma visão de cerca de 20/40, comum por volta dos 80 anos. Assim surgiu 4,5:1 para o nível AA. O nível AAA, 7:1, faz o mesmo para uma visão de cerca de 20/80.
A luminância relativa
A fórmula converte primeiro cada canal sRGB em luz linear e depois pondera o vermelho, o verde e o azul com 0,2126, 0,7152 e 0,0722, os mesmos pesos da norma de televisão ITU-R BT.709, porque o olho é mais sensível ao verde. A razão é a luminância mais clara mais 0,05 dividida pela mais escura mais 0,05. O 0,05 representa a luz refletida pelo ecrã e limita a escala de 1:1 a 21:1, preto sobre branco.
Para além do texto
O texto grande, com pelo menos 24 px ou 18,66 px em negrito, continua legível com menos contraste e precisa só de 3:1 para AA. A WCAG 2.1, publicada em junho de 2018, acrescentou o critério 1.4.11 Contraste não textual: contornos de campos, indicadores de foco, ícones e as partes de um gráfico necessárias para o compreender devem atingir 3:1 face ao que está ao lado.
Daltonismo e o que vem a seguir
Cerca de 1 em cada 12 homens e 1 em cada 200 mulheres têm uma deficiência na visão das cores, sobretudo no vermelho e no verde. O contraste mede a luminância, por isso um par aprovado continua legível, mas cores que diferem só no tom podem parecer iguais. A simulação usa o modelo de Machado, Oliveira e Fernandes de 2009. Os rascunhos da WCAG 3 exploram o APCA, um método mais recente que considera também o tamanho do texto e se é escuro sobre claro ou claro sobre escuro.
Perguntas frequentes
Um bom contraste chega para a acessibilidade?
Não. É um requisito entre muitos. A WCAG também pede que a cor não seja a única forma de transmitir significado, por exemplo juntando um ícone ou um sublinhado a uma ligação ou a um erro.
A simulação mostra exatamente o que uma pessoa vê?
É uma boa aproximação da dicromacia completa. Muitas pessoas têm uma forma mais leve e cada uma vê de forma um pouco diferente, por isso use-a como guia.
Devo usar o APCA em vez da razão da WCAG 2?
Para a conformidade hoje, use a razão da WCAG 2. A WCAG 2.2, publicada em outubro de 2023, mantém a mesma fórmula, e leis e normas como a EN 301 549 remetem para ela. O APCA ainda está em desenvolvimento.
Ferramentas relacionadas
Verificador de contraste de cores
Verificador de contraste WCAG gratuito: introduza as cores do texto e do fundo em HEX, RGB ou HSL, veja a razão de contraste com os resultados AA e AAA, obtenha a cor aprovada mais próxima e simule o daltonismo.
Gerador de paleta de cores
Crie, trave e misture paletas no navegador. Copie HEX, variáveis CSS ou JSON, exporte PNG ou SVG e extraia cores de uma foto.
Roda de cores
Escolha uma cor numa roda interativa, gere paletas complementares, análogas, triádicas e outras e copie HEX, RGB, HSL, HSV ou CMYK.
Editor de degradê
Crie degradês CSS lineares e radiais no navegador. Arraste paradas de cor, defina o ângulo e copie CSS, HEX, RGB, HSL, HSV ou CMYK.
Cores
Como a cor funciona no ecrã e na impressão: RGB, CMYK, HSL, hex, roda de cores, gradientes, contraste e ferramentas PictorX.
Pronto para experimentar?
Abra o PictorX no seu navegador – sem instalação, sem necessidade de cartão de crédito para começar.
Abrir o verificador de contraste