Opacidade

O quanto um elemento deixa ver o que está atrás dele, indo do totalmente sólido ao totalmente transparente.

Hard

O que é

Opacidade é a propriedade que mede o quanto um elemento é sólido ou transparente, numa escala que vai de 0%, quando ele é invisível, até 100%, quando é totalmente opaco. É ela que governa o que aparece, o que recua e o que ganha peso na tela, porque um elemento sólido chama atenção enquanto um transparente tende a sumir no fundo.

Na interface, a opacidade ajuda muito a montar hierarquia e profundidade. Quando você escurece a página por trás de um modal, por exemplo, mantém o contexto visível sem deixar que ele compita com a tarefa, e da mesma forma, reduzir a opacidade de um controle secundário é uma maneira de deixar o botão principal respirar e se destacar.

O cuidado central aqui é com a legibilidade, porque transparência demais no texto derruba o contraste e prejudica a acessibilidade, então é um recurso pra usar com critério. Vale lembrar ainda que a opacidade funciona como sinal de estado, já que um botão a 50% costuma comunicar que está indisponível.

Em uma frase

Vamos baixar a opacidade do fundo pra 40% quando o modal abrir, pra destacar a tarefa.

A pergunta que ele responde

Como uso transparência pra criar profundidade e foco sem prejudicar a leitura?

Quando usar

Faz sentido quando você quer criar camadas e profundidade, dar foco a um elemento ou comunicar sinais de estado, como ativo, desativado e hover.

Como não usar

O caminho a evitar é baixar tanto a opacidade do texto que o contraste quebra e a leitura fica difícil, o que pesa especialmente pra quem tem baixa visão.

Na prática

Pense num time que, ao abrir um modal, joga a página de trás pra 40% de opacidade. Com isso, a atenção se concentra na tarefa atual sem que a pessoa perca a noção de onde estava.

Não confunda com

Vale separar opacidade de cor de fundo, porque a opacidade mexe na transparência do elemento inteiro, enquanto a cor define apenas o tom dele. E também ajuda diferenciar opacidade de sombra, porque a sombra cria profundidade pela simulação de luz, e não pela transparência.

D

Em inglês

Opacity

Pronúncia

n/a

Também chamado de

transparência, opacity

Origem

n/a

Fonte

Saiba mais

Material Design, documentação sobre elevação e estados