NOTA: Alguns dos exemplos interativos podem usar CSS que você ainda não aprendeu. Não se preocupe em tentar entender todo o código. O objetivo dos exemplos é mostrar prévias desses conceitos de design para que você entenda melhor como as coisas funcionam. Primeiro, você pode precisar se familiarizar com contraste. Contraste é a diferença entre duas cores - ou o quão fácil é distingui-las. Cores com maior contraste serão mais visualmente distintas, enquanto cores com menor contraste serão mais visualmente semelhantes. Por exemplo, preto e branco têm uma relação de contraste muito alta. Enquanto o azul claro e o roxo claro têm menos contraste.

<style>
  .example {
    padding: 20px;
    margin-bottom: 20px;
    font-size: 18px;
    font-family: sans-serif;
  }

  .high-contrast {
    background-color: black;
    color: white;
  }

  .low-contrast {
    background-color: #add8e6; 
    color: #dda0dd; 
  }

  .label {
    font-weight: bold;
    margin-bottom: 5px;
  }
</style>

<div class="example high-contrast">
  <div class="label">High Contrast</div>
  This text has high contrast (black background and white text).
</div>

<div class="example low-contrast">
  <div class="label">Low Contrast</div>
  This text has low contrast (light blue background and light purple text).
</div>

Claro, nesses exemplos a distinção pode ficar mais clara por causa do layout. Mas e quanto a aplicar essas cores ao texto? Você pode ter o texto preto de alto contraste em um fundo branco. E o texto roxo de baixo contraste em um fundo azul.

<style>
  .text-example {
    padding: 10px;
    margin-bottom: 20px;
    font-size: 18px;
    font-family: sans-serif;
  }

  .text-high-contrast {
    background-color: white;
    color: black;
  }

  .text-low-contrast {
    background-color: #add8e6; 
    color: #dda0dd; 
  }

  .label {
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
  }
</style>

<div class="text-example text-high-contrast">
  <span class="label">High Contrast Text</span>
  This is high contrast text: black text on a white background.
</div>

<div class="text-example text-low-contrast">
  <span class="label">Low Contrast Text</span>
  This is low contrast text: purple text on a light blue background.
</div>

Mas como você determina o que é um contraste "bom o suficiente"? Você não pode basear isso apenas em como o texto parece para você, pois cada usuário terá uma experiência diferente. Felizmente, as Diretrizes de Acessibilidade para Conteúdo Web, ou WCAG, fornecem um padrão para isso. Texto com uma proporção de contraste de 4.5:1 é considerado o padrão AA, que é o mínimo necessário que você deve seguir para ser acessível para a maioria dos usuários. Texto com uma relação de contraste de 7:1 é considerado o padrão AAA e garante o melhor nível de acessibilidade.

<style>
  .contrast-example {
    padding: 15px;
    margin-bottom: 20px;
    font-size: 18px;
    font-family: sans-serif;
  }

  .aa-contrast {
    background-color: #ffffff; 
    color: #4b4b4b; 
  }

  .aaa-contrast {
    background-color: #ffffff; 
    color: #1a1a1a; 
  }

  .label {
    font-weight: bold;
    margin-bottom: 8px;
    display: block;
  }
</style>

<div class="contrast-example aa-contrast">
  <span class="label">AA Standard (Contrast Ratio ~4.5:1)</span>
  This text meets the minimum accessibility standard for contrast.
</div>

<div class="contrast-example aaa-contrast">
  <span class="label">AAA Standard (Contrast Ratio ~7:1)</span>
  This text meets the highest accessibility standard for contrast.
</div>

Existem vários sites que podem verificar a relação de contraste entre duas cores, mas a maioria dos navegadores permite que você faça isso diretamente nas ferramentas de desenvolvedor do seu site. Vamos dar uma olhada em mais alguns exemplos de contrast ratio para entender melhor o conceito. Aqui está um exemplo de texto preto em um fundo branco que tem uma relação de contraste de 21:1.

<style>
  .contrast-21 {
    background-color: white;
    color: black;
    padding: 15px;
    font-family: sans-serif;
    font-size: 18px;
    margin-bottom: 20px;
  }

  .label {
    font-weight: bold;
    margin-bottom: 8px;
    display: block;
  }
</style>

<div class="contrast-21">
  <span class="label">Contrast Ratio 21:1</span>
  This is black text on a white background, which has the highest contrast ratio of 21:1.
</div>

Este exemplo atende mais do que o padrão AAA. Agora, vamos dar uma olhada no texto roxo em um fundo azul.

<style>
  .contrast-21 {
    background-color: white;
    color: black;
    padding: 15px;
    font-family: sans-serif;
    font-size: 18px;
    margin-bottom: 20px;
  }

  .label {
    font-weight: bold;
    margin-bottom: 8px;
    display: block;
  }

  .purple-on-blue {
    background-color: #0000cc;
    color: #800080; 
    padding: 15px;
    font-family: sans-serif;
    font-size: 18px;
    margin-bottom: 20px;
  }
</style>

<div class="contrast-21">
  <span class="label">Contrast Ratio 21:1</span>
  This example more than meets the AAA standard with black text on white background.
