Guide
O curso de cor e contraste é um tutorial interativo de 17 níveis que ensina a ler qualquer notação de cor que apareça em um layout ou em CSS e a julgar, com um critério mensurável, "se essas duas cores juntas dá para ler". Cada nível traz de um a três seletores de cor e um objetivo concreto — levar a luminosidade a um valor, passar o contraste de 4,5:1, encontrar três cores com 120° de diferença de matiz, tornar distinguível um par que daltônicos confundem — e, conforme você arrasta os controles ou digita valores, as leituras, o selo de contraste, a roda de cores e a tabela de simulação de daltonismo se atualizam ao vivo, enquanto o verificador diz exatamente onde está o erro.
Atualizado em 2026-09-094 sources16 min read
O curso de cor e contraste é um tutorial interativo de 17 níveis que ensina a ler qualquer notação de cor que apareça em um layout ou em CSS e a julgar, com um critério mensurável, "se essas duas cores juntas dá para ler". Cada nível traz de um a três seletores de cor e um objetivo concreto — levar a luminosidade a um valor, passar o contraste de 4,5:1, encontrar três cores com 120° de diferença de matiz, tornar distinguível um par que daltônicos confundem — e, conforme você arrasta os controles ou digita valores, as leituras, o selo de contraste, a roda de cores e a tabela de simulação de daltonismo se atualizam ao vivo, enquanto o verificador diz exatamente onde está o erro.
O curso tem quatro blocos: modelos de cor (o que cada componente de RGB, HEX, HSL, HSV e OKLCH controla e por que a "luminosidade" do HSL não é a que o olho percebe); contraste e WCAG (a fórmula da luminância relativa e o que cada um dos três limites 4,5:1 / 3:1 / 7:1 exige); esquemas de cor (as relações complementar, triádica e análoga na roda de cores); e acessibilidade e prática (o mundo visto por quem tem daltonismo, como escolher uma paleta segura para daltônicos e como extrair as cores dominantes de um logo). O último nível pede que você junte tudo o que aprendeu e entregue um trio de cores que passe em todas as checagens.
São cerca de 45 minutos. É para desenvolvedores front-end, designers e qualquer pessoa que precise escolher cores para slides, gráficos e cartazes; não é preciso base de arte.
#RRGGBB / rgb() / hsl().?lesson=n.O curso em si está acima desta página: escolha o nível no índice à esquerda, arraste os controles ou digite um valor no meio e o veredito aparece na hora.
O nível 8, "WCAG AA: texto normal com pelo menos 4,5:1", fixa o fundo em branco e pede que você ajuste a cor do texto até o contraste ser ≥ 4,5 sem que a cor seja preto puro. Veja um registro de tentativa:
Fundo (fixo) #FFFFFF luminância relativa L = 1.000
Tentativa 1 #3B82F6 L = 0.228 contraste = 1.05 / 0.278 = 3.68:1
veredito ✓ AA texto grande (≥ 3) ✕ AA texto normal (≥ 4.5)
Tentativa 2 #2563EB L = 0.153 contraste = 1.05 / 0.203 = 5.17:1
veredito ✓ AA texto grande ✓ AA texto normal ✕ AAA texto normal (≥ 7) → concluídoO nível 15, "seguro para daltônicos", parte do laranja #E76F51 como referência e da cor inicial verde #8AB17D: na visão normal ΔE ≈ 0.20, ou seja, dá para separar de primeira, mas na simulação de deuteranopia cai para 0.056 e as duas quase se sobrepõem. Trocando a segunda cor por um azul de luminosidade média (como #2563EB), o ΔE simulado volta a ficar acima de 0.15 e as duas cores passam de 3:1 sobre fundo branco, o que conclui o nível.
Cada pixel da tela é formado por três subpixels, vermelho, verde e azul; rgb(37 99 235) é a intensidade de cada um dos três feixes, em que 0 é apagado e 255 é intensidade máxima. Os três em 0 dão preto, os três em 255 dão branco e valores iguais dão cinza. HEX é a mesma tripla em hexadecimal: em #2563EB, 25 = 37, 63 = 99 e EB = 235, com dois dígitos por canal; a forma de três dígitos, como #FFF, é a abreviação em que cada dígito se repete uma vez. Esse sistema se chama sRGB e é o espaço de cor padrão da web e da imensa maioria dos monitores; entre o valor e a intensidade física da luz existe ainda uma curva gama, que será usada mais adiante no cálculo do contraste.
RGB é prático para a máquina e pouco intuitivo para gente: para deixar um azul "mais claro", é preciso mexer nos três canais ao mesmo tempo. O HSL troca o conjunto de coordenadas: matiz H é o ângulo na roda de cores (0° vermelho, 120° verde, 240° azul, 360° de volta ao vermelho), saturação S é o quão "pura" a cor é (0% cinza, 100% mais viva) e luminosidade L é o quão clara ela é (0% preto, 50% cor pura, 100% branco). Clarear é aumentar o L, e tons pastel saem de um S baixo com L alto — o nível 4 do curso pede exatamente isso. Em CSS, hsl(221 83% 53%) é a mesma cor que #2563EB.
No HSV (também chamado HSB) o V é "o maior dos três canais": com V = 100% a cor fica no máximo de vivacidade ou de brilho, e levar o S a 0 dá branco em vez de cinza. No HSL, L = 100% é sempre branco. Os seletores de cor dos programas de design costumam usar HSV (um quadrado mais uma faixa de matiz), enquanto o CSS só tem HSL; converter um no outro não perde nada, mas os componentes significam coisas diferentes, então não digite os números do HSV direto em hsl().
hsl(60 100% 50%) é amarelo puro e hsl(240 100% 50%) é azul puro, e os dois têm L = 50%, mas o amarelo parece bem mais claro. Isso acontece porque o HSL é só um rearranjo geométrico dos valores de RGB, sem relação com a percepção humana. O OKLab / OKLCH (Ottosson, 2020) foi ajustado sobre dados de experimentos com pessoas, de modo que um L igual significa o mesmo brilho percebido e as variações de C (croma) e h (matiz) também ficam mais uniformes. O CSS Color 4 já inclui oklch() no padrão e os principais navegadores dão suporte. O nível 6 pede que você use apenas a leitura OKLCH para levar uma cor a um L entre 0,68 e 0,72, na faixa de matiz do laranja — e você vai notar que a leitura de L do HSL não corresponde a isso. Para fazer gradientes, gerar escalas de claro e escuro dentro da mesma matiz e manter o "mesmo brilho" ao trocar de matiz, o OKLCH é bem mais estável.
O contraste definido pela WCAG não é a diferença entre dois números quaisquer, mas a razão entre as luminâncias relativas:
em que e o 0,05 simula a reflexão da luz ambiente. A luminância relativa sai dos três canais sRGB depois de uma decodificação gama e de uma ponderação:
O verde tem o maior peso (0,7152), e é por isso que um verde de mesmo valor parece bem mais claro que um azul; o contraste entre preto e branco é o teto de 21:1. O nível 7 pede que você faça essa conta à mão sobre as leituras, e a partir daí cada nível passa a ser calculado pela página.
O critério 1.4.3 da WCAG 2.2 (nível AA) exige contraste ≥ 4,5:1 para texto normal e ≥ 3:1 para texto grande (por volta de 24 px normal ou 18,5 px em negrito); o 1.4.11 exige ≥ 3:1 também para "conteúdo não textual", como ícones, bordas e gráficos; e o 1.4.6 (nível AAA) sobe o texto normal para ≥ 7:1. Não são critérios estéticos, e sim limiares empíricos que permitem a leitura por pessoas com baixa visão moderada, além de base legal em muitos países.
O nível 9 pede justamente "passar de 7:1 sem usar preto puro": #000 sobre #FFF dá 21:1 e não há problema, mas grandes áreas de preto e branco puros causam ofuscamento, então o design costuma escolher cinzas escuros como #1A1A1A ou #24292F, que ainda passam com folga de 7:1. No outro extremo, um texto de espaço reservado em cinza claro como #9CA3AF tem só 2,5:1 sobre fundo branco, e muitos sites falham nesse ponto.
A parte mais básica da teoria de cores são as relações angulares entre matizes:
A roda de cores do curso marca essas três posições da cor atual; a verificação olha apenas a diferença de matiz (com uma pequena tolerância), e saturação e luminosidade podem ser ajustadas à vontade — em projetos reais elas costumam importar mais que o matiz.
Cerca de 8% dos homens e 0,5% das mulheres têm alguma deficiência de visão de cor, sendo as mais comuns a vermelho-verde (protanopia, sem o vermelho, e deuteranopia, sem o verde); a azul-amarela (tritanopia) é rara e a acromatopsia é raríssima. O curso simula com o modelo fisiológico de Machado e colaboradores, de 2009: a cor é projetada sobre a resposta dos cones de quem tem a deficiência e depois convertida de volta para sRGB. Ao mesmo tempo, a distância euclidiana ΔE no espaço OKLab quantifica "o quanto duas cores diferem": até ≈ 0,02 elas são praticamente indistinguíveis, e a partir de ≥ 0,15 dá para separar de primeira.
O nível 14 pede que você ache, entre três pares de cores, o mais difícil para quem tem deuteranopia — o laranja #E76F51 e o verde #8AB17D caem para ΔE 0,056 depois da simulação, enquanto vermelho com ciano e azul escuro com amarelo continuam claros por causa da grande diferença de luminosidade; o nível 15 pede que você conserte o par. Há dois caminhos possíveis: abrir a diferença de luminosidade (o daltonismo perde principalmente informação de matiz, e a diferença de luminosidade continua visível) ou trocar o matiz (vermelho e verde passam a azul e laranja). Em gráficos, o ideal é acrescentar forma, textura ou o número escrito, sem depender só da cor — é o que pede o critério 1.4.1 da WCAG.
O jeito simples de "extrair a cor dominante" de uma imagem é contar pixels: quantize cada canal RGB do pixel em 16 níveis (4096 caixas), conte, ordene e tire a média das primeiras caixas. O curso desenha um logo de exemplo em um canvas e devolve uma paleta ordenada por participação, em que você pode clicar em uma amostra ou pegar a cor direto na imagem. Ferramentas de verdade (como o Vibrant.js e a cor dinâmica do Material You) ainda agrupam cores parecidas, descartam quase branco e quase preto e ponderam pela saturação, mas a ideia é a mesma.
O último nível junta tudo: entregue três cores em que cada uma tenha contraste ≥ 4,5:1 sobre fundo branco (podendo ser usadas direto em texto normal ou em botões), em que a diferença de matiz entre quaisquer duas seja ≥ 60° (para dar para separar) e, de preferência, com os três L em OKLCH próximos (para dar unidade). Em um projeto real, decidir cor é mais ou menos isso: a interseção das três restrições — legível, separável e coeso.
#F00 e verde puro #0F0 têm 120° de diferença de matiz e ainda assim só 2,9:1 de contraste, além de serem quase indistinguíveis para quem tem daltonismo vermelho-verde.Leve a cor do texto e a do fundo do layout até o seletor do nível 8 e saiba na hora se passa em AA; textos de espaço reservado, estados desativados e legendas auxiliares são os pontos que mais falham.
A tabela de simulação dos níveis 14–15 mostra direto se uma paleta categórica continua distinguível para quem tem daltonismo vermelho-verde; se não estiver, troque matizes ou abra a diferença de luminosidade e acrescente forma e rótulos.
Extraia a cor dominante do logo (a ideia do nível 16), ache as cores de destaque com as relações da roda (níveis 11–13) e escolha a cor do texto nos níveis de contraste — o nível 17 é justamente esse fluxo em forma de exercício.
Ao topar com oklch(0.7 0.15 250) você já sabe que os três números são luminosidade perceptual, croma e matiz, e entende por que ela rende um gradiente mais suave que o HSL.
O contraste é decidido pela luminância relativa: azuis, roxos e vermelhos saturados parecem "escuros", mas podem ter luminosidade alta, e a razão sobre o branco é afetada pelo termo +0,05. Olhe o valor de contraste na "Leitura dos valores" e vá reduzindo o L do HSL até passar.
Não. Todos os níveis são verificados por faixa numérica (limite de contraste, diferença de matiz, limiar de ΔE), então qualquer cor que cumpra a condição conclui o nível.
Figma e Sketch ainda usam HSB como base nos seletores, mas o CSS aceita oklch() direto; o painel de leitura do curso mostra as cinco notações ao mesmo tempo, e basta copiar a linha que você precisa.
O modelo de Machado 2009 é um dos adotados pela academia e por ferramentas conhecidas (Chrome DevTools, Color Oracle) e é uma boa aproximação para a deficiência completa; diferenças individuais e graus leves não cabem em uma única matriz.
Não, o progresso fica apenas no localStorage do navegador atual; o link de "Compartilhar este nível" permite continuar do mesmo nível em outro lugar, mas o histórico não vai junto.
O curso roda inteiro no navegador: conversão de cores, contraste, simulação de daltonismo e contagem de pixels são cálculos puros dentro da página, sem pedir nada a servidor; o logo de exemplo é desenhado na hora em um canvas, sem carregar imagens externas; e o progresso fica no localStorage do seu aparelho.
hsl() e oklch(), com as conversões entre eles: https://www.w3.org/TR/css-color-4/(consultado em 2026-09-09)Atualizado em 2026-09-09
17 níveis: significado de RGB/HEX/HSL/HSV/OKLCH, contraste WCAG, paletas complementar/triádica/análoga, simulação de daltonismo e extração de cor de marca, com veredito ao vivo ao arrastar os controles
Esta ferramenta ainda não está totalmente traduzida; parte do conteúdo usa o idioma de origem ou um idioma de reserva.
ObjetivoArraste os controles deslizantes R, G e B para fazer laranja #FF8000 (R=255, G=128, B=0).
As telas misturam luz vermelha, verde e azul (aditivo): todas as três ligadas são brancas, todas as desligadas são pretas. Cada canal vai de 0 a 255, fornecendo 256³ ≈ 16,7 milhões de cores. #FF8000 significa vermelho cheio, verde meio, azul desligado - laranja. O julgamento usa a distância perceptiva ΔE (OKLab), então você não precisa acertar todos os dígitos exatamente; indistinguível aos olhos conta como um passe.