Razão de contraste
- AA texto normal 4.5:1
- AA texto grande 3:1
- AAA texto normal 7:1
- AAA texto grande 4.5:1
- Componentes de interface e gráficos 3:1
Legível para todos
Um subtítulo grande
O texto corrido é onde o baixo contraste mais prejudica, porque é lido durante mais tempo e em tamanho pequeno. Uma ligação de texto
Cores aprovadas mais próximas
Cores guardadas
Verificador de contraste de cores
Verifique se o texto é legível sobre o fundo antes de publicar um design. Escolha ou escreva uma cor de texto e uma cor de fundo, e o verificador mostra a razão de contraste WCAG 2.x com aprovado ou reprovado para AA e AAA, para texto normal, texto grande e componentes de interface. Uma pré-visualização ao vivo, a simulação de daltonismo e correções sugeridas ajudam a encontrar um par que funcione. Escolha uma cor de texto e um fundo em HEX, RGB ou HSL. A razão de contraste WCAG, os resultados AA e AAA e a pré-visualização atualizam enquanto escreve, e são sugeridas as cores aprovadas mais próximas. Tudo fica guardado neste navegador.
Como funciona
- Escolha uma cor de texto e uma cor de fundo, ou escreva-as em HEX, RGB ou HSL. Ajuste a opacidade do texto se for semitransparente.
- Leia a razão de contraste e os selos AA e AAA para texto normal, texto grande e componentes de interface, e confira a pré-visualização ao vivo.
- Aplique uma cor sugerida se o par reprovar, guarde os bons pares na paleta e copie o CSS para o seu projeto.
Correções, não só notas
Quando um par reprova, o verificador procura a cor de texto e a cor de fundo mais próximas, com o mesmo tom e saturação, que atingem AA e AAA, e um clique aplica a cor. O texto semitransparente é primeiro misturado com o fundo, tal como o navegador o desenha.
Privado e portátil
As suas cores e a paleta ficam guardadas apenas neste navegador. Guarde tudo em JSON para fazer uma cópia ou passar para outro dispositivo, ou guarde o resultado em PDF ou imagem. Anular e refazer cobrem todas as alterações.
Perguntas frequentes
O verificador de contraste é gratuito?
Sim. É gratuito, não precisa de conta e funciona em qualquer navegador moderno.
De que razão preciso?
O nível AA das WCAG pede pelo menos 4,5:1 para texto normal e 3:1 para texto grande e componentes de interface como contornos de campos e ícones. O nível AAA pede 7:1 para texto normal e 4,5:1 para texto grande.
Porque é que 4,48 reprova se arredonda para 4,5?
Os limites das WCAG são exatos. Uma razão de 4,48:1 fica abaixo de 4,5:1, por isso reprova AA para texto normal. O verificador compara o valor sem arredondar, pelo que os selos são sempre rigorosos.
Ferramentas relacionadas
A história por trás do verificador de contraste
De onde vêm os valores de contraste WCAG: 4,5:1 e 7:1, a luminância relativa a partir do sRGB, a regra de 3:1 para componentes de interface da WCAG 2.1, o daltonismo e o APCA para a WCAG 3.
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.
Ir para o editor