Como calcular o contraste de cor

Bom contraste de cores torna páginas da web mais legível.

O contraste da cor de elementos da página web depende das diferenças entre os níveis de brilho e seus matizes. Se as diferenças de brilho e tonalidade entre duas cores estão acima de um certo limiar, as cores têm contraste suficiente. Se uma ou ambas as medidas é abaixo do limiar, World Wide Web Consortium recomenda que você altere as cores. Você pode calcular o contraste da cor se você souber os valores RGB (vermelho-verde-azul) de duas cores. Criação de páginas web com contraste suficiente entre o fundo eo texto melhora a experiência do usuário.

Calculando diferença de cor Brilho

  • Denotam os valores de vermelho, verde e azul da cor do texto por R1, G1 e B1, respectivamente. Denotam os valores de vermelho, verde e azul da cor do fundo R2, G2 e B2, respectivamente.

  • Compute (299R1 + 587G1 + 114B1) / 1000. Este é o brilho da cor do texto. Por exemplo, suponha que você tem texto verde escuro, onde R1 = 20, G1 = 100 e B1 = 20, então o brilho da cor do texto é 66,96, uma vez que (29920 + 587100 + 11420) / 1000 = 66,96.

  • Compute (299R2 + 587G2 + 114B2) / 1000. Este é o brilho da cor do fundo. Por exemplo, suponha que você tenha um fundo rosa claro onde R2 = 255, G2 = 220 e B2 = 240, então o brilho da cor de fundo é 232,75, já que (299255 + 587220 + 114240) / 1000 = 232,75.



  • Calcular a diferença entre os níveis de brilho. Se a diferença for inferior a 125, você deve ajustar uma ou ambas as cores para aumentar a diferença de brilho. Por exemplo, desde 232,75-66,96 = 165,79, você não precisa mudar as cores.

Calculando Hue Diferença

  • Calcula-se a diferença entre os valores de vermelho de cada cor. Utilizando o exemplo acima, a diferença entre os valores de vermelho é 235 desde 255-20 = 235.

  • Repita o passo 1 para os valores verdes e azuis. Utilizando o exemplo acima, a diferença é verde 120 (desde 220-100 = 120), e a diferença é azul 220 (desde 240-20 = 220).

  • Adicione as três diferenças para obter a diferença total de matiz. Se a diferença de tonalidade é inferior a 500, você precisa alterar uma ou ambas as cores. Por exemplo, desde 235 + 120 + 220 = 575, você não precisa mudar as cores.

De esta maneira? Compartilhar em redes sociais:

LiveInternet