Hvordan beregne Color Contrast

Hvordan beregne Color Contrast


Den fargekontrast på web sideelementer avhenger av forskjellene mellom deres lysstyrkenivåer og deres nyanser. Hvis lysstyrke og fargetone forskjeller mellom to farger er over en viss terskel, fargene har tilstrekkelig kontrast. Hvis en eller begge tiltakene er under sperregrensen, anbefaler World Wide Web Consortium at du endrer fargene. Du kan beregne fargekontrast hvis du kjenner RGB (rød-grønn-blå) verdier av to farger. Designe web-sider med nok kontrast mellom bakgrunnen og teksten forbedrer brukeropplevelsen.

Bruksanvisning

Beregne Forskjell i Color Lysstyrke

1 Betegne de røde, grønne og blå verdier av tekstfarge med henholdsvis R1, G1 og B1. Betegne de røde, grønne og blå verdier av bakgrunnsfargen ved henholdsvis R2, G2 og B2.

2 Beregn (299

R1 + 587 G1 + 114 B1) / 1000. Dette er lysstyrken på tekstfarge. For eksempel si at du har mørk grønn tekst der R1 = 20, G1 = 100 og B1 = 20, deretter tekstfarge lysstyrke er 66.96, siden (299 20 + 587 100 + 114 20) / 1000 = 66,96.

3 Beregn (299

R2 + 587 G2 + 114 B2) / 1000. Dette er lysstyrken på bakgrunnsfarge. For eksempel si at du har en lys rosa bakgrunn der R2 = 255, G2 = 220 og B2 = 240, da bakgrunnsfargen lysstyrke er 232,75, siden (299 255 + 587 220 + 114 240) / 1000 = 232,75.

4 Beregn forskjellen mellom lysstyrken. Dersom forskjellen er mindre enn 125, ved å justere en eller begge farger for å øke lysstyrken forskjell. For eksempel, siden 232,75 til 66,96 = 165,79, du trenger ikke å endre fargene.

Beregning Hue Differanse

5 Beregne forskjellen mellom den røde verdiene for hver farge. Ved å bruke eksempelet ovenfor, er forskjellen mellom de røde verdiene 235 siden 255-20 = 235.

6 Gjenta trinn 1 for de grønne og blå verdier. Ved å bruke eksempelet ovenfor, er den grønne differansen 120 (siden 220-100 = 120), og den blå forskjellen er 220 (siden 240-20 = 220).

7 Tilsett tre forskjellene for å oppnå den totale fargetone forskjell. Hvis nyanse forskjellen er mindre enn 500, må du endre en eller begge fargene. For eksempel, siden 235 + 120 + 220 = 575, trenger du ikke å endre fargene.