Renk Paletinde Erişilebilirlik: Kontrast Oranı Nasıl Hesaplanır?

Bir palet moodboard'da kusursuz görünüp ekranda okunmaz olabilir. Sebep zevk farkı değil, ölçülebilir bir büyüklüktür: kontrast oranı. Bu yazı o büyüklüğün nasıl hesaplandığını formülüyle gösteriyor, eşikleri açıklıyor ve paletinizi denetlemek için uygulanabilir bir yöntem sunuyor.

Konu erişilebilirlik başlığı altında geçtiği için çoğu zaman "engelli kullanıcılar için ek özellik" sanılır. Değildir. Düşük kontrast; güneş altında telefonuna bakan, gece parlaklığı kısılmış ekran kullanan ve gözlüğünü unutan herkesi etkiler. Yani hedef kitlenizin tamamını.

Kontrast oranı tam olarak nedir

İki rengin göreli parlaklıkları arasındaki orandır. 1:1 (aynı renk) ile 21:1 (saf siyah üzerine saf beyaz) arasında bir değer alır. Renk tonu ya da doygunluğu hesaba girmez — yalnızca parlaklık girer. Bu yüzden birbirinden çok farklı görünen iki renk, kontrast açısından neredeyse aynı olabilir.

Hesap üç adımda yapılır

Adım 1 — Kanal değerlerini 0-1 aralığına indirin

Her renk kanalını (R, G, B) 255'e bölün. Örneğin #B1122A için: R = 177/255 = 0.694, G = 18/255 = 0.071, B = 42/255 = 0.165.

Adım 2 — Gama düzeltmesi uygulayın

Ekranlar ışığı doğrusal üretmez; bu yüzden her kanal düzeltilir:

k ≤ 0.03928 ise → k / 12.92
k > 0.03928 ise → ((k + 0.055) / 1.055) ^ 2.4

Örneğimizde: R = 0.437, G = 0.0060, B = 0.0241.

Adım 3 — Göreli parlaklığı bulun ve oranı kurun

Kanallar eşit ağırlıkta değildir; insan gözü yeşile en duyarlı, maviye en duyarsızdır:

L = 0.2126 × R + 0.7152 × G + 0.0722 × B

#B1122A için L = 0.0947. Ardından iki rengin parlaklığını oranlarsınız:

Oran = (L_açık + 0.05) / (L_koyu + 0.05)

Soft White #F5F3EF için L = 0.8993. Buradan:

(0.8993 + 0.05) / (0.0947 + 0.05) = 6.56

Yani bu kırmızı zemin üzerine bu beyaz yazı 6.56:1 oranındadır — gövde metni için fazlasıyla yeterli.

Eşikler: hangi oran nerede yeterli

Kullanım	AA (asgari)	AAA (yüksek)
Normal metin (24 px altı)	4.5:1	7:1
Büyük metin (24 px ve üzeri, ya da 18.66 px kalın)	3:1	4.5:1
Arayüz bileşeni sınırı, ikon	3:1	—
Dekoratif öğe, devre dışı buton	Eşik yok	—

Dikkat edilmesi gereken ayrıntı: "büyük metin" eşiği yalnızca punto büyüklüğüne değil, kalınlığa da bağlıdır. 20 px normal bir metin 4.5:1 ister; aynı metin kalınlaştırıldığında da öyle kalır, çünkü 18.66 px eşiği kalın metinler için geçerlidir ve 20 px zaten üzerindedir. Sınıra yakın değerlerde her zaman katı olanı seçin.

Gerçek bir palet denetimi

Aşağıda siyah–kırmızı–beyaz bir kurumsal palette hesaplanmış değerler var. Tablo, hangi eşleşmenin nerede kullanılabileceğini doğrudan gösteriyor.

Yazı	Zemin	Oran	Sonuç
#F5F3EF	#070707	18.18:1	Her yerde kullanılır
#F5F3EF	#232323	14.18:1	Her yerde kullanılır
#CFC7BE	#070707	12.05:1	İkincil metin için uygun
#948F89	#232323	4.90:1	Küçük metinde sınırda geçer
#C93A4E	#070707	4.03:1	Yalnızca büyük/kalın metin
#B1122A	#070707	2.87:1	Metin olarak kullanılamaz
#F5F3EF	#B1122A	6.56:1	Buton zemini olarak uygun
#4A4A4A	#070707	2.27:1	Yalnızca çizgi/kenarlık

