Verificador de Contraste

Introduza uma cor de texto e de fundo para ver a proporção de contraste WCAG e quais os níveis AA e AAA aprovados.

—Proporção de contraste
Texto normalAA4.5:1—
Texto normalAAA7:1—
Texto grandeAA3:1—
Texto grandeAAA4.5:1—
Interface e gráficos3:1—
Introduza uma cor de texto e de fundo para verificar.

Cada verificação é executada no seu navegador. Nada do que introduzir é carregado para o BroBroGo.

Perguntas Frequentes

O que significam os resultados AA e AAA?

AA é o nível que a maioria dos sites procura: exige uma proporção de pelo menos 4,5:1 para texto normal e 3:1 para texto grande. O nível AAA é mais rigoroso — 7:1 para texto normal e 4,5:1 para texto grande. A proporção vai de 1:1 (sem contraste) até 21:1 (preto no branco).

O que é considerado um texto grande?

Textos a partir de 18pt (cerca de 24px), ou 14pt (cerca de 18,5px) quando em negrito. Textos maiores continuam legíveis com menor contraste, pelo que passam no nível AA com 3:1 e no AAA com 4,5:1, em vez dos limites mais rígidos para texto normal.

Quais formatos de cor posso introduzir?

Introduza um valor hexadecimal como #1a1a1a, um valor rgb() como rgb(26, 26, 26) ou um valor hsl() — ou clique em qualquer uma das amostras para escolher uma cor. Utilize o botão de inversão para trocar as cores do texto e do fundo.

Este teste utiliza o WCAG 2 ou o novo método APCA?

Utiliza a fórmula do WCAG 2.1 / 2.2, que é a referência atual para regras e auditorias de acessibilidade. O APCA é um método mais recente e baseado na perceção visual que ainda está a ser elaborado para o WCAG 3 — é promissor, mas ainda não é um padrão de conformidade oficial, pelo que os resultados de aprovação aqui não o utilizam.

Escrito e revisto pela equipa editorial do BroBroGo.Última atualização:

Como funciona o Verificador de Contraste

Esta ferramenta permite introduzir uma cor de texto e uma cor de fundo para determinar a sua proporção de contraste de acordo com as normas WCAG 2.1 / 2.2. Após a introdução dos dados, a ferramenta mostra quais os níveis de acessibilidade (AA e AAA) que a combinação de cores aprova para texto normal, texto grande e componentes de interface.

O funcionamento baseia-se em valores iniciais predefinidos: a cor de texto inicial é #4f46e5 e a cor de fundo inicial é #ffffff, o que resulta numa proporção de contraste de 6.29. Para facilitar a manipulação dos valores, o utilizador pode usar o botão de inversão para trocar as cores do texto e do fundo.

Dados de entrada aceites pela ferramenta

