Färgkontrasten av webbsidor element beror på skillnaderna mellan deras ljusstyrka och deras nyanser . Om ljusstyrkan och nyans skillnader mellan två färger är över en viss tröskel , färgerna har tillräcklig kontrast . Om en eller båda åtgärderna är under tröskeln , rekommenderar World Wide Web Consortium som du ändra färgerna . Du kan beräkna färgkontrast om du känner till RGB ( röd - grön - blå ) värden av två färger . Designa webbsidor med tillräcklig kontrast mellan bakgrund och text förbättrar användarupplevelsen . Instruktioner
Beräkning skillnad i färg Ljusstyrka
1
Beteckna de röda , gröna och blå värden textfärgen genom R1 , G1 och B1 resp . Beteckna de röda , gröna och blå värden bakgrundsfärgen genom R2 , G2 och B2 respektive.
2
Compute ( 299 * R1 + 587 * G1 + 114 * B1 ) /1000 . Detta är ljusstyrkan för textfärg . Anta till exempel att du har mörkgrön text där R1 = 20 , G1 = 100 och B1 = 20 , då textfärgen ljusstyrkan är 66.96 , sedan ( 299 * 20 + 587 * 100 + 114 * 20 ) /1000 = 66,96 .
3
Compute ( 299 * R2 + 587 * G2 + 114 * B2 ) /1000 . Detta är ljusstyrkan på bakgrundsfärgen . Anta till exempel att du har en ljusrosa bakgrund där R2 = 255 , G2 = 220 och B2 = 240 , då bakgrundsfärgen ljusstyrkan är 232,75 , eftersom ( 299 * 255 + 587 * 220 + 114 * 240 ) /1000 = 232,75 .
4
Beräkna skillnaden mellan ljusstyrkan . Om skillnaden är mindre än 125 , måste du justera en eller båda färgerna för att öka ljusstyrkan skillnaden . Till exempel , eftersom 232,75-66,96 = 165,79 , behöver du inte att ändra färgerna Addera Beräkning Hue Skillnad
5
Beräkna skillnaden mellan de röda värdena för varje . färg. I exemplet ovan , är skillnaden mellan de röda värdena 235 sedan 255 - . 20 = 235
6
Upprepa steg 1 för de gröna och blå värden . I exemplet ovan , är den gröna skillnaden 120 ( sedan 220-100 = 120 ) , och den blå skillnaden är 220 ( sedan 240-20 = 220 ) .
7
Lägg de tre skillnader att erhålla den totala nyans skillnad . Om nyans skillnaden är mindre än 500 , måste du ändra en eller båda färgerna . Till exempel , eftersom 235 + 120 + 220 = 575 , behöver du inte att ändra färgerna .
