Farven kontrast webside elementer afhænger af forskellene mellem deres lysstyrkeniveauer og deres nuancer . Hvis lysstyrke og nuance forskelle mellem to farver er over en vis tærskel , farverne har tilstrækkelig kontrast. Hvis en eller begge foranstaltninger er under den tærskel , World Wide Web Consortium anbefaler, at du ændre farverne . Du kan beregne farvekontrast , hvis du kender RGB (rød -grøn- blå) værdierne af to farver. Designe websider med nok kontrast mellem baggrund og tekst forbedrer brugeroplevelsen. Instruktioner
Beregning forskel i farve Lysstyrke
1
Betegne de røde , grønne og blå værdier af teksten farve ved R1, G1 og B1 hhv . Betegne de røde , grønne og blå værdier baggrundsfarven ved R2 , G2 og B2 hhv .
2
Compute ( 299 * R1 + 587 * G1 + 114 * B1) /1000 . Dette er lysstyrken af tekstens farve . For eksempel antage, at du har mørkegrøn tekst, hvor R1 = 20 , G1 = 100 og B1 = 20 , så tekstfarven lysstyrken er 66.96 , da (299 * 20 + 587 * 100 + 114 * 20) /1000 = 66,96 . < br >
3
Compute ( 299 * R2 + 587 * G2 + 114 * B2) /1000 . Dette er lysstyrken af baggrundsfarven. For eksempel har du en lys pink baggrund , hvor R2 = 255 , G2 = 220 og B2 = 240 , så baggrundsfarven lysstyrken er 232,75 formoder , da (299 * 255 + 587 * 220 + 114 * 240) /1000 = 232,75 .
4
Beregn forskellen mellem lysstyrkeniveauer. Hvis forskellen er mindre end 125 , skal du justere en eller begge farver for at øge lysstyrken forskel. For eksempel, da 232,75 - = 165,79 66,96 , behøver du ikke at ændre farverne
Beregning Hue Forskel
5
Beregn forskellen mellem de røde værdier af hver. farve . Brug eksemplet ovenfor , er forskellen mellem de røde værdier er 235 siden 255 - . 20 = 235
6
Gentag trin 1 for de grønne og blå værdier. Brug eksemplet ovenfor, grønne forskel er 120 (siden 220-100 = 120) , og den blå forskel er 220 (siden 240-20 = 220) .
7
Tilsæt tre forskelle for at opnå den samlede nuance forskel . Hvis nuance forskellen er mindre end 500, skal du ændre den ene eller begge af de farver . For eksempel + 120 siden 235 + 220 = 575, behøver du ikke at ændre farverne .