Para realizar a verificação, a ferramenta requer a definição de dois campos específicos:

  • Cor do texto: Um valor de cor que pode ser introduzido em formato hexadecimal (por exemplo, #1a1a1a), valores rgb() (por exemplo, rgb(26, 26, 26)) ou valores hsl().
  • Cor de fundo: Um valor de cor que aceita os mesmos formatos, nomeadamente valores hexadecimais (por exemplo, #1a1a1a), valores rgb() (por exemplo, rgb(26, 26, 26)) ou valores hsl().

Se for introduzida uma cor de texto inválida, a ferramenta apresenta a mensagem de erro: "Introduza uma cor de texto válida, como #1a1a1a or rgb(26, 26, 26).". Caso a cor de fundo introduzida seja inválida, é exibida a mensagem: "Introduza uma cor de fundo válida, como #ffffff ou rgb(255, 255, 255).".

Resultados e métricas de saída

Após o processamento das cores através da fórmula do WCAG 2.1 / 2.2, a ferramenta gera os seguintes resultados:

  • Proporção de contraste: O rácio calculado entre a cor do texto e a cor de fundo, apresentado no formato "X:1". Esta proporção varia entre o mínimo de 1:1 (ausência de contraste) e o máximo de 21:1 (preto no branco).
  • Texto normal: Indica "Aprovado" ou "Reprovado" para os níveis AA e AAA.
  • Texto grande: Indica "Aprovado" ou "Reprovado" para os níveis AA e AAA.
  • Interface e gráficos: Indica "Aprovado" ou "Reprovado" com base num limite único de 3:1. Esta linha não apresenta distinção entre AA e AAA, exibindo apenas um resultado único em vez de dois.
  • Veredicto: Uma mensagem de resumo que indica o nível de aprovação mais elevado alcançado. As mensagens possíveis são:
    • "Aprovado nos níveis AA e AAA para texto normal."
    • "Aprovado no nível AA para texto normal."
    • "Aprovado no nível AA apenas para texto grande."
    • "Abaixo do mínimo para AA — aumente o contraste."

Regras de conformidade e limites de contraste

A avaliação do contraste é rigorosa e segue limites matemáticos precisos definidos pelas diretrizes de acessibilidade:

  • Texto normal: O nível AA exige uma proporção mínima de 4,5:1, enquanto o nível AAA exige uma proporção mínima de pelo menos 7:1.
  • Texto grande: O nível AA requer uma proporção de pelo menos 3:1, ao passo que o nível AAA exige um mínimo de 4,5:1. O texto grande é definido como texto a partir de 18pt (cerca de 24px), ou a partir de 14pt (cerca de 18,5px) quando formatado em negrito.
  • Interface e gráficos: Esta categoria exige uma proporção mínima de 3:1, sendo a única linha de resultados que possui um limite único em vez de níveis AA e AAA separados.

Privacidade e processamento de dados

A segurança e a privacidade dos dados são salvaguardadas pelo método de processamento da ferramenta. Cada verificação é executada localmente no seu navegador, o que significa que nada do que introduzir é carregado para o BroBroGo.

Destinatários da ferramenta de contraste

Este recurso foi desenvolvido para apoiar diferentes perfis profissionais na criação de produtos digitais acessíveis:

  • Designers: Que necessitam de verificar a legibilidade do texto e dos componentes visuais durante a fase de criação.
  • Programadores: Que procuram garantir que os padrões e critérios de acessibilidade são cumpridos no código.
  • Equipas de conteúdo: Que precisam de verificar o contraste das cores aplicadas nos seus materiais e publicações.

Perguntas Frequentes

O que significam os resultados AA e AAA? AA é o nível que a maioria dos sites procura: exige uma proporção de pelo menos 4,5:1 para texto normal e 3:1 para texto grande. O nível AAA é mais rigoroso — 7:1 para texto normal e 4,5:1 para texto grande. A proporção vai de 1:1 (sem contraste) até 21:1 (preto no branco).

O que é considerado um texto grande? Textos a partir de 18pt (cerca de 24px), ou 14pt (cerca de 18,5px) quando em negrito. Textos maiores continuam legíveis com menor contraste, pelo que passam no nível AA com 3:1 e no AAA com 4,5:1, em vez dos limites mais rígidos para texto normal.

Quais formatos de cor posso introduzir? Introduza um valor hexadecimal como #1a1a1a, um valor rgb() como rgb(26, 26, 26) ou um valor hsl() — ou clique em qualquer uma das amostras para escolher uma cor. Utilize o botão de inversão para trocar as cores do texto e do fundo.

Este teste utiliza o WCAG 2 ou o novo método APCA? Utiliza a fórmula do WCAG 2.1 / 2.2, que é a referência atual para regras e auditorias de acessibilidade. O APCA é um método mais recente e baseado na perceção visual que ainda está a ser elaborado para o WCAG 3 — é promissor, mas ainda não é um padrão de conformidade oficial, pelo que os resultados de aprovação aqui não o utilizam.

Conversor de CoresConverta cores entre HEX, RGB, HSL, HSV, CMYK e LAB — edite qualquer campo e os outros mudam na hora.Seletor de Cores de ImagemSelecione qualquer píxel de uma imagem e descubra os seus valores em HEX, RGB e HSL com uma lupa de alta precisão.Conversor de Formato de ImagemConverta imagens JPG, PNG, WebP, HEIC e AVIF diretamente no seu navegador.Calculadora de Proporção de EcrãConverta qualquer largura × altura numa proporção limpa como 16:9, ou escolha uma proporção e calcule o lado que falta — ideal para vídeos, fotos e ecrãs.Gerador de Box ShadowArraste os controlos para criar sombras box-shadow, empilhe camadas para dar profundidade e copie o CSS pronto instantaneamente.Gerador de GradientesCrie gradientes lineares, radiais ou cônicos, adicione pontos de cor, defina a direção e copie o CSS com um único clique.Conjunto de Testes de MonitorVerifique qualquer ecrã com padrões de teste em ecrã inteiro — píxeis mortos, fuga de luz de fundo, banding, gamma, ghosting, taxa de atualização e mais.