Operacional
Entrar / Registrar-se
common.you_need_to_be_loggedin_to_add_tool_in_favorites
Verificador de contraste de cores
Anúncio
Preview
Normal Text (16px)
Large Text (24px)
Contrast Ratio
21.00:1
WCAG Compliance
Normal Text
✓
AA Pass
✓
AAA Pass
Large Text (18pt+ or 14pt+ bold)
✓
AA Pass
✓
AAA Pass
UI Components & Graphics
✓
AA Pass
WCAG Standards
Normal Text
- AA: 4.5:1 minimum
- AAA: 7:1 minimum
Large Text
- AA: 3:1 minimum
- AAA: 4.5:1 minimum
UI Components
- AA: 3:1 minimum
Common Combinations
Black on White
White on Blue
White on Dark Gray
Insira suas combinações de cores abaixo para testá-las com nosso verificador de contraste de cores e ver instantaneamente se elas atendem aos padrões de acessibilidade.
Como funciona nosso verificador de contraste de cores
Insira as cores de primeiro plano efundo usando valores hexadecimais RGB ou escolha-as diretamente com o Seletor de cores.
- Ajuste Alfa para alterar o quão transparente é a cor do primeiro plano.
- Use o controle deslizante Luminosidade para tornar a cor mais clara ou mais escura.
Nossa ferramenta então calcula a taxa de contraste e a verifica de acordo com as diretrizes da WCAG:
- WCAG 2.0 Nível AA
- Pelo menos 4,5:1 para corpo de texto normal
- Pelo menos 3:1 para texto grande
- WCAG 2.1 (IU e gráficos)
- Pelo menos 3:1 para ícones, bordas e outros componentes da interface
- WCAG Nível AAA
- Pelo menos 7:1 para texto normal
- Pelo menos 4,5:1 para texto grande
Texto grande significa:
- 14 pt (cerca de 18,66 px) e negrito, ou
- 18 pt (cerca de px) ou maior
Você pode usar o conta-gotas no Seletor de cores para obter cores exatas de qualquer coisa na tela.
Para links que dependem apenas da cor para se destacarem, use nosso verificador de contraste de cores para garantir que atendam aos padrões de acessibilidade e sejam fáceis de ler para todos.