Kontrast Neden Önemlidir

Dünya genelinde yaklaşık 300 milyon kişi bir tür renk görme bozukluğuna sahiptir. İyi kontrastla tasarlamak yalnızca estetik bir tercih değil — birçok bölgede yasal bir gerekliliktir. Referans standart, iki ana düzeyi tanımlayan WCAG 2.1'dir:

  • AA Düzeyi: Normal metin için 4,5:1 ve büyük metin (18px veya 14px kalın) için 3:1 kontrast oranı.
  • AAA Düzeyi: Normal metin için 7:1.

Yaygın Hatalar

En sık karşılaşılanlar: beyaz üzerine açık gri (1,5:1 kadar düşük olabilir), görsel olarak okunabilir gibi görünen ancak AA'yı geçemeyen renkli düğmelerdeki beyaz metin ve açık modda geçip karanlık modda başarısız olan renkler.

Pratik İş Akışı

  1. Arka plan rengini alın. Color Picker Camera: HEX RGB'yi açın, kamerayı yüzeye yöneltin ve tek dokunuşla HEX değerini alın. Uygulama aynı anda HSL'yi de gösterir.
  2. Metin rengini aynı şekilde alın.
  3. İkiliyi bir kontrast denetleyicisinde kontrol edin — WebAIM Contrast Checker, DevTools'daki Erişilebilirlik paneli veya Figma'daki Contrast eklentisi gibi.
  4. Oran geçene kadar HSL'de parlaklığı ayarlayın. H ve S'yi koruyarak L'yi düşürün; rengin görsel kimliğini değiştirmeden onu karartın.

HSL Neden Kontrast Ayarı İçin İdealdir

RGB ve HEX, parlaklık üzerinde sezgisel kontrol sağlamaz. HSL, ton, doygunluk ve parlaklığı birbirinden ayırır. Color Picker Camera: HEX RGB, HEX, RGB, HSL ve CMYK'yı aynı anda gösterir — manuel dönüştürme gerekmez.

Gerçek Dünya Örneği

Beyaz metinli orta mavi (#4A90E2) düğmenin kontrastı yaklaşık 3,1:1'dir — AA'yı geçmez. Koyu lacivert (#1A3A6B)'e geçildiğinde oran 9,4:1'e yükselir ve AAA'yı bile aşar.

WCAG 3.0 ve APCA Hakkında Not

Yeni nesil yönergeler, daha nüanslı bir algısal kontrast modeli olan APCA'yı tanıtmaktadır. WCAG 2.1 AA şu an için geçerli standart olmaya devam etmektedir, ancak uzun vadeli projeler için APCA'ya karşı test yapmak değerlidir.

Color Picker Camera: HEX RGB uygulamasını iOS veya Android için ücretsiz indirin — reklamsız, izlemesiz ve tamamen çevrimdışı çalışır.