</div>

<div class="purple-on-blue">
  <span class="label">Purple on Blue (Lower Contrast)</span>
  This doesn't meet the AA standard.
</div>

Este exemplo tem uma relação de contraste de 1.48:1 que nem sequer atende ao padrão AA. Como você pode corrigir isso? Bem, há três aspectos que impactam a relação de contraste. O primeiro é o matiz, que representa o tipo geral de cor, como vermelho, azul e laranja. Vamos mudar para um matiz que esteja mais distante do azul. Neste caso, vamos usar vermelho.

<style>
  .contrast-21 {
    background-color: white;
    color: black;
    padding: 15px;
    font-family: sans-serif;
    font-size: 18px;
    margin-bottom: 20px;
  }

  .label {
    font-weight: bold;
    margin-bottom: 8px;
    display: block;
  }

  .red-on-blue {
    background-color: #0000cc; 
    color: #ff0000; 
    padding: 15px;
    font-family: sans-serif;
    font-size: 18px;
    margin-bottom: 20px;
  }
</style>

<div class="contrast-21">
  <span class="label">Contrast Ratio 21:1</span>
  This example more than meets the AAA standard with black text on white background.
</div>

<div class="red-on-blue">
  <span class="label">Red on Blue (Higher Contrast Hue Shift)</span>
  This doesn't meet accessibility standards.
</div>

Infelizmente, essa alteração trouxe a relação de contraste apenas para 1,49:1, o que significa que você precisa alterar a saturação ou a "quantidade" de cor presente. Vamos aumentar a quantidade de vermelho no texto. Isso nos aproxima muito mais do objetivo, com uma relação de contraste de 3,54:1.

<style>
  .contrast-21 {
    background-color: white;
    color: black;
    padding: 15px;
    font-family: sans-serif;
    font-size: 18px;
    margin-bottom: 20px;
  }

  .label {
    font-weight: bold;
    margin-bottom: 8px;
    display: block;
  }

  .low-sat-red-on-blue {
    background-color: #0000cc; 
    color: #b23333; 
    padding: 15px;
    font-family: sans-serif;
    font-size: 18px;
    margin-bottom: 20px;
  }

  .high-sat-red-on-blue {
    background-color: #0000cc; 
    color: #ff4d4d;
    padding: 15px;
    font-family: sans-serif;
    font-size: 18px;
    margin-bottom: 20px;
  }
</style>

<div class="contrast-21">
  <span class="label">Contrast Ratio 21:1</span>
  This example more than meets the AAA standard with black text on white background.
</div>

<div class="low-sat-red-on-blue">
  <span class="label">Low Saturation Red on Blue (Contrast ~1.49:1)</span>
  This red has low saturation, resulting in a poor contrast ratio.
</div>

<div class="high-sat-red-on-blue">
  <span class="label">Higher Saturation Red on Blue (Contrast ~3.54:1)</span>
  Increasing the saturation of red improves contrast but it’s still below AA standard.
</div>

No entanto, você pode potencialmente chegar ainda mais perto alterando o último valor, que é lightness. A claridade representa a quantidade de branco presente na cor. Vamos diminuir a luminosidade do vermelho. Agora há um vermelho muito mais escuro contra o fundo azul claro, o que traz a relação de contraste para 10,34:1.

<style>
  .contrast-21 {
    background-color: white;
    color: black;
    padding: 15px;
    font-family: sans-serif;
    font-size: 18px;
    margin-bottom: 20px;
  }

  .label {
    font-weight: bold;
    margin-bottom: 8px;
    display: block;
  }

  .blue-bg {
    background-color: #add8e6; 
    padding: 15px;
    font-family: sans-serif;
    font-size: 18px;
    margin-bottom: 20px;
  }

  .low-sat-red-on-blue {
    background-color: #0000cc; 
    color: #b23333;
    margin-bottom: 20px;
  }

  .high-sat-red-on-blue {
    background-color: #0000cc; 
    color: #ff4d4d; 
    margin-bottom: 20px;
  }
  
  .dark-red-on-light-blue {
    background-color: #add8e6; 
    color: #8b0000;
  }
</style>

<div class="contrast-21">
  <span class="label">Contrast Ratio 21:1</span>
  This example more than meets the AAA standard with black text on white background.
</div>

<div class="low-sat-red-on-blue blue-bg">
  <span class="label">Low Saturation Red on Medium Blue (Contrast ~1.49:1)</span>
  This red has low saturation, resulting in a poor contrast ratio.
</div>

<div class="high-sat-red-on-blue blue-bg">
  <span class="label">Higher Saturation Red on Medium Blue (Contrast ~3.54:1)</span>
  Increasing the saturation of red improves contrast but it’s still below AA standard.
</div>

<div class="dark-red-on-light-blue">
  <span class="label">Darker Red on Light Blue (Contrast ~10.34:1)</span>
  Decreasing the lightness of the red increases the contrast ratio significantly.
</div>

Você pode continuar ajustando as cores para encontrar o equilíbrio entre o efeito visual que deseja e uma relação de contraste acessível. Mas é importante lembrar que a acessibilidade deve sempre ter precedência.