Paletas de cores de alto contraste, com taxas verificadas

Paletas de cores de alto contraste

Paletas de cores de alto contraste com taxas WCAG | We.Inc

Cinco paletas originais de alto contraste com cada par de texto e botão verificado pela WCAG 2.2, mais um testador para ajustar as cores e copiar o CSS.

Uma paleta de alto contraste é um conjunto de cores da marca em que o texto continua fácil de ler sobre o fundo. A WCAG 2.2 mede isso como uma taxa de 1:1 a 21:1. O texto do corpo precisa de pelo menos 4.5:1 para o nível AA e 7:1 para o AAA; o texto grande precisa de 3:1 e 4.5:1. As paletas aqui listam cada par.

Contrastes mínimos da WCAG 2.2

A maioria dos sites de paletas mostra amostras bonitas lado a lado, o que não diz nada sobre se um texto colocado sobre elas pode ser lido. Cada paleta abaixo dá uma função a cada cor (fundo, texto, texto secundário, destaque, texto sobre o destaque) e verifica os pares que você realmente usaria juntos em uma página.

Perguntas frequentes

Que taxa de contraste conta como alto contraste?

Não existe uma linha oficial única chamada alto contraste. O nível AA da WCAG pede 4.5:1 para texto normal e o nível AAA pede 7:1, então muitos designers tratam 7:1 para o texto do corpo como a meta de alto contraste.

Que tamanho conta como texto grande?

A WCAG considera grande o texto de pelo menos 18 pontos, ou 14 pontos em negrito. O guia explicativo do W3C coloca isso em cerca de 24px e 18.5px em pixels CSS.

Posso arredondar 4.47 para 4.5?

Não. O W3C diz que a taxa não é arredondada, então um par com 4.499:1 não atinge 4.5:1. Por isso o testador trunca os valores.

Botões e ícones também precisam de contraste?

Sim. O critério de sucesso 1.4.11 da WCAG 2.2 pede pelo menos 3:1 entre partes de controles e gráficos significativos e as cores ao lado deles.

Meu logo precisa passar?

Não. Texto que faz parte de um logo ou nome de marca não tem exigência de contraste pelo 1.4.3. Todo o resto da página em volta dele continua tendo.

Por que cinco funções e não cinco amostras

Adaptando uma paleta à sua marca

As cinco paletas e suas taxas

As taxas são calculadas com a fórmula da WCAG 2.2 e mostradas truncadas em duas casas decimais.

Cada par verificado nas cinco paletas

Use uma paleta no seu CSS

Tinta no papel como CSS custom properties

Nomeie as variáveis pela função, não pela cor, para que trocar de paleta depois seja uma edição por linha.

A fórmula de contraste em JavaScript

O mesmo cálculo que o testador faz, escrito a partir da definição de luminância relativa do W3C.

Testador de paletas

Escolha uma paleta e depois mude qualquer cor. Cada par é verificado de novo enquanto você digita.

Paleta inicial

Tinta no papel

Turno da noite

Livro-caixa da floresta

Azul do porto

Argila quente

Fundo

Texto do corpo

Texto secundário

Texto sobre o destaque

Contraste de cada par nesta paleta

{a} sobre {b}

Passa

Falha

Não é uma cor hex

Horário de funcionamento

Aberto de terça a sábado, das 9 às 5. Atendemos sem hora marcada antes do meio-dia.

Fechado em feriados.

Agende uma visita

Copiar variáveis CSS

Copiado.

Não foi possível copiar. Selecione o código e copie manualmente.

Todos os {n} pares atingem AA para texto do corpo.

{k} de {n} pares ficam abaixo de 4.5:1 para texto do corpo.

Tudo é calculado no seu navegador.

Comece grátis · Sem cartão de crédito

Relacionados: Guias

Produto

Para quem é

Recursos

Recursos

Empresa

Mapa do site