Cor em Micro-Interações: Estados de Hover, Foco e Ativo

Todo elemento interativo na tela tem pelo menos quatro estados de cor distintos: padrão, hover, foco, ativo e desabilitado. A maioria dos designers pensa cuidadosamente sobre o estado padrão e então trata o resto como segundo plano — ligeiramente mais escuro no hover, talvez um anel azul no foco, pronto. Isso é uma oportunidade perdida. Quando as cores de estado são projetadas intencionalmente, elas comunicam significado, constroem confiança do usuário e fazem as interfaces parecerem polidas em vez de remendadas.

Este guia abrange a teoria por trás de cada estado, técnicas específicas para deslocamentos de luminosidade, design de anel de foco, feedback de estado pressionado e como construir um sistema coerente de cores de estado em toda uma biblioteca de componentes.

Teoria de Cores de Estado: Cinco Sinais Distintos

Cada estado interativo carrega uma mensagem distinta para o usuário. A cor reforça essa mensagem.

Padrão é o estado neutro e não ativado. Ele deve transmitir affordance — a dica visual de que este elemento pode ser interagido. Botões usam fundos preenchidos. Links usam uma cor diferente ou sublinhado. O estado padrão define a linha de base a partir da qual todos os outros estados são percebidos.

Hover é uma prévia. O cursor pousou no elemento, mas nenhuma ação foi tomada. A cor de hover diz: "Você está apontando para algo interativo. Algo acontecerá se você clicar." Deve parecer um ligeiro aquecimento — uma mudança sutil que confirma que o elemento respondeu sem se comprometer com nada.

Foco é um guia de navegação. É inteiramente para usuários de teclado e tecnologia assistiva. O estado de foco diz: "O cursor do teclado está aqui. Você pode ativar isso com Enter ou Espaço." É o estado mais crítico para acessibilidade e o mais comumente corrompido em código de produção.

Ativo é feedback. O elemento foi ativado — o botão foi pressionado, o link está sendo seguido. O estado ativo diz: "Sua ação foi registrada." Deve parecer fisicamente satisfatório, como um botão real afundando sob o seu dedo. Os estados ativos aparecem por apenas uma fração de segundo, mas sua presença (ou ausência) afeta dramaticamente como uma interface parece responsiva.

Desabilitado é uma explicação sem apologia. Diz: "Este elemento normalmente interativo não pode ser usado agora." As cores de desabilitado precisam comunicar indisponibilidade sem desaparecer completamente. Um botão desabilitado que parece idêntico a um não-botão é uma armadilha de confusão.

O princípio central: cada estado deve ser perceptivelmente distinto de cada estado adjacente. Padrão e hover devem diferir. Hover e ativo devem diferir. As diferenças devem ser visíveis, não teóricas.

Hover como Prévia: Técnicas de Deslocamento de Luminosidade

Os estados de hover são mais comumente implementados deslocando a luminosidade — tornando um elemento escuro ligeiramente mais claro, ou um elemento claro ligeiramente mais escuro. A razão pela qual a luminosidade é a dimensão dominante aqui (em vez do matiz ou saturação) é que mudanças de luminosidade são lidas como "a mesma cor, ligeiramente diferente" em vez de "uma cor completamente diferente."

A Regra dos 10% de Luminosidade

Um ponto de partida confiável para estados de hover é um deslocamento de 10% de luminosidade em HSL. Para um botão com fundo #3B82F6 (HSL: 217°, 91%, 60%), um estado de hover em HSL 217°, 91%, 50% dá #2563EB — claramente mais escuro, mas inconfundivelmente o mesmo azul.

:root {
  --btn-primary-bg:       #3B82F6;  /* HSL: 217, 91%, 60% — padrão */
  --btn-primary-hover:    #2563EB;  /* HSL: 217, 91%, 50% — hover  */
  --btn-primary-active:   #1D4ED8;  /* HSL: 217, 91%, 40% — ativo */
}

.btn-primary {
  background-color: var(--btn-primary-bg);
  transition: background-color 120ms ease;
}

.btn-primary:hover {
  background-color: var(--btn-primary-hover);
}

