Web para Todos
Seção 4

Apresentação/Design

Contraste de cores, não dependência de cor, redimensionamento de texto, adaptação de espaçamento, foco visível e ausência de imagens de texto.

1. Marcação2. Comportamento3. Conteúdo/Informação4. Apresentação/Design5. Multimídia6. Formulário
4.1

Oferecer contraste mínimo entre plano de fundo e primeiro plano

WCAG AA

Texto deve ter contraste mínimo de 4,5:1 contra o fundo (3:1 para texto grande — acima de 18pt normal ou 14pt negrito). Componentes de interface precisam de 3:1.

WCAG 1.4.3WCAG 1.4.11
Incorreto
/* ❌ Contraste insuficiente */
/* Texto cinza claro sobre branco: ~2.9:1 */
.legenda { color: #999999; background: #ffffff; }

/* Placeholder de input: ~1.9:1 */
input::placeholder { color: #cccccc; }

/* Link sobre fundo azul claro: ~2.1:1 */
.link-card { color: #0066cc; background: #e8f4ff; }
Correto
/* ✓ Contraste AAA/AA conforme */
/* Texto: 7:1 (AAA) */
.legenda { color: #595959; background: #ffffff; }

/* Placeholder: 4.6:1 (AA) */
input::placeholder { color: #767676; }

/* Link: 4.8:1 (AA) */
.link-card { color: #0048B6; background: #f0f7ff; }

/* Botão primário: 4.9:1 */
.btn-primary {
  color: #ffffff;
  background: #0048B6; /* branco sobre azul */
}
Dica

Use o WebAIM Contrast Checker (webaim.org/resources/contrastchecker) ou a extensão Colour Contrast Analyser da TPGi. Texto decorativo e logotipos estão isentos. Teste estados hover/focus também.

4.2

Não utilizar apenas cor ou outra característica sensorial para diferenciar elementos

WCAG A

Ver recomendação 1.12 e 3.6. A cor não pode ser o único indicador de estado, categoria ou ação em nenhum componente de interface.

WCAG 1.3.3WCAG 1.4.1
Incorreto
<!-- ❌ Estado diferenciado apenas por cor -->
<ul class="status-pedidos">
  <li style="color:green">Pedido 001</li>
  <li style="color:orange">Pedido 002</li>
  <li style="color:red">Pedido 003</li>
</ul>
Correto
<!-- ✓ Estado com cor + ícone + texto -->
<ul class="status-pedidos">
  <li>
    <span class="badge badge-aprovado">
      <svg aria-hidden="true"><!-- check --></svg>
      Aprovado
    </span>
    Pedido 001
  </li>
  <li>
    <span class="badge badge-pendente">
      <svg aria-hidden="true"><!-- clock --></svg>
      Pendente
    </span>
    Pedido 002
  </li>
  <li>
    <span class="badge badge-cancelado">
      <svg aria-hidden="true"><!-- x --></svg>
      Cancelado
    </span>
    Pedido 003
  </li>
</ul>
Dica

Combine cor com ícone E texto para transmitir estado. Nunca dependa apenas de cor — cerca de 8% dos homens têm alguma forma de daltonismo.

4.3

Permitir redimensionamento do texto sem perda de funcionalidade

WCAG AA

O usuário deve poder aumentar o tamanho do texto em até 200% sem que conteúdo ou funcionalidade seja perdida. Isso inclui texto em campos de formulário, botões e legendas.

WCAG 1.4.4
Incorreto
/* ❌ Tamanho fixo que bloqueia redimensionamento */
.container {
  width: 800px;
  height: 600px;
  overflow: hidden; /* esconde conteúdo ao ampliar */
}
.btn {
  height: 32px;
  overflow: hidden; /* texto cortado ao ampliar */
}
Correto
/* ✓ Layout fluido que se adapta ao zoom */
.container {
  max-width: 80rem;
  width: 100%;
  /* sem height fixa */
}
.btn {
  padding: 0.5rem 1rem;
  min-height: 2.75rem; /* cresce com o conteúdo */
  line-height: 1.4;
}
/* Teste: Ctrl+= no navegador até 200% */
Dica

Teste com zoom de texto do navegador (Ctrl/Cmd + "+" ou Firefox: View > Zoom > Zoom Text Only). Evite overflow: hidden em contêineres que contêm texto.

4.4

Possibilitar adaptação de espaçamento e layout

WCAG AA

O conteúdo não deve perder informação ou funcionalidade quando o usuário ajusta espaçamento de texto: altura de linha ≥1.5×, espaçamento entre letras ≥0.12em, palavras ≥0.16em, parágrafos ≥2em.

WCAG 1.4.12
Incorreto
/* ❌ Altura fixa que corta texto com espaçamento maior */
.card {
  height: 80px;
  overflow: hidden;
}
p {
  line-height: 1; /* muito comprimido */
  letter-spacing: -0.05em; /* comprime texto */
}
Correto
/* ✓ Layout adaptável ao espaçamento do usuário */
.card {
  min-height: 5rem; /* cresce conforme necessário */
  /* sem overflow: hidden em conteúdo de texto */
}
p {
  line-height: 1.5; /* respeita preferências */
  letter-spacing: normal; /* não comprimir */
}
/* Não usar !important para sobrescrever espaçamento */
Dica

Use o bookmarklet "Text Spacing" da WCAG (stevefaulkner.github.io/text-spacing-bookmarklet) para testar este critério rapidamente.

4.5

Assegurar que os elementos com foco sejam sempre visíveis

WCAG AA

Ver recomendação 2.8. O indicador de foco deve ser visível em todos os estados interativos e não deve ser sobrescrito por CSS sem alternativa equivalente.

WCAG 2.4.7WCAG 2.4.11
Incorreto
/* ❌ Foco removido — violação grave */
:focus { outline: none; }
a:focus, button:focus {
  box-shadow: none !important;
}
Correto
/* ✓ Indicador de foco personalizado mas visível */
:focus-visible {
  outline: 3px solid #0048B6;
  outline-offset: 3px;
  border-radius: 3px;
}

/* Variações por contexto */
.btn-primary:focus-visible {
  outline-color: #ffffff;
  box-shadow: 0 0 0 4px #0048B6,
              0 0 0 6px #ffffff;
}

.card:focus-within {
  box-shadow: 0 0 0 2px #0048B6;
}
Dica

O WCAG 2.2 introduziu o critério 2.4.11 (Focus Appearance) com requisitos mais específicos de tamanho e contraste do indicador de foco. A ferramenta verifica a ausência do outline.

4.6

Não usar imagens de texto

WCAG AA

Texto deve ser renderizado como texto real via HTML/CSS, não como imagem. Imagens de texto não são redimensionáveis, não são lidas por leitores de tela sem alt, e se degradam em zoom.

WCAG 1.4.5
Incorreto
<!-- ❌ Texto como imagem -->
<img src="titulo-bem-vindo.png"
  alt="Bem-vindo ao Portal do Estado">
<img src="banner-servicos.png"
  alt="Conheça nossos serviços">
Correto
<!-- ✓ Texto real com CSS expressivo -->
<h1 class="titulo-destaque">
  Bem-vindo ao Portal do Estado
</h1>
<p class="chamada-servicos">
  Conheça nossos serviços
</p>

/* CSS — mesma expressividade sem imagem */
.titulo-destaque {
  font-family: 'Atkinson Hyperlegible', sans-serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  color: #0048B6;
}
Dica

A única exceção permitida é quando a representação gráfica específica é essencial para o conteúdo (ex.: amostra de uma fonte específica, logotipo). Use fontes web (Google Fonts, etc.) ao invés de imagens de texto.

Seção anterior
3. Conteúdo/Informação
Próxima seção
5. Multimídia
Ver todas as seções do eMAG 3.1