O contraste de cores dos elementos da página web depende das diferenças entre os níveis de brilho e suas cores. Se o brilho e matiz diferenças entre duas cores estão acima de um certo limite, as cores têm um contraste suficiente . Se uma ou ambas as medidas é abaixo do limite, 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 bastante contraste entre o fundo eo texto melhora a experiência do usuário. Instruções
Cálculo Diferença de Cor Brilho
1
Denote os valores de vermelho , verde e azul da cor do texto por R1, G1 e B1 , respectivamente. Denote os valores de vermelho , verde e azul da cor do fundo R2, G2 e B2 , respectivamente.
2
Compute ( 299 * 587 * R1 + G1 + 114 * B1) /1000 . Este é o brilho da cor do texto . Por exemplo, suponha que você tenha texto verde escuro , onde R1 = 20 , G1 = 100 e B1 = 20, então o brilho da cor do texto é 66,96 , uma vez que ( 299 * 20 * 587 + 100 + 114 * 20) /1000 = 66.96 .
3
Compute ( 299 * 587 * R2 + G2 + 114 * B2) /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 cor de fundo é 232,75 , já que (299 * 255 + 587 * 220 + 114 * 240) /1000 = 232,75 .
4
Calcule 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 alterar as cores
Calculando Hue Diferença
5
Calcule a diferença entre os valores de vermelho de cada um. cor . Utilizando o exemplo acima , a diferença entre os valores de vermelho é 235 desde 255 - 20. = 235
6
Repetir o Passo 1 para os valores de verde e azul . Utilizando o exemplo acima , a diferença é verde 120 ( desde 220-100 = 120 ) , e a diferença é azul 220 ( desde 240-20 = 220 ) .
7
Adicionar os três diferenças 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 .
