Avalie taxas de contraste entre texto e fundo com níveis AA/AAA e simule tipos de daltonismo.
Taxa de contraste
12.3:1
WCAG 2.1 AA
WCAG 2.1 AAA
Este texto demonstra a facilidade de leitura com o contraste selecionado.
Otimizar automaticamente para atingir o padrão WCAG AA
Avalie taxas de contraste entre texto e fundo com níveis AA/AAA e simule tipos de daltonismo. Use no trabalho, desenvolvimento, estudo ou em verificações rápidas.
Esta ferramenta funciona no navegador. Antes de usar dados sensíveis, confirme que o dispositivo e o navegador são confiáveis.
Este verificador de contraste calcula a razão entre a cor do texto e a do fundo usando a fórmula do WCAG 2.1: cada cor RGB é convertida em luminância relativa e aplica-se (mais clara + 0,05) ÷ (mais escura + 0,05), resultando em um valor de 1:1 a 21:1. Preto sobre branco é o máximo, 21:1, e cores iguais dão 1:1. Escolha as cores no seletor ou digite o código HEX, e a prévia do texto e do botão se atualiza na hora.
O nível AA do WCAG exige pelo menos 4,5:1 para texto normal e o nível AAA, 7:1; para texto grande (18 pt ou 14 pt em negrito), os limites caem para 3:1 e 4,5:1. Os selos AA e AAA da ferramenta usam os limites de texto normal. A razão não pode ser arredondada: #777777 sobre branco dá 4,47:1, que parece suficiente mas reprova, enquanto #767676 chega a 4,54:1 e passa no AA. #595959 sobre branco fica em cerca de 7,00:1, o bastante para AAA.
Se a combinação reprovar, use a correção inteligente: a ferramenta mantém a direção da tonalidade e clareia o texto (em fundos escuros) ou escurece (em fundos claros) aos poucos até atingir 4,5:1; se não conseguir, usa preto ou branco puros. É um atalho para encontrar uma cor utilizável, mas cores de marca ainda merecem um ajuste final do designer.
O simulador de daltonismo permite enviar uma imagem ou usar o exemplo e visualizá-la como alguém com protanopia, deuteranopia, tritanopia ou acromatopsia, usando matrizes de cor. Ajuda a verificar se gráficos, mapas ou cores de status dependem apenas da tonalidade. As imagens são reduzidas para caber em 800×600 e processadas em um canvas no navegador, sem envio a servidores. A simulação é uma aproximação; a percepção de cores varia de pessoa para pessoa.
Texto normal precisa de pelo menos 4,5:1 no WCAG AA e 7:1 no AAA. Texto grande (18 pt ou 14 pt em negrito) precisa de 3:1 no AA e 4,5:1 no AAA. Elementos não textuais, como ícones e bordas de campos, exigem pelo menos 3:1 pelo WCAG 2.1.
Os limites do WCAG são mínimos rígidos e não podem ser arredondados. A ferramenta mostra duas casas decimais arredondando para baixo, para que você nunca veja algo que pareça 4,5:1 e reprove.
Ela altera apenas a luminosidade da cor do texto; o fundo continua igual. O resultado mantém uma tonalidade parecida ou vira preto ou branco se nada mais funcionar. Para preservar a cor da marca, ajuste o fundo ou use a cor original só em textos grandes e elementos decorativos.
Não. O navegador lê a imagem e aplica a matriz de cor em um canvas, então tudo acontece no seu dispositivo. Os filtros são aproximações comuns, úteis para identificar designs que transmitem informação apenas pela cor.
Ver esta categoria: Design e cores
Gere partículas, corpos elásticos, colisões e campos gravitacionais interativos em tempo real com Canvas.
Adicione pontos de ancoragem, arraste as alças de Bézier em uma tela de 500×500 e gere na hora o atributo d do caminho SVG e uma regra CSS clip-path: path().
Coloque prints de tela dentro de uma moldura de navegador estilo macOS com sombra e fundo gradiente e baixe em PNG de alta resolução.
Crie letreiros luminosos personalizando cores, pulsação e sombras brilhantes com exportação de código CSS.
