🎨
← Rehberlere dön

Erişilebilir Renk Kontrastı: Tasarımcılar için WCAG Kılavuzları Açıklaması

· Etiketler: accessibility, wcag, color-contrast, web-design, a11y, inclusive-design

Erişilebilir Renk Kontrastı: WCAG Kılavuzları Açıklaması

Renk kontrastı, web erişilebilirliğinin en önemli yönlerinden biridir. Kullanıcıların içeriğinizi okuyabilmesini, arayüzünüzde gezinebilmesini ve görevlerini tamamlayabilmesini doğrudan etkiler. Yine de kontrast hataları, web'deki en yaygın erişilebilirlik sorunları arasında kalmaya devam ediyor — genellikle tasarımcılar oranları doğrulamadan kendi ekranlarında iyi görünen renkler seçtikleri için.

Bu rehber, WCAG renk kontrast gereksinimleri, bunları nasıl karşılayacağınız ve görsel kaliteden ödün vermeden erişilebilir arayüzlerin nasıl tasarlanacağı hakkında bilmeniz gereken her şeyi açıklar.

Renk Kontrast Oranı Nedir?

Renk kontrastı, iki renk arasındaki algılanan parlaklık farkının bir ölçüsüdür — tipik olarak ön plan (metin) ve arka plan. Kontrast, 1:1 (aynı renkler, görünmez metin) ile 21:1 (beyaz arka plan üzerinde siyah metin, mümkün olan maksimum) arasında değişen bir oran olarak ifade edilir.

Kontrast oranı, insan gözünün farklı ışık dalga boylarını nasıl algıladığını hesaba katan göreli parlaklık kullanılarak hesaplanır. Formül şöyledir:

Kontrast Oranı = (L1 + 0,05) / (L2 + 0,05)

Burada L1 daha açık rengin göreli parlaklığı ve L2 daha koyu rengin göreli parlaklığıdır. İnsan gözü yeşil ışığa kırmızı veya maviden daha duyarlıdır, bu nedenle parlaklık hesaplaması kanalları farklı şekilde ağırlıklandırır.

Bunu manuel olarak hesaplamanız gerekmez. Renk dönüştürücümüz de dahil olmak üzere her kontrast denetleme aracı bunu anında yapar.

WCAG Kontrast Gereksinimleri

Web İçeriği Erişilebilirlik Kılavuzları (WCAG), üç uyumluluk seviyesi tanımlar: A, AA ve AAA. Renk kontrast gereksinimleri AA ve AAA seviyelerinde geçerlidir.

WCAG AA Seviyesi (Önerilen Minimum)

