Sobre o Cinza
Cinza (gray) é um cinza médio e discreto, com código hex #808080, ou rgb(128, 128, 128). Em HSL, ele fica no matiz de 0°, com 0% de saturação e 50% de luminosidade. O CSS também aceita a grafia grey para exatamente a mesma cor. Ele é uma das 148 cores nomeadas que todos os navegadores entendem, então você pode escrever color: gray; em vez do valor hex.
Usando o cinza em textos e fundos
| Combinação | Razão de contraste | WCAG |
|---|---|---|
| Texto cinza sobre branco | 3.95 : 1 | AA apenas para texto grande |
| Texto cinza sobre preto | 5.32 : 1 | AA |
Em um fundo cinza, use texto em preto (5.32 : 1). O WCAG pede pelo menos 4.5 : 1 para textos normais e 3 : 1 para textos grandes. Teste outras combinações com o Verificador de Contraste.
CSS
.element {
color: gray; /* or #808080 */
background-color: #808080;
border: 1px solid rgb(128 128 128 / 50%);
}
Cores nomeadas semelhantes
Cinza Ardósia (#708090), Cinza Ardósia Claro (#778899), Cinza Fosco (#696969), Azul Cadete (#5f9ea0), Verde Mar Escuro (#8fbc8f), Marrom Rosado (#bc8f8f).
Nomear Cores
Cole um código HEX para obter o nome mais próximo, legível para humanos, e nomes de tokens limpos para o seu CSS, SCSS, JavaScript ou configuração do Tailwind.