Color Contrast Checker Tool é um pequeno utilitário Android construído para uma tarefa: informar se uma cor de texto realmente se lê contra um fundo, usando a mesma matemática que o padrão WCAG usa. Gostamos da ideia o suficiente para criar nossa própria versão para navegador, Clarity Check, para que qualquer pessoa que esteja escolhendo cores para um site, apresentação ou aplicativo não precise instalar nada para obter o número. Escolha duas cores e a razão se atualiza instantaneamente quando você muda qualquer uma delas.
Verifique uma razão de contraste agora
Ele abre com um par real já carregado, texto branco sobre Índigo, então você vê uma razão ao vivo e distintivos de aprovação/reprovação antes de tocar em qualquer coisa. Arraste qualquer seletor de cor ou digite um código hex para verificar seu próprio par.
Como usar
Defina sua cor de texto em “Texto” e seu fundo em “Em”, arrastando o seletor de cor nativo ou digitando um código hex diretamente. A razão, a visualização de texto ao vivo e os três distintivos (texto AA, texto grande AA, texto AAA) se atualizam a cada mudança, sem necessidade de pressionar um botão. Toque em Inverter para trocar texto e fundo, ou toque em um dos pares predefinidos para carregar uma combinação pronta e ver onde ela se encaixa. Tudo que você digita fica no seu navegador; seu último par é salvo no seu dispositivo, então ele ainda estará lá na próxima vez que você abrir a página.
Como se compara ao Color Contrast Checker Tool
Clarity Check mantém a parte do aplicativo original que realmente importa no dia a dia: digite ou escolha duas cores, obtenha a razão de contraste WCAG e uma aprovação ou reprovação clara contra os limites AA e AAA, instantaneamente e sem uma conta. A visualização de texto ao vivo é nossa própria adição, então você não está apenas lendo um número, está vendo o emparelhamento renderizado da maneira como um leitor realmente o veria.
O que deixamos de fora é o resto de um aplicativo Android dedicado: histórico de projetos salvos, verificação em lote de múltiplos pares ao mesmo tempo e qualquer acesso offline além de uma única aba do navegador. Se você estiver verificando cores uma vez enquanto projeta algo na web, Clarity Check é suficiente. Se a verificação de contraste é parte do seu fluxo de trabalho regular e você quer isso no seu telefone sem uma aba do navegador aberta, o aplicativo Android é a melhor opção.
Uma coisa mais que vale a pena mencionar: submetemos a interface de nossa própria ferramenta ao mesmo padrão que ela mede. Cada texto de interface na página, rótulos, distintivos, botões, tem contraste de pelo menos 4,5:1 contra seu fundo. Um verificador de contraste que não pudesse passar em seu próprio teste seria um mau anúncio para a ideia.
Obtenha o aplicativo completo
Color Contrast Checker Tool é um aplicativo Android gratuito se você quiser verificação de contraste disponível fora do navegador, com seu histórico salvo no dispositivo.
Perguntas frequentes
Qual fórmula este verificador de contraste usa?
A exata da WCAG 2.1: luminância relativa para cada cor de seus canais sRGB, então a razão de contraste (L1 + 0.05) / (L2 + 0.05) usando a luminância mais clara e mais escura. É a mesma matemática que navegadores e ferramentas de design usam, então um par preto sobre branco lê 21:1 aqui assim como em qualquer outro lugar.
O que AA e AAA realmente significam?
São níveis de conformidade WCAG 2.1 para contraste de texto. AA requer pelo menos 4,5:1 para texto normal e 3:1 para texto grande (aproximadamente 18px em negrito ou 24px regular e acima). AAA é mais rigoroso: 7:1 para texto normal. A maioria dos sites e aplicativos é direcionada ao AA; AAA é para conteúdo onde a legibilidade importa ainda mais, como produtos focados em acessibilidade.
Este é o verdadeiro Color Contrast Checker Tool?
Não. Clarity Check é uma ferramenta para navegador que construímos, inspirada no que o aplicativo Android faz, e não é afiliada ou endossada por seu desenvolvedor. Ela executa a mesma fórmula WCAG, mas é nosso próprio código e interface. Os links de download acima levam ao aplicativo real.
Funciona offline e meus dados são privados?
Depois que a página carrega, ela não faz mais solicitações de rede, então uma conexão perdida não a impedirá de funcionar. Nada que você digita ou escolhe é enviado para qualquer lugar; suas últimas cores são salvas apenas no armazenamento local do seu navegador.
É gratuito?
Sim, completamente. Sem anúncios, sem conta, sem limite de quantos pares você verifica.
