contraste()

A função de filtro CSS contrast() aumenta ou diminui o contraste de um elemento, fazendo com que as cores se destaquem mais ou tornando-as cinza. Ao contrário de outras funções filter como brightness() ou ###CODE_2420e426ebf292 827805dbf09009b6b4###, contrast() afeta saturação e luminosidade, mantendo apenas a tonalidade da cor.

.low {
  filter: contrast(50%);
}

.normal {
  filter: contrast(100%);
}

.high {
  filter: contrast(200%);
}

A função contrast() é definida na especificação  Módulo de efeitos de filtro nível 1  .

Sintaxe

A sintaxe oficial para a função contrast() é:

<contrast()> = contrast( [ <number> | <percentage> ]? )

Ou simplesmente:

filter: contrast(<amount>);

A função contrast() é compatível apenas com o CSS filter e <contrast()> = contrast( [ <number> | <percentage> ]? ) propriedades.

Argumentos

/* Using percentages */
filter: contrast(0%); /* Totally grayed out */
filter: contrast(50%); /* Partially grayed out */
filter: contrast(100%); /* No change */
filter: contrast(150%); /* Element is 1.5 times more defined */

/* Using numbers (0–1 range) */
filter: contrast(0); /* Totally grayed out */
filter: contrast(0.5); /* Partially grayed out */
filter: contrast(1); /* No change */
filter: contrast(1.5); /* Element is 1.5 times more defined */

/* Using percentages */
filter: contrast(0%); /* Totally grayed out */
filter: contrast(50%); /* Partially grayed out */
filter: contrast(100%); /* No change */
filter: contrast(150%); /* Element is 1.5 times more defined */

/* Using numbers (0–1 range) */
filter: contrast(0); /* Totally grayed out */
filter: contrast(0.5); /* Partially grayed out */
filter: contrast(1); /* No change */
filter: contrast(1.5); /* Element is 1.5 times more defined */

/* Works with CSS variables */
--amount: 200%;
filter: contrast(--amount);

/* No argument */
filter: contrast(); /* No change */

/* Negative value */
filter: contrast(-1.5); /* No effect */
filter: contrast(--amount);

/* No argument */
filter: contrast(); /* No change */

/* Negative value */
filter: contrast(-1.5); /* No effect */

A função contrast() recebe um único argumento, que pode ser um valor decimal positivo ou percentual. O argumento determina o novo contraste para o elemento, onde:

• contrast() ou filter seca todo o contraste do elemento, resultando em uma imagem completamente cinza.
• backdrop-filter ou /* Using percentages */
  filter: contrast(0%); /* Totally grayed out */
  filter: contrast(50%); /* Partially grayed out */
  filter: contrast(100%); /* No change */
  filter: contrast(150%); /* Element is 1.5 times more defined */

  /* Using numbers (0–1 range) */
  filter: contrast(0); /* Totally grayed out */
  filter: contrast(0.5); /* Partially grayed out */
  filter: contrast(1); /* No change */
  filter: contrast(1.5); /* Element is 1.5 times more defined */

  /* Using percentages */
  filter: contrast(0%); /* Totally grayed out */
  filter: contrast(50%); /* Partially grayed out */
  filter: contrast(100%); /* No change */
  filter: contrast(150%); /* Element is 1.5 times more defined */

  /* Using numbers (0–1 range) */
  filter: contrast(0); /* Totally grayed out */
  filter: contrast(0.5); /* Partially grayed out */
  filter: contrast(1); /* No change */
  filter: contrast(1.5); /* Element is 1.5 times more defined */

  /* Works with CSS variables */
  --amount: 200%;
  filter: contrast(--amount);

  /* No argument */
  filter: contrast(); /* No change */

  /* Negative value */
  filter: contrast(-1.5); /* No effect */
  filter: contrast(--amount);

  /* No argument */
  filter: contrast(); /* No change */

  /* Negative value */
filter: contrast(-1.5); /* No effect */ deixa o elemento completamente inalterado.

