Verificador de contraste de cores
Use este verificador de contraste de cores para medir o contraste entre uma cor de primeiro plano e uma de fundo. Consulte os resultados WCAG 2.2 AA e AAA, a cor mais próxima que cumpre os requisitos, as camadas transparentes e os pares de uma paleta.
Gratuito, sem registo. Funciona no seu navegador, sem chamadas a serviços de IA.
Taxa de contraste
4,54:1
| Utilização | Nível | Requisito | Resultado |
|---|---|---|---|
| Texto normal | AA | 4,5:1 | Aprovado |
| Texto grande | AA | 3:1 | Aprovado |
| Elementos da interface e gráficos | AA | 3:1 | Aprovado |
| Texto normal | AAA | 7:1 | Reprovado |
| Texto grande | AAA | 4,5:1 | Aprovado |
Esta pré-visualização usa o modelo de Machado de 2009 com gravidade máxima. É uma aproximação da perceção das cores, não um diagnóstico. Os resultados WCAG usam sempre as cores originais visíveis.
Machado, Oliveira e Fernandes: modelo publicadoO texto normal a 16 pixels tem este aspeto.
Texto grande a 24 pixels
Uma borda de 2 pixelsLicença do modelo de visão das cores
Copyright 2013 Colour Developers Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: 1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. 2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. 3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS “AS IS” AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE
Verificar uma paleta
Adicione pelo menos duas cores para comparar uma paleta. As cores repetidas contam apenas uma vez.
Um verificador de contraste de cores mede a relação entre duas cores numa escala de 1:1 a 21:1. Verifique os níveis AA e AAA das WCAG 2.2 para texto e o limite de 3:1 para elementos que não são texto. Encontre uma cor que cumpra os requisitos sem alterar a matiz, componha camadas transparentes sobre uma cor de base escolhida, compare até 12 cores de uma paleta e pré-visualize deficiências da visão das cores com o modelo de Machado.
Como usar esta ferramenta
- Introduza duas cores
- Introduza um código hexadecimal, como #1a1a2e ou #fff, um valor rgb() ou hsl(), ou o nome de uma cor CSS, como navy. Também pode usar os seletores de cor. É aceite o canal alfa em rgba(), hsla() e códigos hexadecimais de 4 ou 8 dígitos. Defina a cor de base para compor as camadas transparentes de fundo e texto. Os controlos de opacidade multiplicam o valor alfa já presente em cada entrada. O contraste é calculado com as cores compostas sem arredondamento; os valores hexadecimais apresentados são aproximados.
- Como se calcula a relação de contraste
- A luminância relativa de cada cor é calculada pela fórmula das WCAG. A relação resulta da divisão da luminância da cor mais clara, acrescida de 0.05, pela da cor mais escura, também acrescida de 0.05. O valor apresentado é arredondado para baixo a duas casas decimais, por isso 4.499 nunca aparece como aprovado.
- O que significam os níveis
- AA é o nível referido pela maioria das leis e políticas: 4.5:1 para texto normal e 3:1 para texto grande. AAA exige 7:1 e 4.5:1, respetivamente. Texto grande significa pelo menos 24 px, ou cerca de 18.7 px a negrito. Ícones, contornos de campos e indicadores de foco precisam de 3:1 em relação às cores adjacentes.
- A cor sugerida
- Quando um nível não é cumprido, mantemos a matiz e a saturação da cor que escolheu alterar e ajustamos apenas a luminosidade, em pequenos passos, até atingir a relação necessária. Apresentamos a cor mais próxima que cumpre o requisito, com a respetiva relação de contraste. «Mais próxima» significa a menor alteração de luminosidade HSL em passos de 0.001, não a menor distância percetiva entre cores. Aplicar uma sugestão torna essa camada opaca. Se o texto for translúcido, escolha uma cor de substituição para o texto, pois alterar o fundo modificaria as duas cores visíveis.
- Pré-visualizações da paleta e da visão das cores
- Introduza até 12 cores sólidas distintas, separadas por quebras de linha, vírgulas ou pontos e vírgulas. As linhas representam as cores de primeiro plano, as colunas representam os fundos, e cada par mostra a relação de contraste e o resultado AA para texto normal. Selecione um par para consultar todos os níveis. As pré-visualizações de protanopia, deuteranopia e tritanopia usam o modelo de Machado, Oliveira e Fernandes (2009) na gravidade máxima, com matrizes Colour Science licenciadas sob BSD. São aproximações da perceção visual, não alteram o cálculo WCAG nem servem para diagnosticar ninguém.
O que saber antes de começar
Veja como a sua empresa aparece nas respostas de IA
As verificações técnicas ajudam a corrigir uma página. A análise gratuita de visibilidade em IA mostra as respostas verificadas sobre a sua empresa e o que deve melhorar a seguir.