Verificador de Contraste de Cores
Teste a proporção de contraste entre as cores de fundo e texto para acessibilidade. Use-o para visualizar diferentes combinações de cores para o design do seu site que estejam em conformidade com as Diretrizes de Acessibilidade para Conteúdo Web (WCAG) e a legislação internacional de acessibilidade.
Guia da Ferramenta de Contraste de Cores
Insira uma cor de fundo e de primeiro plano em formato RGB, hexadecimal, ou escolha uma cor usando o seletor de cores. Depois que uma cor for selecionada, o nível de luminosidade pode ser ajustado.
Como Interpretar as Taxas de Contraste de Cores
Requisitos mínimos de taxa de contraste
WCAG 2.2 Nível AA Texto normal: taxa de contraste mínima de 4.5:1 | WCAG 2.2 Nível AAA Texto normal: taxa de contraste mínima de 7:1 |
Texto grande é definido como 14 pontos (18,67 px) e negrito ou maior, ou 18 pontos (24 px) ou maior.
Precisa de Ajuda Adicional?
Construir elementos de design de website com contraste adequado é um dos muitos passos a serem dados na sua jornada rumo a um site acessível. Nossa plataforma oferece as ferramentas e dados necessários para garantir que seu website seja totalmente compatível e fácil de usar para todos os visitantes.
Por Que Usar um Verificador de Contraste de Cores?
O contraste é um dos problemas mais comuns de acessibilidade web, mas também um dos mais fáceis de resolver. De acordo com o Sistema de Design Web dos EUA (USWDS), 4,5% da população americana possui algum tipo de insensibilidade às cores que dificulta distinguir ou perceber diferenças nos matizes. Pessoas com insensibilidade às cores e baixa visão frequentemente têm dificuldade para ler textos que não contrastam com o fundo. Fornecer uma proporção mínima de contraste de luminância entre o texto e seu fundo pode tornar o texto mais legível para usuários que não conseguem ver toda a gama de cores e ajuda aqueles raros usuários que não veem cor alguma. Use o verificador de contraste de cores web da Acquia Web Governance para verificar rapidamente combinações de cores e garantir que todos os seus ativos de conteúdo da marca e elementos de design sejam acessíveis a todos. Também pode ser usado para testar contraste de cores com outras legislações, por exemplo, como um verificador de contraste ADA.
| O que é acessibilidade de cores? A acessibilidade de cores refere-se ao design e uso de cores de forma que pessoas com diferentes capacidades visuais possam perceber, distinguir e compreender informações apresentadas visualmente. Isso inclui considerar usuários com daltonismo, baixa visão ou cegueira total. Os principais aspectos da acessibilidade de cores incluem: **Contraste adequado**: Garantir que haja contraste suficiente entre texto e fundo para facilitar a leitura, especialmente para pessoas com baixa visão. **Não depender apenas da cor**: Usar outros indicadores visuais como ícones, padrões, texto ou formatação para transmitir informações importantes, além da cor. **Escolha de paleta inclusiva**: Selecionar combinações de cores que sejam distinguíveis por pessoas com diferentes tipos de daltonismo (deuteranopia, protanopia, tritanopia). **Testes de acessibilidade**: Verificar o design usando ferramentas de simulação de daltonismo e diretrizes como as WCAG (Web Content Accessibility Guidelines). **Consistência**: Manter o uso de cores consistente em toda a interface para criar padrões previsíveis para os usuários. Implementar a acessibilidade de cores não apenas beneficia pessoas com deficiências visuais, mas também melhora a experiência geral do usuário, tornando o conteúdo mais claro e profissional para todos. |
|---|
|
A cor é um elemento tão vital do web design que é utilizada para transmitir personalidade, atrair atenção, simbolizar ação e indicar importância. Como a cor carrega grande significado tanto em ser visualmente atraente quanto em transmitir sentido, os usuários devem conseguir perceber diferentes conteúdos coloridos em uma página web. A acessibilidade de cores é importante pois ajuda usuários com deficiências visuais como baixa visão ou daltonismo a distinguir adequadamente os elementos de conteúdo e lê-los/visualizá-los de forma eficaz.
|
| O que é um verificador de contraste de cores? Um verificador de contraste de cores é uma ferramenta que analisa a diferença visual entre duas cores para determinar se elas atendem aos padrões de acessibilidade web. Essa ferramenta mede a proporção de contraste entre o texto e sua cor de fundo, garantindo que o conteúdo seja legível para pessoas com deficiências visuais ou daltonismo. Esses verificadores são essenciais para desenvolvedores e designers que desejam criar sites e aplicações inclusivos, seguindo as diretrizes de acessibilidade WCAG (Web Content Accessibility Guidelines). Eles ajudam a identificar combinações de cores que podem dificultar a leitura e sugerem alternativas que melhoram a experiência do usuário para todos. |
|---|
|
Um verificador de contraste de cores é uma ferramenta que mede a diferença na luminância percebida entre duas cores para garantir que seja perceptível para usuários com deficiências visuais ou insensibilidade visual.
|
| Como é calculada a razão de contraste de cores? A razão de contraste de cores é calculada usando a fórmula estabelecida pelas Diretrizes de Acessibilidade para Conteúdo Web (WCAG): **Fórmula da Razão de Contraste:** (L1 + 0,05) / (L2 + 0,05) Onde: - L1 = luminância relativa da cor mais clara - L2 = luminância relativa da cor mais escura - 0,05 = constante adicionada para evitar divisão por zero **Cálculo da Luminância Relativa:** A luminância relativa é calculada usando os valores RGB da cor: 1. **Converter valores RGB:** Primeiro, converta cada valor RGB (0-255) para o intervalo 0-1 dividindo por 255 2. **Aplicar correção gama:** Para cada componente (R, G, B): - Se o valor ≤ 0,03928: divida por 12,92 - Se o valor > 0,03928: ((valor + 0,055) / 1,055) ^ 2,4 3. **Calcular luminância:** L = 0,2126 × R + 0,7152 × G + 0,0722 × B **Níveis de Conformidade WCAG:** - **AA Normal:** razão mínima de 4,5:1 - **AA Grande:** razão mínima de 3:1 (texto 18pt+ ou 14pt+ em negrito) - **AAA Normal:** razão mínima de 7:1 - **AAA Grande:** razão mínima de 4,5:1 **Exemplo Prático:** Texto preto (#000000) sobre fundo branco (#FFFFFF): - Luminância do branco: 1 - Luminância do preto: 0 - Razão: (1 + 0,05) / (0 + 0,05) = 21:1 Esta razão de 21:1 oferece o contraste máximo possível e atende a todos os níveis de conformidade WCAG. |
|---|
|
A diferença é medida em uma escala de proporção que vai de 1:1 (branco sobre branco) até 21:1 (preto sobre branco). De acordo com o nível AA do WCAG, a proporção mínima de contraste que as cores podem ter para a apresentação visual de texto e imagens de texto é de 4,5:1.
|
| Qual é uma proporção de contraste de cores WCAG aceitável? |
|---|
|
O WCAG 2.1 Nível AA exige que a apresentação visual de texto e imagens de texto tenha uma proporção de contraste de pelo menos 4,5:1, exceto para texto grande, que deve ter uma proporção mínima de contraste de 3:1. O WCAG 2.1 Nível AAA exige uma proporção de contraste de pelo menos 7:1 para texto normal e 4,5:1 para texto grande (14 pontos e negrito ou maior, ou 18 pontos ou maior).
|
| As imagens precisam estar em conformidade com os requisitos de contraste de cor do WCAG? |
|---|
|
As imagens devem atender aos requisitos de contraste da WCAG. Imagens que contêm texto devem garantir que o contraste entre o fundo da imagem e o texto seja suficiente, especialmente se as imagens forem de baixa qualidade e se a imagem precisar ser ampliada de alguma forma. Imagens com texto devem ter uma proporção mínima de contraste de 4.5:1. Para imagens que não contêm texto, mas ainda transmitem significado, os componentes da imagem ainda devem ter contraste suficiente para garantir que a imagem geral seja perceptível. A WCAG 2.1 nível AA especifica que objetos gráficos e componentes de interface personalizados pelo autor, como ícones, gráficos, botões, controles de formulário, indicadores de foco e contornos, devem ter uma proporção de contraste de pelo menos 3:1.
|