CSS e desenho de interfaces · Lição 06 / 12

Cor que comunica e permite ler

Uma combinação bonita também precisa permitir leitura e não depender só de cor.

Vamos descobrir juntos

1
Color define a cor do texto e background-color o fundo. Use variáveis, como --ink e --surface, para manter escolhas consistentes. Var(--ink) usa o valor definido; mudar uma variável pode afetar vários componentes.
2
O contraste compara luminâncias, não a diferença entre nomes de cores. Para texto comum, o critério WCAG 1.4.3 usa pelo menos 4,5:1; texto grande tem condições próprias e limite de 3:1. Não arredonde 4,49 para considerá-lo aprovado em 4,5.
3
O medidor desta oficina calcula apenas o par opaco escolhido e o limiar de texto comum. Não avalia automaticamente a página, transparência, imagens, gradientes, todos os estados ou conformidade completa. O número pode ser exibido arredondado; a comparação usa o valor original.
4
Um erro não deve aparecer apenas em vermelho: acrescente texto que explique o problema. Links mantêm sublinhado neste projeto. Compare branco/preto e branco/branco no medidor, depois teste sua paleta e confira foco e estados manualmente.

Oficina: uma interface, diferentes espaços

Edite o bloco <style id="lesson-css"> em “Meus arquivos e GitHub”. A prévia aplica esse CSS à estrutura HTML fornecida; confira alterações de HTML no arquivo baixado. Recursos externos e CSS fora do conjunto de estudo não são aceitos aqui.

Ir ao meu códigoLargura do documento de prévia

As medidas descrevem esta prévia, não garantem todos os tamanhos ou a acessibilidade completa. Teste conteúdo longo, zoom, teclado e tecnologias assistivas no projeto local.

Laboratório de contraste entre duas cores

Cor do textoCor do fundo

Razão aproximada ·

Cálculo apenas para duas cores sRGB opacas escolhidas aqui; não lê sua página. O limiar usa a razão sem arredondar. Não avalia transparência, gradientes, imagens, estados ou conformidade completa.

O código mudou. Aplique novamente para observar esta versão.CSS aplicado. Compare as medidas e teste o teclado dentro da prévia.Não foi possível aplicar. Mantenha um único style com id lesson-css, até 65.536 caracteres no documento e use o CSS ensinado, sem URLs, imports, escapes ou regras externas. Propriedades inválidas podem ser ignoradas pelo navegador; isto não é um validador completo.Página de estudo com seu CSSSimNãoMovimento reduzidoSem preferência por reduçãoO par atinge 4,5:1 para texto comum.O par fica abaixo de 4,5:1 para texto comum.<a href="#conteudo">Pular para o conteúdo</a> <header class="hero"><p>RULLST ACADEMY · CSS</p><h1>Oficina de ideias: uma interface que se adapta</h1><p>Desenhar, testar e revisar com espaço para aprender.</p> <nav class="nav" aria-label="Navegação principal"><a href="#programa">Ver programa</a><a href="#laboratorio">Explorar laboratório</a><a href="#revisao">Ler revisão</a></nav></header> <main id="conteudo" tabindex="-1"><section id="programa"><h2>Três maneiras de aprender</h2><div class="cards"> <article class="card featured"><h3>01 · Criar</h3><p>Transforme uma pergunta em uma ideia que possa ser testada.</p></article> <article class="card"><h3>02 · Testar</h3><p>Compare sua previsão com uma observação concreta.</p></article> <article class="card"><h3>03 · Revisar</h3><p>Melhore uma decisão e explique o que ainda falta conferir.</p></article></div></section> <section id="laboratorio" class="lab"><h2>Laboratório de leitura e espaço</h2><p class="sample">Este parágrafo é a amostra de cor e tipografia. O conteúdo deve continuar visível quando o espaço ou a fonte mudar.</p><p class="measure">Uma caixa para medir.</p><button type="button">Botão de treino, sem ação</button></section> <section id="revisao"><h2>O que você observou?</h2><p>Registre largura, conteúdo, teclado, contraste e movimento. Uma medição não prova todos os cenários.</p></section></main> <footer><p>Projeto fictício de estudo. Sem cadastro, envio ou dados pessoais.</p></footer>

Links oficiais e próximo passo

Referência para investigar

✦

SUA MISSÃO

Comparar contraste de duas cores opacas e reconhecer os limites dessa medida.

Leve com você

Escolha uma paleta e registre as duas cores, a razão e a decisão sem arredondar o limite. Acrescente uma pista além da cor a um estado.

No seu ritmo

Meus arquivos e GitHub

Toda lição pode virar um registro seu: código, anotações ou um plano de prática. Guardar um arquivo no GitHub é opcional e não altera seu XP.

Manual do aluno

O editor e os downloads abrem quando esta lição estiver liberada para sua conta. Confira o acesso abaixo ou volte ao mapa da trilha.