Tablodan çıkan ders şu: koyu bir marka rengi, koyu zeminde metin rengi olamaz. 2.87:1 değeriyle ana kırmızı, siyah üzerinde okunmaz. Çözüm markadan vazgeçmek değil, renge iki ayrı rol vermektir — birazdan buna geleceğiz.

Bir rengin iki rolü olur

Kurumsal renk çoğu zaman tek bir değer olarak düşünülür. Oysa pratikte iki ayrı işi vardır ve her iş farklı bir tona ihtiyaç duyar:

• Zemin rolü: Butonun, rozetin, vurgu bandının arka planı. Burada koyu ve doygun ton doğrudur; üstüne beyaz yazı gelir ve oran rahatlıkla tutar.
• Yazı rolü: Koyu bir arka plan üzerinde vurgu metni, bağlantı, sayı. Burada açık bir türevi gerekir; ana ton yetersiz kalır.

Bu ayrımı yapmadan koyu temaya geçen projelerde tipik sonuç, tüm vurgu metinlerinin okunmaz hale gelmesidir. Kimlik çalışmasında bu iki tonun ayrı ayrı tanımlanması gerektiğini kimlik tasarımı hataları yazısında dördüncü madde olarak ele almıştık.

Sık yapılan beş teknik hata

1. Saydam renkle ölçmek. rgba(255,255,255,.6) gibi bir değerin gerçek kontrastı, altındaki zemine bağlıdır. Ölçümü birleşmiş (kompozit) renk üzerinden yapın.
2. Görsel üzerindeki metni unutmak. Fotoğraf üstüne yazılan başlık, fotoğrafın en açık bölgesine göre değerlendirilmelidir. Çözüm genellikle metnin altına degrade bir örtü koymaktır.
3. Yer tutucu metni test etmemek. Form alanlarındaki soluk gri yer tutucular çoğu palette 3:1'in altında kalır ve gözden kaçar.
4. Odak halkasını atlamak. Klavyeyle gezinen kullanıcı için odak göstergesi 3:1 eşiğini tutturmalı. Koyu zeminde koyu kırmızı bir odak halkası görünmez.
5. Yalnızca renkle bilgi vermek. "Kırmızı olanlar hatalı" demek, renk körü kullanıcılar için bilgi taşımaz. Renge her zaman bir ikon ya da metin eşlik etmeli.

Paletinizi denetlemek için pratik yöntem

Yeni bir palet kurarken ya da mevcut olanı gözden geçirirken şu sırayı izleyin:

1. Rolleri yazın. Zemin, yüzey, ana metin, ikincil metin, çizgi, vurgu-zemin, vurgu-yazı. Yedi rol çoğu arayüz için yeterlidir.
2. Her role bir değer atayın. Bu aşamada estetik karar verirsiniz.
3. Matrisi kurun. Gerçekte yan yana gelecek her yazı-zemin çiftini hesaplayın. Tüm kombinasyonları değil — yalnızca kullanacaklarınızı.
4. Kalanları düzeltin. Eşiği geçemeyen çift için iki seçeneğiniz var: yazıyı açmak ya da zemini koyulaştırmak. Marka rengini korumak istiyorsanız, o rengi zemin rolüne alıp üzerine beyaz yazın.
5. Ara ton türetin. Paletinizde eşiği geçen bir ara gri yoksa, mevcut iki tonu karıştırarak üretin ve kılavuza ekleyin.
6. Kılavuza yazın. Sadece renk kodlarını değil, hangi rolde kullanılacağını da yazın. Kod tek başına yanlış kullanımı engellemez.

Koyu tema kurarken ek dikkat noktaları