AA, çoğu web sitesi için minimum standarttır ve birçok yargı bölgesinde yasal olarak zorunludur (Avrupa Erişilebilirlik Yasası ve ABD, Kanada ve Avustralya'daki erişilebilirlik düzenlemeleri dahil).

| Metin Kategorisi | Minimum Oran | Beyaz Üzerinde Uyumlu Gri Örneği | |---------------|--------------|-------------------------------------| | Normal metin (18px / 14px kalın altı) | 4,5:1 | Beyaz üzerinde #767676 | | Büyük metin (18px+ kalın veya 24px+ normal) | 3:1 | Beyaz üzerinde #9A9A9A | | Kullanıcı arayüzü bileşenleri (kenarlıklar, simgeler, form alanları) | 3:1 | Bileşen kenarlıkları, odak göstergeleri | | Dekoratif olmayan grafikler | 3:1 | Grafikler, infografikler, simgeler |

WCAG AAA Seviyesi (Gelişmiş)

AAA, özellikle düşük görme veya kontrast hassasiyeti sorunları olan kullanıcılar için daha iyi okunabilirlik sağlayan daha yüksek bir standarttır.

| Metin Kategorisi | Minimum Oran | Beyaz Üzerinde Uyumlu Gri Örneği | |---------------|--------------|-------------------------------------| | Normal metin | 7:1 | Beyaz üzerinde #595959 | | Büyük metin | 4,5:1 | Beyaz üzerinde #777777 |

AAA, çoğu düzenlemeye uyumluluk için gerekli değildir, ancak yaşlı yetişkinlere veya görme engelli kullanıcılara hizmet veren siteler için önerilir.

Bu Gereksinimler Neleri Kapsar?

WCAG kontrast gereksinimleri şunlar için geçerlidir:

  • Metin — Tüm gövde metni, başlıklar, etiketler, altyazılar ve bağlantı metni
  • Görsellerdeki metin — Bir görselin parçası olan metin (dekoratif metin hariç)
  • Kullanıcı arayüzü bileşenleri — Butonlar, form alanları, kaydırıcılar, açma/kapama düğmeleri ve bunların kenarlıkları
  • Simgeler — Bilgi ileten temel simgeler (dekoratif olmayan)
  • Odak göstergeleri — Klavye odak ana hatları, bitişik arka plana karşı 3:1 kontrasta sahip olmalıdır

Bu Gereksinimler Neleri Kapsamaz?

  • Logolar — Marka logosunun veya şirket adının parçası olan metin
  • Dekoratif öğeler — İşlevsel amacı olmayan tamamen dekoratif görseller
  • Etkin olmayan kullanıcı arayüzü — Devre dışı butonlar veya form kontrolleri (yine de algılanabilir olmalıdırlar)
  • Duyusal metin — Metnin zorunlu olmadığı bir arka plan görselinin parçası olan metin

Yaygın Kontrast Hataları ve Nasıl Düzeltilir?

1. Açık Gri Metin

Beyaz arka plan üzerinde açık gri metin, açık ara en yaygın kontrast hatasıdır. Beyaz üzerinde #CCCCCC gibi bir ton yalnızca 1,6:1 kontrast oranına sahiptir — 4,5:1 minimumun çok altında.

Düzeltme: Gri metninizi koyulaştırın. Beyaz üzerinde gövde metni için en az #595959 (AAA uyumlu) hedefleyin. #767676 (14px metin için AA minimumu) bile çoğu "ince" gri seçiminden belirgin şekilde daha koyudur.

2. Gövde Metni İçin Kullanılan Marka Renkleri

Marka renkleri metin olarak uygulandığında genellikle çok açıktır. Beyaz üzerinde #3366CC gibi orta bir mavi yaklaşık 3,5:1 orana sahiptir — 4,5:1 standardının altında.

Düzeltme: Marka renklerini başlıklar ve vurgular için saklayın. Gövde metni için siyaha yakın (#1A1A1A ile #333333 arası) kullanın. Renkli herhangi bir metnin oranı karşıladığını kontrol edin.

3. Yalnızca Renkle Gösterilen Bağlantılar

Gövde metninden yalnızca renkle ayrılan bağlantılar, WCAG Başarı Kriteri 1.4.1'i (Renk Kullanımı) karşılamaz. Renk körlüğü olan kullanıcılar farkı algılayamayabilir.

Düzeltme: Bağlantılar için her zaman renk dışı bir gösterge sağlayın. Yaygın yaklaşımlar:

  • Bağlantıların altını çizin (en sağlam çözüm)
  • Bir simge ekleyin (ok veya harici bağlantı sembolü)
  • Satır içi bağlantılar için kalın ağırlık kullanın
  • Bir arka plan vurgulaması sağlayın

4. Arka Plan Görselleri Üzerindeki Metin

Fotoğraflar veya degradeler üzerine yerleştirilen metin, tüm görsel boyunca nadiren yeterli kontrasta sahiptir.

Düzeltme:

  • Görsel ve metin arasına yarı saydam bir katman ekleyin
  • İnce bir ana hat efekti için text-shadow kullanın
  • Metni düz renkli bir kutu katmanına yerleştirin
  • Metnin arkasında görünebilecek görselin herhangi bir kısmının minimum oranı karşıladığından emin olun

5. Düşük Kontrastlı Yer Tutucu Metin

Beyaz üzerinde #BDBDBD (1,9:1) gibi form yer tutucuları yaygındır ancak kontrast gereksinimlerini karşılamaz.

Düzeltme: Yer tutucuları en az #757575 (4,6:1) seviyesine koyulaştırın. Daha da iyisi, yer tutucular yerine etiketler kullanın — etiketler her zaman görünürdür ve kullanıcılar yazmaya başladığında asla kaybolmaz.

Renk Kontrastını Test Etme

Otomatik Araçlar

  • Tarayıcı Geliştirici Araçları — Chrome ve Firefox Geliştirici Araçları, yerleşik kontrast denetimine sahiptir. Bir öğeyi inceleyin ve "Stiller" veya "Erişilebilirlik" panelinde kontrast oranını arayın.
  • Çevrimiçi kontrast denetleyicileri — İki renk girin ve AA ve AAA için anında geçti/kaldı durumu alın.
  • Tasarım aracı eklentileri — Stark, A11y ve Contrast; Figma, Sketch ve Adobe XD için mevcuttur. Bunlar, tasarım dosyalarınızda doğrudan kontrastı kontrol eder.
  • Lighthouse — Google'ın Lighthouse denetimi, kontrast hatalarını otomatik olarak raporlar.

Manuel Test

Otomatik araçlar yalnızca metin kontrastını kontrol edebilir. Eksiksiz bir erişilebilirlik incelemesi için:

  1. Monitörünüzü kapatın — Tüm arayüz öğelerini ayırt edebiliyor musunuz?
  2. Gri tonlama filtresi kullanın — Bilgi renk olmadan hala doğru şekilde iletiliyor mu?
  3. Renk körlüğü simülatörü ile test edin — Colorblindly (Chrome eklentisi) gibi araçlar, sitenizin çeşitli renk görme eksikliği türlerine sahip kullanıcılara nasıl göründüğünü gösterir.
  4. Doğrudan güneş ışığında test edin — Yüksek ortam ışığı, algılanan kontrastı azaltır.

Renk Körlüğü için Tasarım

Yaklaşık 12 erkekten 1'i (%8) ve 200 kadından 1'i (%0,5) bir tür renk görme eksikliğine sahiptir. En yaygın türler şunlardır:

  • Döteranopi (yeşil-kör, erkeklerin %6'sı) — Kırmızıyı yeşilden ayırt etmede zorluk
  • Protanopi (kırmızı-kör, erkeklerin %2'si) — Kırmızı daha koyu görünür, yeşille karıştırma
  • Tritanopi (mavi-kör, nadir) — Maviyi sarıdan ayırt etmede zorluk

Tasarım Stratejileri

  1. Asla yalnızca renge güvenmeyin — Renk aracılığıyla iletilen herhangi bir bilgi (hata durumları, durum göstergeleri, grafik kategorileri) ayrıca metin, simgeler, desenler veya konum aracılığıyla da iletilmelidir.

  2. Sorunlu kombinasyonlardan kaçının — Kırmızı/yeşil, mavi/mor, yeşil/kahverengi ve yeşil/mavi en yaygın karıştırılan çiftlerdir.

  3. Desenler ve dokular kullanın — Grafiklerde ve çizelgelerde, renge ek olarak noktalı çizgiler, taralı dolgular ve farklı şekiller kullanın.

  4. Doğrudan etiket ekleyin — Veri görselleştirmelerinde, renk kodlu bir açıklamaya güvenmek yerine veri noktalarını doğrudan etiketleyin.

  5. Simülatörlerle test edin — Her tasarım, yayınlanmadan önce döteranopi ve protanopi simülatörleriyle test edilmelidir.

Erişilebilir Bir Renk Sistemi Oluşturma

Adım 1: Erişilebilir Temel Renkler Seçin

Doğal olarak iyi kontrast sağlayan renklerle başlayın. Koyu maviler, koyu yeşiller ve zengin kırmızılar, uygun şekilde eşleştirildiğinde hepsi erişilebilir temel renkler olabilir.

Adım 2: Uyumlu Bir Ölçek Oluşturun

Her adımın hem daha açık hem de daha koyu komşularıyla yeterli kontrastı koruduğu bir açıklık ölçeği oluşturun. OKLCH bunun için idealdir çünkü açıklık kanalı algısal olarak tekdüzedir:

--text-primary: oklch(10% 0.01 0);    /* Siyaha yakın, beyaz üzerinde ~19:1 */
--text-secondary: oklch(35% 0.02 0);  /* Koyu gri, beyaz üzerinde ~9:1 */
--text-muted: oklch(45% 0.02 0);      /* Orta gri, beyaz üzerinde ~5,5:1 */
--text-disabled: oklch(60% 0.02 0);   /* Açık gri, beyaz üzerinde ~3:1 */

Adım 3: Her Kombinasyonu Doğrulayın

Tasarım sisteminizdeki her ön plan-arka plan çifti doğrulanmalıdır:

  • Yüzey üzerinde birincil metin — Minimum 4,5:1 (7:1 önerilir)
  • Yüzey üzerinde ikincil metin — Minimum 4,5:1
  • Yüzey üzerinde soluk metin — Minimum 3:1 (yalnızca zorunlu olmayan metin için)
  • Etkileşimli öğeler — Durumlar için minimum 3:1
  • Odak göstergeleri — Minimum 3:1

Geliştiriciler için Pratik Kontrol Listesi

  • [ ] Tüm gövde metni 4,5:1 kontrast oranını karşılar veya aşar
  • [ ] Tüm büyük metinler 3:1 kontrast oranını karşılar veya aşar
  • [ ] Bağlantılar renk dışı bir göstergeye sahiptir (alt çizgi, simge veya ağırlık değişikliği)
  • [ ] Form girişleri görünür kenarlıklara veya arka planlara sahiptir (sadece yer tutucu metin değil)
  • [ ] Odak göstergeleri, bitişik arka planlara karşı 3:1 kontrasta sahiptir
  • [ ] Hata durumları, rengi metin veya simgelerle birleştirir
  • [ ] Grafikler ve çizelgeler, renge ek olarak desenler veya doğrudan etiketler kullanır
  • [ ] Yer tutucu metin 4,5:1 minimumu karşılar
  • [ ] Devre dışı öğeler görsel olarak ayırt edilebilir ancak yine de algılanabilirdir
  • [ ] Tasarım, renk körlüğü simülatörleriyle test edilmiştir

Sonuç

Erişilebilir renk kontrastı isteğe bağlı değildir — kapsayıcı web tasarımının temel bir gereksinimidir. WCAG AA standartlarını karşılamak, içeriğinizi görme engelli kullanıcılar için erişilebilir kılar, herkes için okunabilirliği artırır ve genellikle daha temiz, daha bilinçli tasarımlarla sonuçlanır. İş akışınızda kontrast denetimiyle başlayın, rengi diğer görsel göstergelerin tamamlayıcısı olarak kullanın — ikamesi olarak değil — ve tasarımlarınızı her zaman erişilebilirlik merceğinden test edin.

WCAG AA ve AAA standartlarına göre renk kombinasyonlarınızı doğrulamak için dahili kontrast denetimi özellikli ücretsiz çevrimiçi renk dönüştürücümüzü kullanın.