.btn-primary:active {
  background-color: var(--btn-primary-active);
}

A transição de 120ms no hover cria a sensação de "aquecimento". Transições mais longas (200ms+) parecem lentas para hover; transições mais curtas (<80ms) parecem abruptas. Os estados ativos tipicamente não têm transição — a resposta deve parecer instantânea.

Usando o Gerador de Tons para Planejamento de Estado

O Gerador de Tons produz a escala completa de 50 a 950 para qualquer cor de entrada, fornecendo um conjunto pronto de estados. Para um azul primário como #3B82F6 (blue-500 do Tailwind), o mapeamento de estados é:

Dois tons mais escuros para hover, mais um para ativo, dois tons mais claros para desabilitado. Isso fornece um sistema consistente e previsível que cobre cada estado sem exigir seleção manual de cores.

Hover em Superfícies Claras

Botões de cor clara ou branca invertem a lógica. Em vez de escurecer, o hover adiciona um leve tom à superfície. Um botão fantasma (preenchimento transparente, borda colorida) pode receber um preenchimento de fundo de 5% no hover:

.btn-ghost {
  background-color: transparent;
  border: 1.5px solid #3B82F6;
  color: #3B82F6;
}

.btn-ghost:hover {
  background-color: #EFF6FF;  /* blue-50: um sussurro de azul */
}

.btn-ghost:active {
  background-color: #DBEAFE;  /* blue-100: tom ligeiramente mais profundo */
}

#EFF6FF é mal perceptível em um fundo branco — apenas o suficiente para confirmar o hover sem parecer preenchido.

Hover em Links de Texto

Os links de texto apresentam um desafio diferente. A cor padrão é tipicamente o azul primário, e a convenção de hover é frequentemente adicionar ou remover um sublinhado. A cor sozinha não é suficiente — o WCAG 1.4.1 exige que os links sejam distinguíveis do texto circundante por algo além da cor sozinha (em contexto). Dito isso, a mudança de cor no hover ainda é valiosa como sinal de reforço:

a {
  color: #2563EB;
  text-decoration: underline;
}

a:hover {
  color: #1D4ED8;
  text-decoration: none;  /* Remove o sublinhado como mudança secundária */
}

Aqui o hover remove o sublinhado enquanto escurece a cor — dois sinais simultâneos de que algo mudou.

Foco como Guia: Cores Visíveis do Anel de Foco

O anel de foco é o recurso de acessibilidade mais importante no design de cores interativas, e o mais comumente removido. A regra outline: none aparece em milhões de folhas de estilos de produção, removendo o indicador de foco nativo sem substituição. Isso torna a interface completamente operável com o mouse, mas efetivamente inutilizável para usuários de apenas teclado e pessoas usando leitores de tela.

O requisito de acessibilidade é o WCAG 2.4.7 (AA): o foco do teclado deve ser visível. O WCAG 2.4.11 (WCAG 2.2, AA) refina isso para uma razão de contraste mínima de 3:1 entre o indicador de foco e as cores adjacentes.

Padrão Moderno de Anel de Foco

A melhor prática moderna é usar um anel duplo: um anel interno sólido em uma cor contrastante e um gap branco (ou da cor do fundo) entre o elemento e o anel. Isso cria contraste em relação a qualquer cor de fundo em que o elemento está.

:focus-visible {
  outline: 2px solid #2563EB;
  outline-offset: 3px;
}

O outline-offset cria o gap branco puxando o contorno para longe da borda do elemento. O espaço branco entre o elemento e o anel torna o anel legível tanto em fundos escuros quanto claros.

Seleção de Cor do Foco

As cores do anel de foco devem atender a 3:1 de contraste tanto em relação ao fundo do elemento quanto ao fundo da página. Para um botão escuro com uma página clara, um azul médio como #3B82F6 atinge 3:1 em relação ao branco (#FFFFFF) — verifique qualquer combinação com o Verificador de Contraste.

Um padrão comum é combinar a cor do foco com o primário da marca, para que os anéis de foco pareçam parte do design system em vez de artefatos do navegador:

:root {
  --focus-ring-color: #2563EB;
  --focus-ring-offset: 3px;
  --focus-ring-width: 2px;
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: inherit;  /* Corresponde ao raio de borda do elemento */
}

Foco em Fundos Escuros

Em fundos escuros, o típico anel de foco azul pode se tornar invisível. Use uma cor de foco mais clara ou mude para branco:

/* Sobreposição de superfície escura */
.surface-dark :focus-visible {
  outline-color: #93C5FD;  /* blue-300: azul mais claro visível no escuro */
}

Para fundos muito escuros onde até o azul desaparece, um anel de foco branco com uma sombra interna escura fina funciona de forma confiável:

:focus-visible {
  outline: 2px solid #FFFFFF;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.5);
}

O anel branco externo é sempre visível em fundos escuros, enquanto a sombra escura evita que ele desapareça em fundos claros.

Usando :focus-visible em Vez de :focus

:focus-visible é o seletor moderno que mostra o anel de foco apenas quando o foco chegou via teclado, não via clique do mouse. Usar :focus mostra o anel no clique do mouse também, o que muitos usuários de mouse com visão acham desconcertante. :focus-visible é o seletor correto para componentes de UI:

/* Correto: mostra apenas para navegação por teclado */
:focus-visible { outline: 2px solid #2563EB; }

/* Incorreto: mostra em cada clique também */
:focus { outline: 2px solid #2563EB; }

O suporte a :focus-visible é universal nos navegadores atuais. O polyfill não é mais necessário para produção.

Ativo como Feedback: Cores do Estado Pressionado

O estado ativo dispara quando o elemento está sendo pressionado — :active em CSS, ou durante o evento mousedown/touchstart. Dura apenas enquanto dura o próprio pressionamento, que num toque é tipicamente 50–150ms. Apesar de sua brevidade, o estado ativo tem um efeito desproporcional na responsividade percebida.

A Pilha de Três Passos

Para botões, a abordagem padrão é uma pilha de cores de três passos: padrão → hover → ativo, com cada passo dois tons mais profundos que o anterior:

.btn {
  background-color: #3B82F6;  /* Padrão */
}

.btn:hover {
  background-color: #2563EB;  /* −1 tom */
}

.btn:active {
  background-color: #1D4ED8;  /* −2 tons */
}

#1D4ED8 (blue-700) versus o padrão #3B82F6 (blue-500) é uma diferença significativa — que é lida claramente mesmo numa interação de toque rápida.

Transform + Cor para Sensação Física

Os estados ativos em botões frequentemente combinam um deslocamento de cor com uma transformação para baixo para simular um pressionamento físico:

.btn:active {
  background-color: #1D4ED8;
  transform: translateY(1px);
}

O deslocamento de 1px para baixo combinado com a cor mais escura cria um efeito convincente de "pressionado". Mantenha o transform sutil — de 1px a 2px no máximo. Deslocamentos maiores parecem caricatos em vez de táteis.

Estados Ativos em Botões de Ícone

Botões de ícone (sem rótulo de texto, apenas um ícone) frequentemente usam um preenchimento de fundo para hover e um preenchimento mais profundo para ativo, em vez de mudar a cor do próprio ícone:

.icon-btn {
  color: #6B7280;       /* Ícone cinza */
  border-radius: 8px;
}

.icon-btn:hover {
  background-color: #F3F4F6;  /* Tom cinza sutil */
  color: #374151;
}

.icon-btn:active {
  background-color: #E5E7EB;  /* Tom cinza mais profundo */
  color: #111827;
}

Essa abordagem se adapta bem ao modo escuro: o preenchimento de hover se torna uma superfície escura mais clara em vez de um tom cinza.

Estados de Carregamento e Processamento

Um estado relacionado é o estado de carregamento — o elemento foi ativado e está aguardando uma resposta. Tradicionalmente tratado com uma sobreposição de spinner, os estados de carregamento também podem ser comunicados através da cor:

.btn[aria-busy="true"] {
  background-color: #60A5FA;   /* Azul mais claro — parcialmente dessaturado */
  opacity: 0.8;
  cursor: not-allowed;
  pointer-events: none;
}

#60A5FA (blue-400) é mais claro e ligeiramente menos saturado que o azul ativo, o que é lido como "processando" em vez de "pronto." Combinar isso com aria-busy="true" garante que os leitores de tela também anunciem a mudança de estado.

Estado Desabilitado: Indisponível Sem Desaparecer

Os elementos desabilitados devem comunicar duas coisas simultaneamente: que um elemento existe e é normalmente interativo, e que ele não pode ser usado agora. O modo de falha é fazer o desabilitado parecer idêntico ao conteúdo não interativo, deixando os usuários incertos sobre o que pode ser clicado.

.btn:disabled,
.btn[aria-disabled="true"] {
  background-color: #93C5FD;  /* blue-300: primário desbotado */
  color: #FFFFFF;
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

#93C5FD mantém a identidade de matiz do botão (ainda é "o botão azul") enquanto comunica claramente a indisponibilidade através de saturação e luminosidade reduzidas. Combinar com opacity: 0.6 adiciona uma segunda dimensão de suavidade visual.

Importante: pointer-events: none evita que estados de hover sejam acionados, o que seria confuso em um elemento desabilitado. Se você precisar de um tooltip no hover explicando por que o elemento está desabilitado, mantenha pointer-events: auto e substitua apenas o cursor.

Construindo um Sistema Coerente de Cores de Estado

Componentes individuais são gerenciáveis. Uma biblioteca de componentes com 50 tipos de elementos interativos — botões, entradas, selects, checkboxes, links, abas, acordeões, cartões — requer um sistema.

A chave é definir cores de estado uma vez no nível de token e aplicá-las consistentemente em todos os componentes:

:root {
  /* Primário da marca — escala completa */
  --color-primary-100: #DBEAFE;
  --color-primary-200: #BFDBFE;
  --color-primary-300: #93C5FD;
  --color-primary-400: #60A5FA;
  --color-primary-500: #3B82F6;
  --color-primary-600: #2563EB;
  --color-primary-700: #1D4ED8;
  --color-primary-800: #1E40AF;
  --color-primary-900: #1E3A8A;

  /* Tokens de estado semânticos */
  --state-default:   var(--color-primary-500);
  --state-hover:     var(--color-primary-600);
  --state-active:    var(--color-primary-700);
  --state-focus:     var(--color-primary-600);
  --state-disabled:  var(--color-primary-300);

  /* Anel de foco */
  --focus-ring-color:  var(--color-primary-600);
  --focus-ring-offset: 3px;

  /* Estados de superfície (para botões de ícone, linhas, cartões) */
  --state-surface-hover:  #F3F4F6;
  --state-surface-active: #E5E7EB;
}

Com esse sistema de tokens, mudar todo o sistema de cores interativas de um aplicativo é uma questão de atualizar os valores --color-primary-*. Todos os componentes que consomem os tokens semânticos são atualizados automaticamente.

Tokens de Estado para Diferentes Tipos de Componentes

Nem todos os componentes usam o mesmo esquema de cores de estado. Agrupe-os por seus padrões visuais:

A coluna de anel de foco é a mesma em todas as linhas — o tratamento de foco universal é um sinal de consistência que os usuários aprendem a reconhecer.

Testando a Completude do Estado

Antes de publicar qualquer componente, execute-o por esta lista de verificação mental:

• Posso ver a mudança do estado de hover sem procurar por ela?
• Posso ver o anel de foco quando dou Tab para este elemento num navegador?
• O estado ativo pisca visivelmente durante um clique?
• O estado desabilitado parece diferente tanto do padrão quanto do conteúdo circundante?
• Cada estado atende aos requisitos de contraste WCAG (4,5:1 para texto, 3:1 para componentes de UI)?

O Verificador de Contraste lida com o último ponto — cole qualquer par de texto/fundo e verifique a conformidade com WCAG AA e AAA.

As cores de estado são a pontuação do design de interação. Elas não são a história principal, mas sem elas, a interação parece desestruturada e não responsiva. Invista em uma abordagem sistemática uma vez, e cada componente que você construir depois se beneficia automaticamente disso.