Renk Kontrastını Hesaplama

Bu makalede, arka plan rengine bağlı olarak yazı rengini değiştirmeyi göreceğiz.

CSS tarafında bir yazıya color: #fff verdiğimizi düşünelim. Koyu arka plan renklerinde bu yazı okunabilirken, açık tonlu renk üzerinde okunamaz olacaktır. Burada dinamik olarak arka plan rengi koyu ise beyaz yazı, arka plan açık tonlar ise siyah renkte yazı yazmamız sorunu çözecektir. Peki bunu nasıl yapabiliriz?

Brian Suda isimli bir geliştiricinin geliştirmiş olduğu şu kod işimizi görüyor;

function getContrastYIQ(hexcolor) {
	var r = parseInt(hexcolor.substr(0, 2), 16)
	var g = parseInt(hexcolor.substr(2, 2), 16)
	var b = parseInt(hexcolor.substr(4, 2), 16)
	var yiq = (r * 299 + g * 587 + b * 114) / 1000
	return yiq >= 128 ? "black" : "white"
}

Bu kodu biraz okuyalım. Öncelikle hexcolor adında bir parametre (rengimizin 6 haneli HEX kodunu) istiyor.
.substr(X,2) fonksiyonu sayesinde 26a69a diye bir renk gönderirsek 26, a6 ve 9a şeklinde parçalıyor.
r, g, b değerleri CSS'te 0-255 ve arasındaki değerleri alabiliyor. Bu yüzden oluşturulan 26, a6 ve 9a değerlerini parseInt(X,16) fonksiyonu ile 16'lık tabanda bir değere dönüştürüyor.
Bu işlemlerden sonra r=38, g=166 ve b=154 olarak hesaplanmış oluyor.
Son adımda ise ((r*299)+(g*587)+(b*114))/1000 formulü ile rengin kontrast değeri hesaplanıyor. Bu değer 128 ve üstü ise parametre olarak gönderdiğimiz değer açık tonda bir renktir, 128'den küçükse koyu bir renktir.

Debug adımlarını gösterecek olursak kod şu şekilde çalışıyor;

function getContrastYIQ(hexcolor) {
	// hexcolor = 26a69a
	var r = parseInt(hexcolor.substr(0, 2), 16) // r = 38
	var g = parseInt(hexcolor.substr(2, 2), 16) // g = 166
	var b = parseInt(hexcolor.substr(4, 2), 16) // b = 154
	var yiq = (r * 299 + g * 587 + b * 114) / 1000 // yiq = 126.36
	return yiq >= 128 ? "black" : "white" // return "white"
}

Aşağıda React ile oluşturulmuş basit bir CodePen örneğinde arkaplana göre yazı rengi dinamik olarak hesaplanmaktadır.

Kaynaklar

function getContrastYIQ(hexcolor) { var r = parseInt(hexcolor.substr(0, 2), 16) var g = parseInt(hexcolor.substr(2, 2), 16) var b = parseInt(hexcolor.substr(4, 2), 16) var yiq = (r * 299 + g * 587 + b * 114) / 1000 return yiq >= 128 ? "black" : "white" }

function getContrastYIQ(hexcolor) { // hexcolor = 26a69a var r = parseInt(hexcolor.substr(0, 2), 16) // r = 38 var g = parseInt(hexcolor.substr(2, 2), 16) // g = 166 var b = parseInt(hexcolor.substr(4, 2), 16) // b = 154 var yiq = (r * 299 + g * 587 + b * 114) / 1000 // yiq = 126.36 return yiq >= 128 ? "black" : "white" // return "white" }

Renk Kontrastını Hesaplama

İçindekiler

Kaynaklar

Renk Kontrastını Hesaplama

İçindekiler

Kaynaklar