Ferramentas de desenvolvedor
Conversor de cores e verificador de contraste
Inclui as taxas de contraste que decidem se o texto nessa cor é legível.
- é executado no seu navegador
- Nada carregado
A ferramenta
Insira um valor hexadecimal ou uma cor RGB.
Tudo o que você insere permanece em sua própria máquina. Nada é enviado para nós ou para qualquer outra pessoa, o que você pode confirmar na aba de rede do seu navegador.
Para que as pessoas o usam
- Decidindo se deve colocar texto branco ou preto na cor de uma marca
- Convertendo um valor hexadecimal de um arquivo de projeto em HSL para construir uma rampa
- Verificar se uma cor atende às WCAG AA antes de usá-la no corpo do texto
- Traduzindo uma cor entre uma ferramenta de design e CSS
- Entendendo por que uma cor parece mais brilhante que outra
Sobre esta ferramenta
Três maneiras de dizer a mesma coisa
Hex permanece compacto e continua sendo a forma usual em CSS. RGB fornece os mesmos números em decimal, o que é adequado para ajuste manual. HSL descreve matiz, saturação e luminosidade, o que é muito mais útil ao construir uma rampa de cores, porque você pode manter o matiz e variar a luminosidade.
Contraste e por que está aqui
A taxa de contraste decide se alguém pode ler texto em segundo plano. WCAG AA solicita pelo menos 4.5 a 1 para texto corporal e 3 a 1 para texto grande. Esta ferramenta informa a proporção entre branco puro e preto puro, informando imediatamente qual cor de texto usar em um determinado fundo.
O baixo contraste continua sendo um dos problemas de acessibilidade mais comuns e um dos mais fáceis de evitar no momento do design, em vez de corrigi-lo posteriormente.
Luminância relativa
O valor da luminância é o valor no qual a fórmula de contraste é construída. Não se trata de um simples brilho: o cálculo dá muito mais importância ao verde do que ao azul, porque a visão humana o faz. É por isso que duas cores que parecem igualmente escuras podem se comportar de maneira muito diferente atrás do texto.
Isso precisa ser tratado em todo o site? Veja nosso Serviços de design UI UX página.
Mais ferramentas e serviços
- Formatador e validador JSON
- Decodificador e codificador Base64
- Codificador e decodificador de URL
- Decodificador JWT
- Gerador UUID
- Conversor de carimbo de data/hora Unix
Se você preferir que alguém faça isso corretamente para você, oferecemos Serviços de Web Design e Desenvolvimento de Sites, Serviços de SEO: Otimização de mecanismos de pesquisa, Agência de automação de IA.
Perguntas
Perguntas sobre esta ferramenta
O que os clientes realmente desejam saber – custos, prazos, propriedade e o que acontece após o lançamento.
WCAG AA solicita 4.5 a 1 para corpo de texto e 3 a 1 para texto grande. AAA pede 7 para 1.
Porque você pode manter o matiz e alterar apenas a luminosidade, e é assim que uma rampa de cores consistente é construída.
Reporta em branco e preto, o que responde à pergunta comum sobre qual cor de texto usar.
As telas variam em calibração e perfil de cores. Os valores são exatos; a exibição deles não é.
Hexadecimal de três ou seis dígitos, com ou sem hash, e notação rgb().
Sessão de estratégia gratuita
Vamos construir algo que valha a pena encontrar.
Diga-nos onde você deseja que o negócio esteja em doze meses. Voltaremos com um plano orçamentado, um cronograma realista e os números que esperamos movimentar – sem obrigações, sem jargões.
- chamada de 30 minutos, sem apresentação de argumento de venda
- Proposta de preço fixo em horas 48
- Você possui tudo o que construímos
Fale com um desenvolvedor
Não é uma equipe de vendas
- Tempo de resposta
- Dentro do horário comercial 1
- Onde trabalhamos
- Reino Unido, EUA e Golfo
- Contratos
- Sem lock-in, lançamento mensal
- Trabalhando desde
- 2023