• Valores acima backdrop-filter ou /* Using percentages */
  filter: contrast(0%); /* Totally grayed out */
  filter: contrast(50%); /* Partially grayed out */
  filter: contrast(100%); /* No change */
  filter: contrast(150%); /* Element is 1.5 times more defined */

  /* Using numbers (0–1 range) */
  filter: contrast(0); /* Totally grayed out */
  filter: contrast(0.5); /* Partially grayed out */
  filter: contrast(1); /* No change */
  filter: contrast(1.5); /* Element is 1.5 times more defined */

  /* Using percentages */
  filter: contrast(0%); /* Totally grayed out */
  filter: contrast(50%); /* Partially grayed out */
  filter: contrast(100%); /* No change */
  filter: contrast(150%); /* Element is 1.5 times more defined */

  /* Using numbers (0–1 range) */
  filter: contrast(0); /* Totally grayed out */
  filter: contrast(0.5); /* Partially grayed out */
  filter: contrast(1); /* No change */
  filter: contrast(1.5); /* Element is 1.5 times more defined */

  /* Works with CSS variables */
  --amount: 200%;
  filter: contrast(--amount);

  /* No argument */
  filter: contrast(); /* No change */

  /* Negative value */
  filter: contrast(-1.5); /* No effect */
  filter: contrast(--amount);

  /* No argument */
  filter: contrast(); /* No change */

  /* Negative value */
filter: contrast(-1.5); /* No effect */ aumentam o contraste linearmente.

Valores negativos não são permitidos. Mas as variáveis CSS são:

.element {
  --filter-amount: 150%;
  filter: contrast(var(--filter-amount));
}

Como contrast() afeta a cor

Assim como outras funções de filtro, o filtro contrast() opera exclusivamente com matemática RGB. Especificamente, dado um 100% ele multiplica cada canal RGB por esse 100% e então adiciona 100% ao resultado. Na prática, isso afeta as cores de duas maneiras:

• Alto contraste (maior que backdrop-filter) faz com que os pixels claros fiquem mais claros e os escuros mais escuros, tornando as cores mais vivas.
• Baixo contraste (menor que backdrop-filter) puxa todos os pixels para um cinza médio. Isso reduz a diferença entre as áreas claras e escuras, fazendo com que a imagem pareça plana e sem som.

Uso básico

Algumas imagens de fundo, geralmente em seções principais ou carrosséis, podem dificultar a leitura do texto em primeiro plano. Principalmente se tiver cores muito claras e escuras, que competem com qualquer cor de texto. Para resolver isso, podemos usar contrast() para reduzir a diferença entre os brancos e os pretos da imagem, tornando o texto mais legível em relação a toda a imagem.

img {
    filter: contrast(70%) brightness(60%);
}

O baixo contraste nivela a imagem e, como vantagem, também podemos reduzir o brilho da imagem para fazer o texto se destacar independentemente de suas cores.

Demonstração: fazendo imagens de cartões de produtos aparecerem ao passar o mouse

Outra aplicação útil para contrast() é destacar uma imagem na interação de um usuário. Por exemplo, em uma linha de cartões de imagem, poderíamos aumentar o contraste da imagem e também dimensioná-la ao passar o mouse

.card img {
  transition:
    filter 0.4s ease,
    transform 0.4s ease;
}

.card:hover img {
  filter: contrast(125%);
  transform: scale(1.05);
}

contrast() é o mesmo que <amount>?

Embora ambas as funções CSS tenham nomes semelhantes, elas não devem ser confundidas uma com a outra.

• contrast() é uma função de filtro que torna um elemento mais vívido tornando os brancos mais claros e os pretos mais escuros.
• <amount>  retorna a cor do texto com maior contraste para um fundo sólido. A cor resultante é branca ou preta, dependendo da cor que mais contrasta com o fundo. Também não é uma função de filtro.

Suporte ao navegador

A função contrast() é atualmente compatível com todos os navegadores modernos.

contrast() originalmente escrito à mão e publicado com amor em CSS-Tricks . Você realmente deveria receber o boletim informativo também.