Koyu temada saf siyah zemin üzerine saf beyaz metin teknik olarak en yüksek oranı verir ama uzun okumada yorucudur; kenarlarda titreşim hissi yaratır. Pratikte zemin için tam siyah yerine çok koyu bir nötr, metin için tam beyaz yerine hafif kırık bir beyaz tercih edilir. Yukarıdaki tabloda 18.18:1 çıkan çift tam olarak bu mantıkla seçilmiştir.

İkinci nokta: koyu temada aynı renk açık temaya göre daha parlak algılanır. Açık temada uygun görünen bir doygun vurgu rengi, koyu zeminde göz alabilir. Doygunluğu bir miktar düşürmek genellikle daha rahat bir sonuç verir.

Renk körlüğü: kontrastın ötesindeki katman

Kontrast oranı parlaklık farkını ölçer ama renk ayrımını ölçmez. Bu yüzden iki renk kontrast eşiğini geçtiği halde belirli görme tiplerinde birbirinden ayırt edilemeyebilir.

Toplumun yaklaşık %8'ini oluşturan erkek nüfusta ve %0,5'lik kadın nüfusta görülen renk ayrımı farklılıkları üç ana tipte toplanıyor:

Tip	Etkilenen algı	Karışan çiftler
Deuteranopi	Yeşil duyarlılığı	Yeşil–kırmızı, yeşil–kahve
Protanopi	Kırmızı duyarlılığı	Kırmızı–siyah, kırmızı–yeşil
Tritanopi	Mavi duyarlılığı	Mavi–yeşil, sarı–pembe

Pratikteki en yaygın hata, durum bilgisini yalnızca yeşil-kırmızı karşıtlığıyla vermek: "yeşil onaylandı, kırmızı reddedildi". Deuteranopisi olan bir kullanıcı için bu iki renk benzer bir kahverengi tonuna düşer ve bilgi tamamen kaybolur.

Çözüm: renge ikinci bir işaret eşlik etsin

• İkon ekleyin. Onay için tik, hata için ünlem. Renk kalksa bile bilgi ayakta kalır.
• Metin kullanın. Rozetin içinde "Onaylandı" yazması, rengin taşıdığı yükü paylaşır.
• Biçim değiştirin. Grafiklerde çizgi deseni (kesikli, noktalı, düz) renkten bağımsız ayrım sağlar.
• Konum kullanın. Tablolarda durum sütununun her zaman aynı yerde olması, taramayı renkten bağımsız kılar.

Test etmenin en hızlı yolu: tasarımı gri tonlamaya çevirin. Bilgi hâlâ okunabiliyorsa renk körlüğü açısından da güvendesiniz. Bu tek test, üç tipin tamamını büyük ölçüde kapsar.

Rol tabanlı palet: uygulamalı kurulum

Yazının başında rol kavramına değinmiştik. Şimdi sıfırdan bir palet kuralım ve her adımda kontrolü gösterelim.

Adım 1 — Rolleri listeleyin

Rol	Görevi	Tabi olduğu eşik
Zemin	Sayfa arka planı	—
Yüzey	Kart, panel arka planı	—
Ana metin	Gövde yazısı	4.5:1
İkincil metin	Açıklama, etiket	4.5:1
Üçüncül metin	Dipnot, meta bilgi	4.5:1
Çizgi	Ayraç, kenarlık	3:1 (bileşen sınırıysa)
Vurgu zemini	Buton, rozet arka planı	Üstündeki metinle 4.5:1
Vurgu metni	Bağlantı, öne çıkan sayı	4.5:1 veya 3:1 (büyükse)

Adım 2 — Değer atayın ve matrisi kurun

Yalnızca gerçekte yan yana gelecek çiftleri hesaplayın. Tüm kombinasyonları test etmek gereksiz emek üretir; on renk için 45 çift çıkar ama bunların çoğu hiç bir araya gelmez.

Pratik yaklaşım: her metin rolünü, üzerinde görüneceği her zemin rolüyle eşleştirin. Üç metin ve iki zemin varsa altı hesap yeterlidir.

Adım 3 — Eşiği geçemeyeni düzeltin

Üç seçeneğiniz var ve sırayla denenmeli:

