1.16.2015

Bagaimana Cara Menghitung Kontras Warna Dengan Javascript?


Sering kita temukan beberapa web/aplikasi yang memperbolehkan penggunanya merubah tampilan profil seperti image cover, background color, dan lain sebagainya. Namun masalahnya, bagaimana cara menentukan warna teks pada web/aplikasi tersebut agar menyesuaikan dengan warna latar belakangnya?

Contoh

#e15c3d #94c292 #25bbdc #daf0e6 #f7c51b

Diatas terdapat beberapa kotak dengan warna latar belakang yang berbeda dengan warna teks putih. Bagaimana caranya untuk menentukan kapan kita menggunakan teks berwarna putih atau hitam?

Menghitung kontras warna menggunakan hex code nya

Caranya cukup sederhana. Untuk menentukan suatu warna background tersebut apakah termasuk gelap atau terang yaitu dengan cara membandingkannya dengan nilai tengah antara warna putih dan warna hitam (yaitu : #7f7f7f). Jika warna background color tersebut lebih kecil dari nilai tengah #7f7f7f, dapat disimpulkan bahwa warna tersebut mendekati gelap yang berarti sebaiknya menggunakan text berwarna putih. Tapi, jika warna background color tersebut lebih besar dari nilai #7f7f7f maka sebaiknya kita menggunakan text berwarna hitam. Lihat demo dibawah ini.

Demo


text

Source code

Berikut contoh penerapan fungsi tersebut menggunakan javascript:

var arrcolor = ["#e15c3d","#94c292","#25bbdc","#daf0e6","#f7c51b"];
var hexDigits = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"); 
function adjustColour(someelement)
{
   // get random background color
   var randomInt = Math.floor((Math.random() * 10) % arrcolor.length);
   var bgcolor = arrcolor[randomInt];
   console.log(bgcolor);
   someelement.style.backgroundColor = bgcolor;
   var rgbstring = someelement.style.backgroundColor;
   // convert to array a,r,g,b
   rgbstring = rgbstring.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
   var sumColor = parseInt(rgbstring[1]) + parseInt(rgbstring[2]) + parseInt(rgbstring[3]);
   console.log(sumColor);
   
   if (sumColor < (3*256)/2){
         // Background color is dark
   someelement.style.color = 'white';
   }else{
         // Background color is light
   someelement.style.color = 'black';
   }
   
   return true;
}

Sekian, dan semoga bermanfaat.

2 comments:

  1. How about #7f7f7f background color? What text color should be used?
    haha

    ReplyDelete
    Replies
    1. that color is gray, then you should use white color for the text..CMIIW
      haha

      Delete