0Pricing
Web Accessibility Academy · Aula

Cor, padrão e rótulos diretos

Codifique as séries para que pessoas daltônicas possam interpretá-las.

Cor, padrão e rótulos diretos é uma aula grátis de Web Accessibility Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Web Accessibility Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Web Accessibility Academy inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

Color Alone Lies to Some Eyes

About 1 in 12 men cannot reliably tell certain colors apart. If your chart says red means loss, those users see no difference at all. 🎨

The Two-Channel Rule

Encode every series with a second channel besides color: a pattern, a shape, or a direct label. Color becomes a bonus, not the only cue.

Patterns Fill the Gap

Give bars and areas distinct patterns like stripes or dots. The fill tells the series apart even in pure grayscale.

<rect fill="url(#stripes)" />

Different Shapes for Line Charts

On line charts, mark points with distinct shapes: circles, squares, triangles. Each line stays distinguishable without relying on hue.

Direct Labels Beat Legends

A separate legend forces a color-matching game. Put the label right on the line or slice so the name sits next to the data.

Pick a Color-Blind-Safe Palette

Some hue pairs, like red and green, are the hardest to tell apart. A color-blind-safe palette such as Okabe-Ito avoids those clashes.

Contrast Still Matters Here

Adjacent series and their text labels need real contrast. WCAG asks for at least 3 to 1 between meaningful graphical parts.

Test in Grayscale

Quick check: view your chart in grayscale. If you cannot tell the series apart, neither can a color-blind user. Fix it before shipping.

filter: grayscale(100%);

Redundant Encoding Is the Goal

This stacking of cues is called redundant encoding: color plus pattern plus label. Lose one cue and the chart still reads clearly.

Do Not Drown in Cues

Balance matters. Heaping on every pattern at once gets noisy. Add just enough so each series is distinct and the chart stays calm.

It Helps in Bad Light Too

Direct labels and patterns also rescue charts viewed in sunlight, on cheap screens, or printed in black and white. Everyone wins. ☀️

Quick Check

Why is color alone a poor way to distinguish chart series?

Recap: More Than One Cue

You learned to never lean on color alone: add patterns, shapes, or direct labels, choose safe palettes, and test in grayscale. 🖤

Perguntas Frequentes

A aula “Cor, padrão e rótulos diretos” é grátis?

Sim — o texto completo de “Cor, padrão e rótulos diretos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Web Accessibility Academy, atualize para CoddyKit PRO. O curso de Web Accessibility Academy inclui 4 aulas no total.

O que vou aprender em “Cor, padrão e rótulos diretos”?

Codifique as séries para que pessoas daltônicas possam interpretá-las. Você pratica Web Accessibility Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Web Accessibility Academy?

Nenhuma experiência prévia é necessária. Web Accessibility Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “Cor, padrão e rótulos diretos”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Web Accessibility Academy?

Sim. Cada aula de Web Accessibility Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. Todo gráfico precisa de uma alternativa textual
  2. A alternativa da tabela de dados
  3. Cor, padrão e rótulos diretos
  4. Gráficos interativos navegáveis pelo teclado
← Voltar para Web Accessibility Academy