1. Metni açın veya koyulaştırın. En az müdahaleli çözüm; marka rengine dokunmaz.
2. Zemini değiştirin. Kart arka planını bir ton koyulaştırmak, üzerindeki tüm metinleri birden kurtarır.
3. Rolü değiştirin. Marka rengi metin olarak yetmiyorsa, onu zemin rolüne alın ve üzerine beyaz yazın.

Üçüncü seçenek en çok gözden kaçanı ama genellikle en doğrusu. Koyu ve doygun bir marka rengi, metin olarak zorlanır ama zemin olarak mükemmel çalışır.

Adım 4 — Ara ton türetin

Paletinizde eşiği geçen bir ara ton yoksa, mevcut iki tondan türetin. Yöntem: iki rengi kademeli olarak karıştırıp her adımda kontrastı ölçün, eşiği ilk geçen değeri palete ekleyin.

Bu türetilmiş tonlar "palete sonradan eklenen renk" değil, paletin eksik kalmış basamaklarıdır. Kılavuza rolüyle birlikte yazıldığında marka bütünlüğünü bozmazlar.

Odak göstergesi: en çok atlanan erişilebilirlik öğesi

Klavyeyle gezinen kullanıcılar için odak halkası, farenin imlecine denk gelen tek yönelim aracıdır. Buna rağmen tasarımların çoğunda ya hiç tanımlanmaz ya da estetik kaygıyla kaldırılır.

İşleyen bir odak göstergesinin nitelikleri:

• Komşu renklerle en az 3:1 kontrast
• En az 2 piksel kalınlık
• Öğenin dışında bir boşlukla ayrılmış (içine gömülmemiş)
• Koyu ve açık zeminde de görünen bir renk

Son madde için pratik çözüm: odak halkasını iki katmanlı yapmak — içte açık, dışta koyu bir çizgi. Bu yapı her zeminde görünür kalır ve tek renkli halkanın zemine karışma riskini ortadan kaldırır.

Marka rengini odak halkası olarak kullanmak cazip gelir ama koyu marka renkleri koyu zeminde yeterli kontrast vermez. Bu durumda rengin açık türevini kullanın.

Denetimi otomatikleştirmek

Palet kurulduktan sonra kontrolün her tasarım değişikliğinde elle tekrarlanması sürdürülebilir değil. İki pratik otomasyon var:

Tasarım aşamasında: Renk değerlerini token olarak tanımlayın ve token isimlerine rolü yazın (metin-ana, zemin-yuzey, vurgu-zemin). Rol isimlendirmesi, yanlış eşleştirmeyi baştan zorlaştırır — kimse "zemin" tokenını metin rengi olarak kullanmaz.

Geliştirme aşamasında: Sayfa üzerindeki tüm metin öğelerini tarayıp gerçek zeminine karşı kontrastını hesaplayan bir denetim betiği çalıştırın. Bu yöntem, tasarımda öngörülmemiş eşleşmeleri de yakalar — örneğin bir kartın içine yerleştirilen bir rozetin, kart zemini yüzünden eşiği kaçırması.

Otomatik denetimin yakaladığı en yaygın üç durum: form yer tutucuları, devre dışı öğeler ve fotoğraf üzerine yerleştirilmiş başlıklar. Üçü de tasarım dosyasında fark edilmesi zor, canlı sayfada belirgin sorunlardır.

Basılı işlerde durum farklı

Buraya kadarki eşikler ekran içindi. Baskıda mantık değişir çünkü ışık kaynağı ekran değil ortamdır.

Baskıda dikkat edilmesi gerekenler:

• Kâğıt tonu. Krem kâğıt üzerindeki beyaz alanlar aslında krem olur; kontrast hesabı kâğıdın gerçek tonuna göre yapılmalı.
• Mürekkep yayılması. Koyu zemin üzerine ince beyaz yazı, mürekkep yayıldığında incelir ve okunurluğu düşer. Ters kullanımda punto ve kalınlık artırılmalı.
• Selofan etkisi. Mat selofan renkleri bir miktar soluklaştırır; parlak selofan koyulaştırır ve yansıma yaratır.
• Ortam ışığı. Fuar standında ya da dış mekân tabelasında okunacak bir metin, ofis koşullarında yeterli görünen kontrastın üzerine çıkmalıdır.

