Sobre o Cinza Claro
Cinza Claro (lightgray) é um cinza muito claro e suave, com o código hex #d3d3d3, ou rgb(211, 211, 211). No HSL ele tem matiz de 0°, saturação de 0% e luminosidade de 83%. O CSS também aceita a grafia lightgrey para exatamente a mesma cor. É uma das 148 cores nomeadas que todos os navegadores entendem, então você pode escrever color: lightgray; no lugar do valor hex.
Usando o Cinza Claro em textos e fundos
| Combinação | Razão de contraste | WCAG |
|---|---|---|
| Texto Cinza Claro sobre branco | 1.50 : 1 | reprova |
| Texto Cinza Claro sobre preto | 14.03 : 1 | AAA |
Em fundo cinza claro, use texto em preto (14.03 : 1). O WCAG exige no mínimo 4.5 : 1 para textos corridos e 3 : 1 para textos grandes. Teste outras combinações com o Verificador de Contraste.
CSS
.element {
color: lightgray; /* or #d3d3d3 */
background-color: #d3d3d3;
border: 1px solid rgb(211 211 211 / 50%);
}
Cores com nomes parecidos
Gainsboro (#dcdcdc), Cardo (#d8bfd8), Prata (#c0c0c0), Azul Aço Claro (#b0c4de), Azul Pó (#b0e0e6), Azul Claro (#add8e6).
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.