Artigo
Extraindo uma paleta de cores acessível de uma imagem
Uma fotografia ou ativo de marca muitas vezes contém o ponto de partida de um sistema completo de cores. Extrair esse ponto de partida, moldá-lo em uma paleta utilizável e verificá-lo em relação a padrões de acessibilidade requer três etapas distintas. Este artigo cobre cada uma delas em ordem: como a extração de paleta funciona internamente, como selecionar e ajustar cores para uso prático, como verificar o contraste em relação aos limites WCAG e como detectar os pares que se colapsam para usuários daltônicos.
Como uma paleta é extraída: amostragem de pixels e quantização de cores
Toda imagem digital é uma grade de pixels, cada um carregando um valor de cor em um espaço como RGB. Um extrator de paleta não inspeciona cada pixel individualmente: uma foto de 2 megapixels contém 2 milhões de pontos de dados, o que seria lento de processar e retornaria milhares de tons ligeiramente diferentes em vez de um conjunto útil. Em vez disso, a ferramenta amostra a grade de pixels em intervalos regulares, coletando um subconjunto representativo. Esse subconjunto é então alimentado em um algoritmo de quantização de cores. A abordagem mais comum agrupa cores semelhantes usando um método de clustering, às vezes chamado de particionamento por corte mediano ou estilo k-means. O algoritmo coloca cada pixel amostrado em um dos buckets de número fixo com base na similaridade de cor, depois calcula a cor média de cada bucket. O resultado é uma lista pequena, normalmente de 4 a 16 cores, que juntas representam os tons visuais dominantes na imagem. Cores que aparecem apenas em pequenas áreas isoladas podem ser perdidas, o que é comportamento esperado e não um defeito.
Das cores dominantes brutas a uma paleta utilizável
A saída bruta de um extrator de paleta é uma lista de cores classificadas por frequência, mas a frequência por si só não cria uma paleta. Uma fotografia de uma floresta retornará vários verdes muito similares para usar em uma UI como acentos distintos. O trabalho prático é selecionar e ajustar. Comece identificando uma cor como sua primária: a mais distintiva e menos neutra. Das cores restantes, procure no máximo duas que contratem com a primária e entre si. Essas se tornam seus acentos. Todo o resto, incluindo os tons dessaturados que o extrator frequentemente retorna de sombras e meios-tons, pode servir como neutros para fundos e bordas. Uma vez com essa estrutura básica, você quase certamente precisará ajustar valores individuais. A ferramenta color-converter permite examinar cada cor em hex, RGB e HSL. HSL é particularmente útil aqui: você pode manter o matiz constante e ajustar a luminosidade ou a saturação para criar uma família mais fechada ou mais aberta sem sair da mesma família de cores.
Verificando o contraste: limites WCAG para texto legível
Depois de ter cores candidatas para texto e fundo, você precisa verificar se a combinação é legível. As Diretrizes de Acessibilidade para Conteúdo Web (WCAG) definem uma taxa de contraste para esse fim. A taxa compara a luminância relativa de duas cores: um valor de 1:1 significa nenhum contraste (mesma cor sobre a mesma cor) e 21:1 é o máximo (preto sobre branco). O WCAG 2.1 Nível AA exige uma taxa de pelo menos 4,5:1 para texto de corpo em tamanho normal e 3:1 para texto grande (18pt ou 14pt em negrito). O Nível AAA estabelece limites mais altos de 7:1 e 4,5:1 respectivamente. Você não precisa calcular luminância manualmente. O ponto principal é que um par de cores que parece bom para você com boa iluminação pode ficar abaixo de 4,5:1 na tela, e a diretriz existe exatamente para esse caso. Depois de extrair e ajustar as cores, teste cada par texto-sobre-fundo que planeja usar. Um cinza médio que lê bem sobre branco pode falhar completamente sobre um fundo bege claro da sua paleta extraída.
Daltonismo: simulando como os pares aparecem para usuários afetados
Aproximadamente 1 em 12 homens e 1 em 200 mulheres têm alguma forma de deficiência na visão de cores. O tipo mais comum é a deuteranopia (sensibilidade reduzida ao verde), seguida pela protanopia (sensibilidade reduzida ao vermelho). A tritanopia (sensibilidade reduzida ao azul-amarelo) é mais rara. Para cada tipo, o sistema visual mapeia certos comprimentos de onda para a mesma cor percebida que observadores sem deficiência veem como distintas. O problema prático para uma paleta é que duas cores que parecem claramente diferentes sob visão normal podem se colapsar no mesmo tom para um usuário daltônico, tornando-as inúteis para transmitir distinção. Por exemplo, usar apenas vermelho e verde para sinalizar sucesso e erro. Executar uma simulação de daltonismo mostra como a paleta parece quando os canais afetados são comprimidos. Os pares que se colapsam em um cinza ou marrom quase idêntico são os que merecem reconsideração: aumente a diferença de luminosidade entre eles para que o contraste permaneça mesmo sem a distinção de matiz, ou adicione uma indicação secundária (forma, rótulo, padrão) para que a cor não seja o único sinal.
Fazendo localmente: color-palette, color-blindness e color-converter
As três etapas descritas neste artigo podem ser concluídas sem enviar sua imagem ou cores de marca para qualquer servidor. A ferramenta color-palette roda inteiramente no navegador: você solta uma imagem, ela amostra os pixels localmente e retorna as cores dominantes como valores hex. Nenhum arquivo é transmitido. A ferramenta color-converter aceita um código hex e mostra a mesma cor em RGB e HSL para que você possa fazer ajustes direcionados de luminosidade ou saturação enquanto permanece na mesma família de matiz. Tanto o hex quanto os valores convertidos existem apenas na página. A ferramenta color-blindness funciona ao contrário: você solta uma imagem e ela renderiza simulações de deuteranopia, protanopia e tritanopia dessa imagem, calculadas no navegador. Para verificar uma paleta em vez de uma foto, exporte ou capture suas amostras de cor como uma imagem primeiro, depois solte-a no simulador. Usando as três ferramentas em sequência: extraia da imagem, ajuste no color-converter e depois exporte uma imagem de amostra e verifique-a no color-blindness, cobrindo todo o fluxo descrito acima. Sua imagem permanece no seu dispositivo durante todo o processo, o que importa se a foto de origem contém uma identidade de marca não publicada ou a identidade ainda não lançada de um cliente.
Ferramentas neste artigo
- Extrator de paleta de coresExtraia as cores dominantes de uma imagem como amostras HEX. Copie qualquer cor. Sem upload.
- Simulador de daltonismoSimule protanopia, deuteranopia, tritanopia e acromatopsia em uma imagem. Sem upload.
- Conversor de CoresConverta cores entre HEX, RGB, HSL, HSV e CMYK. Verificador de contraste WCAG incluído. Sem upload.
- Gerador de Esquema de CoresGere paletas complementares, análogas, triádicas, tetrádicas e monocromáticas a partir de uma cor base. Sem upload.
Perguntas frequentes
Quantas cores um extrator de paleta normalmente retorna?
A maioria das ferramentas retorna entre 5 e 16 cores por padrão, embora muitas permitam definir a quantidade. Retornar menos cores significa que o algoritmo precisa agrupar mais pixels, o que pode fundir tons distintos mas semelhantes. Retornar mais cores pode produzir quase-duplicatas difíceis de usar de forma distinta. Para uma paleta de UI, 6 a 8 cores geralmente é um ponto de partida prático.
Uma paleta extraída de uma imagem pode passar automaticamente no contraste WCAG?
Não automaticamente. As cores dominantes em uma fotografia costumam ser meios-tons com luminância moderada, que tendem a produzir taxas entre 2:1 e 3:1 entre si. Atingir o limite de 4,5:1 para texto de corpo geralmente requer clarear os valores de fundo ou escurecer os valores de texto além do que a extração bruta fornece. A extração dá o ponto de partida; a verificação de contraste indica o quanto de ajuste é necessário.
A taxa de contraste WCAG leva em conta o daltonismo?
Parcialmente. A fórmula de luminância WCAG é baseada em brilho relativo, não em matiz, então um par de alto contraste que atinge 4,5:1 geralmente permanecerá distinguível mesmo para usuários daltônicos porque a diferença de luminosidade é preservada. No entanto, duas cores com luminância semelhante mas matizes diferentes, como vermelho e verde no mesmo brilho, podem passar em uma verificação de contraste baseada em luminância e ainda assim serem indistinguíveis para deuteranopes. Executar uma simulação de daltonismo é a forma correta de verificar a diferenciação em nível de matiz separadamente da taxa de contraste.