Pratik kural: basılı işlerde ekran için hesapladığınız eşiğin bir miktar üzerinde çalışın. Ekranda 4.5:1 yeterliyken, dış mekân uygulamalarında 7:1 hedeflemek güvenli bir marj sağlar.

Hızlı başvuru

Günlük kullanımda hatırlanması gereken değerler:

Durum	Gereken oran
Gövde metni	4.5:1
24 px ve üzeri başlık	3:1
18.66 px kalın metin	3:1
Buton kenarı, form sınırı, ikon	3:1
Odak göstergesi	3:1
Dekoratif çizgi, devre dışı öğe	Eşik yok

Tereddütte kaldığınızda katı olanı seçin: 4.5:1 hedeflemek hiçbir zaman yanlış olmaz, 3:1'e güvenmek sınır durumlarda risk taşır.

Sık sorulan sorular

Kontrast oranını elle mi hesaplamak gerekiyor?

Hayır, tarayıcı geliştirici araçları ve çevrimiçi denetleyiciler bunu anında yapar. Formülü bilmek, sonucun neden öyle çıktığını anlamak ve sınırdaki değerlerde doğru kararı vermek için gerekli.

Logomuz eşiği geçmiyorsa değiştirmeli miyiz?

Logolar metin eşiklerine tabi değildir. Ancak logo içindeki metin okunabilirlik açısından önemliyse, küçük ölçekli kullanımlar için ayrı bir versiyon hazırlamak doğru olur.

Devre dışı butonlar için eşik var mı?

Standart, devre dışı bileşenleri kapsam dışında bırakır. Yine de tamamen okunmaz bir devre dışı buton kullanıcıyı şaşırtır; 2.5:1 civarı pratik bir alt sınır olarak iş görür.

Marka rengimiz eşiği geçmiyorsa ne yapmalıyız?

Rengi değiştirmeyin, rolünü değiştirin. Koyu marka rengini zemin olarak kullanıp üzerine beyaz yazın; metin vurgusu için aynı rengin açık bir türevini tanımlayın. İki tonu da kılavuza ekleyin.

Bu kurallar yasal bir zorunluluk mu?

Kamu kurumları ve belirli ölçeğin üzerindeki kuruluşlar için birçok ülkede bağlayıcıdır. Özel sektörde çoğunlukla zorunlu değildir; ancak arama motorları sayfa deneyimi sinyalleri arasında okunabilirliği dolaylı olarak değerlendirir. Teknik tarafın bütününe teknik SEO ve site optimizasyonu sayfasından bakabilirsiniz.

Gradyan zeminde metin kontrastı nasıl ölçülür?

Gradyanın metin altında kalan en açık ve en koyu noktaları ayrı ayrı ölçülür; ikisi de eşiği geçmelidir. Geçmiyorsa metnin altına düz bir katman eklemek en pratik çözümdür.

Marka renklerimiz hiç değişmeden koyu temaya geçebilir miyiz?

Ana renkler değişmez, ancak her renge açık ve koyu türevler eklenmesi gerekir. Bu türevler yeni renk değil, mevcut rengin basamaklarıdır ve kimlik bütünlüğünü bozmaz.

Özet

Kontrast, tasarımın öznel tarafındaki nadir nesnel ölçütlerden biri. Üç adımlık bir hesapla her renk çiftinin uygun olup olmadığını kesin olarak söyleyebilirsiniz — tartışmaya gerek kalmaz.

Paletinizi kurarken tek bir alışkanlık edinin: her renge bir kod değil, bir rol verin. Rol tanımlandığında hangi eşiğe tabi olduğu da belli olur ve yanlış kullanım kendiliğinden azalır. Arayüz katmanında bu sistemi nasıl kurduğumuzu kurumsal web sitesi projelerinde ayrıntılandırıyoruz.

Kontrast hesabının bir palet kararını nasıl değiştirdiğini kendi kimlik çalışmamızda görebilirsiniz: koyu zemin tercihi, metin ve form alanlarının tamamının eşik üzerinden geçirilmesini zorunlu kıldı.