Conferindo seu acesso à lição…

Seu caminho, passo a passo

Baixar material da atividade

Baixe o exemplo da lição e um caderno para suas anotações. O ZIP inclui um guia para organizar atividades em um ou mais repositórios. Publicar é opcional; contas elegíveis também podem usar o botão de envio ao GitHub.

Seu arquivo desta lição

Edite o exemplo ou registre o que aprendeu. Este espaço não executa código nem corrige respostas. O rascunho é salvo apenas neste navegador, separado por conta; baixar e enviar ao GitHub são ações suas.

O exemplo pode ser apenas um trecho ou roteiro. Mudar a extensão não o transforma em programa completo. O ZIP da atividade contém material inicial; o botão de arquivo editado baixa o seu texto.

Meu código ou minhas anotações

<!doctype html>
<html lang="pt-BR"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; base-uri 'none'; form-action 'none'">
<title>Oficina de ideias: uma interface que se adapta</title>
<style id="lesson-css">
* { box-sizing: border-box; }
html { font-size: 100%; }
body { margin: 0; padding: 1rem; font-family: system-ui, sans-serif; line-height: 1.6; color: #15364c; background-color: #eef4f7; }
main, header, footer { max-width: 64rem; margin: 0 auto 1.25rem; }
h1, h2, h3 { line-height: 1.2; }
h1 { font-size: 2rem; }
a { color: #07598a; text-decoration: underline; }
a:focus-visible, button:focus-visible { outline: 3px solid #a13c00; outline-offset: 4px; }
.hero, .card, .lab { background-color: #ffffff; border: 1px solid #a4bac8; border-radius: 1rem; padding: 1rem; margin-bottom: 1rem; }
.cards { display: grid; grid-template-columns: minmax(0,1fr); gap: 1rem; margin-bottom: 1rem; }
.card { min-width: 0; margin-bottom: 0; }
.nav a { display: inline-block; padding: .5rem; }
.sample { color: #15364c; background-color: #ffffff; }
.measure { width: 200px; padding: 20px; border: 2px solid #15364c; box-sizing: border-box; background-color: #e1f4ed; }
button { font: inherit; padding: .75rem 1rem; border: 2px solid #15364c; border-radius: .5rem; background-color: #15364c; color: #ffffff; cursor: pointer; }
p, li, a { overflow-wrap: anywhere; }
:root { --ink: #15364c; --surface: #ffffff; }
.sample { color: var(--ink); background-color: var(--surface); }
</style></head><body>
<a href="#conteudo">Pular para o conteúdo</a>
<header class="hero"><p>RULLST ACADEMY · CSS</p><h1>Oficina de ideias: uma interface que se adapta</h1><p>Desenhar, testar e revisar com espaço para aprender.</p>
<nav class="nav" aria-label="Navegação principal"><a href="#programa">Ver programa</a><a href="#laboratorio">Explorar laboratório</a><a href="#revisao">Ler revisão</a></nav></header>
<main id="conteudo" tabindex="-1"><section id="programa"><h2>Três maneiras de aprender</h2><div class="cards">
<article class="card featured"><h3>01 · Criar</h3><p>Transforme uma pergunta em uma ideia que possa ser testada.</p></article>
<article class="card"><h3>02 · Testar</h3><p>Compare sua previsão com uma observação concreta.</p></article>
<article class="card"><h3>03 · Revisar</h3><p>Melhore uma decisão e explique o que ainda falta conferir.</p></article></div></section>
<section id="laboratorio" class="lab"><h2>Laboratório de leitura e espaço</h2><p class="sample">Este parágrafo é a amostra de cor e tipografia. O conteúdo deve continuar visível quando o espaço ou a fonte mudar.</p><p class="measure">Uma caixa para medir.</p><button type="button">Botão de treino, sem ação</button></section>
<section id="revisao"><h2>O que você observou?</h2><p>Registre largura, conteúdo, teclado, contraste e movimento. Uma medição não prova todos os cenários.</p></section></main>
<footer><p>Projeto fictício de estudo. Sem cadastro, envio ou dados pessoais.</p></footer>
</body></html>

Formato do arquivo

Seu texto será guardado neste navegador ao editar. Em computador compartilhado, limpe os rascunhos ao terminar.

O envio direto aceita até 8 KiB de texto em um arquivo. Use o download e o guia manual para projetos com vários arquivos.

Cor que comunica e permite ler

Vamos descobrir juntos

Oficina: uma interface, diferentes espaços

Medidas observadas na prévia

Laboratório de contraste entre duas cores

Links oficiais e próximo passo

Agora é a sua vez

Preveja, altere, compare

Leve com você

Meus arquivos e GitHub

Seu arquivo desta lição

Guardar no meu GitHub

Rullstpetbot