Renk kontrast oranı nedir ve neden ölçülür?
Kontrast oranı, iki rengin parlaklığı arasındaki farkı 1:1 ile 21:1 arasında tek bir sayıya çeviren ölçüdür. Aynı iki renk 1:1 verir; saf siyah ile saf beyaz ise ulaşılabilecek en yüksek oran olan 21:1'i verir. Bir sitenin okunabilir olup olmadığı çoğu zaman "güzel görünüyor mu?" sorusuna bırakılır. Oysa tasarım programında şık duran açık gri bir yazı; güneş altında telefon kullanan, ekran parlaklığını kısmış, gözleri yorulmuş ya da görme keskinliği azalmış birinin gözünde zeminle birlikte silinip gider. Web İçeriği Erişilebilirlik Yönergeleri (WCAG) bu yüzden metin ile zemin arasında asgari bir oran şart koşar. Bu sayfa aynı formülü kullanır: iki rengi girersiniz, oran, geçti ya da kaldı sonuçları ve gerekirse düzeltme önerisi anında ekrana gelir.
Nasıl kullanılır?
- Renkleri girin. Ön plan (yazı) ve arka plan için renk seçiciye tıklayın ya da HEX kodunu yazın. Üç haneli kısa yazım (#fff) de kabul edilir, # işareti zorunlu değildir.
- Oranı ve rozetleri okuyun. Büyük rakam kontrast oranıdır. Yanındaki beş rozet AA ve AAA düzeylerinin normal ve büyük metin için geçip geçmediğini, arayüz bileşeni eşiğini ayrıca gösterir.
- Önizlemeye bakın. Başlık, paragraf, bağlantı ve düğme örnekleri seçtiğiniz renklerle çizilir; sayı kadar gözünüzün de onayı önemlidir.
- Gerekirse düzeltin. "Düzelt önerisi" bölümü, eşiği geçen en yakın tonu bulur. "Uygula" ile renk yerine yazılır; hangi rengin ayarlanacağını (yazı ya da zemin) siz seçersiniz.
- Paylaşın. Adres çubuğundaki bağlantı renk çiftini taşır. Bağlantıyı kopyalayıp ekip arkadaşınıza ya da müşterinize gönderebilirsiniz; tıkladığında aynı renkleri görür.
WCAG eşikleri: AA ve AAA ne demek?
WCAG üç uyum düzeyi tanımlar: A, AA ve AAA. Metin kontrastı için A düzeyinde bir sayısal eşik yoktur; pratikte hedeflenen düzey AA'dır ve birçok kurum ile ihale şartnamesi AA uyumunu ister. Eşikler şöyledir:
- AA, normal metin: en az 4,5:1. Gövde metni, menüler, form etiketleri ve çoğu yazı bu gruptadır.
- AA, büyük metin: en az 3:1. Büyük metin, 24 piksel (18 punto) ve üstü yazıyı ya da kalın yazıda yaklaşık 18,7 piksel (14 punto) ve üstünü kapsar.
- AAA, normal metin: en az 7:1. Daha zor ama daha kapsayıcı bir hedeftir; düşük görme için özellikle değerlidir.
- AAA, büyük metin: en az 4,5:1.
- Arayüz bileşenleri ve grafik nesneler: en az 3:1 (WCAG 2.1, madde 1.4.11). Düğme ya da giriş alanı kenarlığı, grafik çizgileri ve anlam taşıyan simgeler için geçerlidir.
Logolar, salt süsleme amaçlı öğeler ve devre dışı (disabled) denetimler bu eşiklerin dışında tutulur. Ancak yer tutucu (placeholder) metni ya da bilgi taşıyan bir simge muaf değildir; kullanıcı onu okuyabilmelidir. Pratik bir hatırlatma: beyaz zeminde AA'yı geçen en açık gri #767676'dır (oran 4,54:1); bundan daha açık her gri normal metinde kalır.
Kontrast oranı nasıl hesaplanır?
Hesap iki adımdır. Önce her renk için "göreli parlaklık" bulunur. Kırmızı, yeşil ve mavi kanal 0–255 aralığından 0–1 aralığına çevrilir, sRGB'nin gama eğrisi geri alınarak doğrusal ışık değerine dönüştürülür ve kanallar insan gözünün duyarlılığına göre ağırlıklandırılıp toplanır: L = 0,2126 × R + 0,7152 × G + 0,0722 × B. Yeşil ağırlığın büyük bölümünü taşır; mavi çok az katkı verir. Bu yüzden saf mavi (#0000ff) beyaz zeminde 8,59:1 gibi yüksek bir oran verirken saf yeşil (#00ff00) beyaz üzerinde yaklaşık 1,37:1 ile okunmaz.
İkinci adımda açık rengin parlaklığına 0,05 eklenir, koyu rengin parlaklığına da 0,05 eklenir ve ikisi birbirine bölünür: oran = (L1 + 0,05) / (L2 + 0,05). Yani hangi rengin ön planda olduğu fark etmez; yazıyı açık, zemini koyu da yapsanız sonuç aynıdır. Araç bu hesabı bire bir uygular ve eşik kararını yuvarlanmamış değer üzerinden verir. Örneğin gerçek oranı 4,499 olan bir çift ekranda "4,50" diye yuvarlanıp yanlışlıkla geçmiş görünmez; bu durumda araç üç ondalık gösterir ve kaldığını belirtir.
Düşük kontrastı düzeltmenin yolları
Kontrastı artırmanın üç temel yolu vardır: yazıyı koyulaştırmak, zemini açmak ya da ikisini birlikte yapmak. Marka renginiz değişmeyecekse genellikle yazıyı ya da düğme zeminini aynı tonun biraz koyusuna çekmek yeterlidir. Düzelt önerisi bunu otomatik yapar: rengin HSL gösterimindeki ton ve doygunluğunu sabit tutar, açıklığı adım adım artırıp azaltır ve eşiği ilk geçen tonu bulur. Hem açık hem koyu yönde arar ve markanızın görünümünü en az bozan, yani açıklıkta en küçük değişimi gerektiren sonucu önerir.
Bazı çiftlerde tek renkle çözüm bulunamaz. Orta tonda bir gri zeminde, yalnızca yazıyı değiştirerek AAA'ya ulaşmak mümkün değildir; çünkü siyah da beyaz da yeterli farkı vermez. Araç bu durumda bunu açıkça söyler ve diğer rengi de ayarlamanızı önerir. Fotoğraf ya da gradyan üzerindeki yazılarda en güvenli yol yazının arkasına yarı saydam bir koyu şerit koymak ve kontrastı o şeritle ölçmektir.
Renk körlüğü simülasyonu ne işe yarar?
Erkeklerin yaklaşık yüzde 8'i ve kadınların yüzde 0,5'i kırmızı ile yeşili ayırt etmekte zorlanır (Kuzey Avrupa kökenli topluluklarda yapılan ölçümler; oran bölgeye göre değişir). Protanopide kırmızıya duyarlı koni, döteranopide yeşile duyarlı koni çalışmaz; tritanopi ise mavi-sarı ekseninde ve çok daha nadirdir. Kırmızı ile yeşili tek başına "hata" ve "başarılı" göstergesi olarak kullanan bir arayüz bu kullanıcılar için anlamsız hâle gelebilir. Simülasyon bölümü, renk çiftinizin her görme türünde nasıl göründüğünü ve oranın ne olduğunu gösterir. Oran belirgin biçimde düşüyorsa rengin yanına simge, metin ya da desen eklemek iyi bir güvencedir. Renk tek başına anlam taşımamalıdır; WCAG'in 1.4.1 maddesi tam olarak bunu söyler.
Tasarım ve geliştirme ekipleri için pratik ipuçları
- Düğme metni ile düğme zeminini, bağlantı rengi ile çevresindeki gövde metnini ve form kenarlığı ile sayfa zeminini ayrı ayrı ölçün. En sık hata, "ikincil" metinlerin (tarih, yardım metni, yer tutucu) çok açık griyle yazılmasıdır.
- Koyu tema ayrı bir tasarım işidir. Açık temada geçen bir renk çifti, koyu temada başka renklerle yeniden doğrulanmalıdır.
- Marka paletiniz için kontrast tablosu çıkarın: hangi renk hangi zeminde hangi metin boyutuyla kullanılabilir, bir kez belgeleyin. Bu sayfanın "Hazır renk çiftleri" tablosu böyle bir tablonun nasıl görüneceğine örnektir.
- Odak (focus) halkasının da en az 3:1 kontrastı olmalıdır; klavyeyle gezinen kullanıcı nerede olduğunu görebilmelidir.
- Sonucu yalnızca sayıya bırakmayın. Çok ince fontlarda ya da küçük boyutlarda 4,5:1 bile yorucu olabilir; önizlemeye bakın.
Neden Bilişim Ajans aracı?
- Veri göndermez. Tüm hesap tarayıcınızda yapılır; renk kodlarınız hiçbir sunucuya gitmez. Sayfa yüklendikten sonra internet bağlantısı olmadan da çalışır.
- Yalnızca sayı değil, çözüm de verir. Kaldıysa en yakın geçen tonu bulur ve tek tıkla uygular.
- Paylaşması kolay. Renk çifti bağlantıya yazılır; hesap makinesine yeniden girmeye gerek kalmaz.
- Gerçekten ücretsiz. Kayıt, sınır ya da gizli paket yoktur.
Sık sorulan sorular
4,5:1 kontrast oranı ne anlama gelir?
WCAG'de normal boyutlu metin için AA düzeyinin alt sınırıdır. Oran, yazı ile zeminin göreli parlaklıklarından (L1 + 0,05) / (L2 + 0,05) formülüyle bulunur. 4,5:1 ve üzeri, çoğu kullanıcı için rahat okunabilir demektir; altındaki değerler düşük görme, yorgun göz ya da parlak ortamda okumayı zorlaştırır.
AA ile AAA arasındaki fark nedir?
AA, çoğu yasal düzenlemenin ve kurumsal şartnamenin istediği makul düzeydir: normal metinde 4,5:1, büyük metinde 3:1. AAA daha sıkıdır: normal metinde 7:1, büyük metinde 4,5:1. Her sitenin her bölümünü AAA yapmak genellikle zordur; WCAG de bunu genel bir zorunluluk olarak önermez. Uzun metinlerin ve kritik bilgilerin AAA'ya yaklaşması ise iyi bir hedeftir.
Hangi metin "büyük metin" sayılır?
WCAG'e göre 18 punto (24 CSS pikseli) ve üzeri normal kalınlıktaki yazı ya da 14 punto (yaklaşık 18,7 piksel) ve üzeri kalın yazı büyük metindir. Bu ölçülerin altındaki her şey normal metindir. Tarayıcıda 16 piksellik gövde metni normal metin sayılır.
Logo, süs öğesi ve devre dışı düğmeler için kontrast gerekir mi?
Logolar ve salt süsleme amaçlı öğeler ile devre dışı bırakılmış denetimler metin kontrastı eşiklerinin dışındadır. Buna karşılık bilgi taşıyan simgeler, grafik çizgileri, form alanı kenarlıkları ve yer tutucu metinler muaf değildir. Bir şeyi anlamak için görmek gerekiyorsa kontrastı olmalıdır.
Düğme ve form kenarlığı için kaç oran gerekir?
WCAG 2.1 ile gelen 1.4.11 maddesi, arayüz bileşenlerinin durumunu ve sınırını anlamaya yarayan görsel öğeler için bitişik renklere karşı en az 3:1 ister. Yani bir giriş alanının kenarlığı ya da düğmenin zemini, sayfa zeminine göre 3:1'i geçmelidir. Araçtaki "Arayüz bileşeni ve grafik" rozeti bunu gösterir.
Düzelt önerisi rengimi çok değiştirir mi?
Araç ton ve doygunluğu sabit tutar, yalnızca açıklığı değiştirir ve eşiği geçen en yakın tonu önerir. Sonuç, marka renginizin biraz daha koyu ya da açık hâli olur. Yine de öneriyi önizlemede kontrol edin ve gerekirse hangi rengi ayarlayacağınızı (yazı ya da zemin) değiştirin.
Renk körlüğü simülasyonu ne kadar doğrudur?
Simülasyon, Machado ve arkadaşlarının 2009'da yayımladığı fizyolojik modele dayanan matrisleri doğrusal RGB üzerinde uygular ve tam (şiddeti 1,0) eksiklik varsayar. Gerçekte birçok kişi kısmi renk körlüğüne sahiptir ve ekran ayarları sonucu etkiler. Bu yüzden simülasyonu kesin bir ölçüm değil, risk göstergesi olarak kullanın.
Girdiğim renkler bir yere gönderiliyor mu? Bağlantıdaki ?fg= ne işe yarar?
Hayır. Hesap tamamen tarayıcınızda yapılır, hiçbir ağ isteği oluşmaz. Adres çubuğundaki ?fg=...&bg=... parametreleri yalnızca bağlantıyı paylaştığınızda alıcının aynı renkleri görmesi içindir; sayfa bunları kendi tarayıcınızda okur.
Resim ya da gradyan üzerindeki yazının kontrastını nasıl ölçerim?
WCAG, arka planın değiştiği alanlarda en kötü durumu esas almanızı önerir. Yazının altında kalan en açık ve en koyu noktalar için ayrı ölçüm yapın; ya da yazının arkasına tek renkli, yarı saydam bir şerit koyup kontrastı o renkle hesaplayın. Resimden renk almak için Resimden Renk Paleti aracındaki damlalığı kullanabilirsiniz.
İlgili araçlar
Erişilebilir ve hızlı web siteleri için Bilişim Ajans ekibi yardımcı olur. Bu araç bilgilendirme amaçlıdır; resmî bir erişilebilirlik denetimi yerine geçmez.