Web Erişilebilirliği 101: Renk Kontrastı ve WCAG

Web erişilebilirliğinin temelleri: WCAG kontrast oranları, göreli parlaklık hesabı ve frontend geliştiriciler için pratik renk kontrastı ipuçları.

#erişilebilirlik#a11y#wcag#renk kontrastı#frontend

Web Erişilebilirliği 101: Renk Kontrastı ve WCAG

Erişilebilirlik (kısaca a11y), bir web sitesini herkesin — görme engelli, renk körü, yaşlı ya da güneş altında telefonuna bakan sıradan bir kullanıcının — sorunsuz kullanabilmesi demektir. İyi haber şu: erişilebilirliğin en etkili adımlarından biri aynı zamanda en basit olanlardan biridir. Yeterli renk kontrastı sağlamak.

Bu yazıda neden önemli olduğundan, WCAG'in koyduğu kontrast oranlarından ve bunları günlük işinize nasıl katacağınızdan bahsedeceğiz.

Erişilebilirlik neden önemli?

Üç güçlü gerekçe var:

Kullanıcılar: Dünya nüfusunun yaklaşık %8'i renk körlüğü yaşıyor, milyonlarca insan da düşük görme keskinliğine sahip. Düşük kontrastlı bir arayüz onlar için okunamaz hale gelir.
Yasal zorunluluk: Avrupa Erişilebilirlik Yasası (EAA) 2025'te yürürlüğe girdi; ABD'de ADA, Türkiye dahil pek çok ülkede kamu kurumları için WCAG uyumu zorunlu hale geliyor.
SEO ve genel kalite: Semantik HTML, anlamlı alt metinleri ve net yapı hem ekran okuyucular hem de arama motorları için faydalıdır. Erişilebilir site genellikle daha hızlı ve daha sağlam bir sitedir.

WCAG kontrast oranları

WCAG (Web Content Accessibility Guidelines), erişilebilirliğin uluslararası standardıdır ve üç uyum seviyesi tanımlar: A, AA ve AAA. Pratikte hedeflemeniz gereken seviye AA'dır.

Kontrast, metin rengi ile arka plan rengi arasındaki parlaklık farkını oran olarak ifade eder. En düşük olası değer 1:1 (aynı renk), en yüksek değer ise siyah-beyaz için 21:1'dir.

AA seviyesi için gereken minimumlar:

Normal metin: en az 4.5:1
Büyük metin (18.66px/14pt kalın veya 24px/18pt normal): en az 3:1
Arayüz bileşenleri ve grafikler (buton kenarları, ikonlar, form çerçeveleri): en az 3:1

AAA seviyesi ise daha katıdır: normal metin için 7:1, büyük metin için 4.5:1. AAA her zaman ulaşılabilir bir hedef değildir; marka renkleriyle çakışabilir. Çoğu proje için AA yeterli ve gerçekçidir.

Kontrast oranı nasıl hesaplanır?

Kontrast oranı, iki rengin göreli parlaklığına (relative luminance) dayanır. Formül şöyle çalışır:

oran = (L1 + 0.05) / (L2 + 0.05)

Burada L1 daha açık rengin, L2 daha koyu rengin göreli parlaklığıdır. Göreli parlaklık ise her renk kanalının (R, G, B) gama düzeltmesi yapılıp insan gözünün yeşile daha duyarlı olduğunu yansıtacak şekilde ağırlıklandırılmasıyla bulunur:

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

Yeşilin katsayısının (0.7152) açık ara en büyük olmasına dikkat edin. Bu yüzden sarımsı-yeşil bir metin beklediğinizden daha "parlak", saf mavi ise daha "koyu" davranır. Hesabı elle yapmak zahmetlidir; bu yüzden bir araç kullanmak en mantıklısı.

İki rengi hızlıca test etmek için Renk Kontrastı Denetleyici aracını kullanabilir, oranı ve AA/AAA durumunu anında görebilirsiniz.

Sadece renge güvenmeyin

Erişilebilirliğin en çok atlanan kuralı: anlamı yalnızca renkle aktarmayın. "Kırmızı alanlar hatalı, yeşiller geçerli" diyen bir form, renk körü bir kullanıcı için tamamen anlamsızdır.

Çözümler basit:

Hata mesajlarına bir ikon ve metin ekleyin ("⚠ Geçersiz e-posta").
Grafiklerde renklerin yanına desen veya etiket koyun.
Linkleri sadece renkle değil, altı çizili ya da kalın yaparak ayırın.

Renk paletinizi tasarlarken farklı tonları denemek için bir Renk Seçici işinizi kolaylaştırır; saydam katmanların gerçek kontrastını öngörmek içinse HEX Opaklık Dönüştürücü ile yarı saydam rengin düz karşılığını hesaplayabilirsiniz.

Pratik a11y ipuçları

Renk kontrastı tek başına yetmez. Şu temel alışkanlıklar arayüzünüzü ciddi şekilde iyileştirir:

Görünür odak (focus) durumları

Klavyeyle gezen kullanıcılar nerede olduklarını görmek zorundadır. outline: none yazıp odak halkasını silmeyin. Bunun yerine net bir stil verin:

:focus-visible {
  outline: 3px solid #1a73e8;
  outline-offset: 2px;
}

:focus-visible sayesinde halka yalnızca klavye kullanımında belirir, fare tıklamasında değil.

Anlamlı `alt` metni

Her bilgilendirici görsele içeriği özetleyen bir alt ekleyin. Tamamen dekoratif görsellerde ise alt="" bırakın ki ekran okuyucu onları atlasın.

Semantik HTML

<div onclick> yerine <button>, başlıklar için <h1>–<h6>, gezinme için <nav> kullanın. Semantik etiketler ekran okuyuculara yapıyı bedavaya anlatır.

Klavye navigasyonu

Tüm etkileşimli öğeler yalnızca Tab, Enter ve Space ile çalışabilmeli. Fareyle erişilen ama klavyeyle erişilemeyen bir menü, erişilebilir değildir.

Kontrastı kontrol etmek için araçlar

Tahmin etmeyin, ölçün. İşinizi kolaylaştıracak birkaç araç:

Tarayıcı DevTools: Chrome ve Firefox'un denetleyicisi, bir metin öğesi seçtiğinizde kontrast oranını ve AA/AAA rozetini doğrudan gösterir.
Renk Kontrastı Denetleyici: İki rengi girip oranı ve uyum seviyesini anında görün.
Renk Dönüştürücü: HEX, RGB ve HSL arasında geçiş yaparak tasarım jetonlarınızı tutarlı tutun.

Daha fazla yardımcı için Frontend araçları koleksiyonuna göz atabilirsiniz.

Özet

Erişilebilirlik bir "ekstra" değil, kaliteli frontend işinin parçasıdır. AA seviyesini hedefleyin: normal metin için 4.5:1, büyük metin ve arayüz öğeleri için 3:1. Anlamı asla yalnızca renge yüklemeyin, odak durumlarını görünür tutun ve semantik HTML yazın. Bu küçük alışkanlıklar sitenizi milyonlarca kullanıcı için kullanılabilir hale getirir — üstelik kimseyi geride bırakmadan.