Renk Kontrast Denetleyici (WCAG)

Yazı ve zemin rengi okunaklı mı? WCAG kontrast oranını, AA/AAA uygunluğunu ve renk körlüğü görünümünü anında görün.

Araç yükleniyor…

Bu bir eğlence aracıdır. Sonuçlar bilimsel bir ölçüm, tanı ya da değerlendirme değildir; tarayıcınızda çalışır ve hiçbir veri kaydedilmez.

Web sitesi, sunum ya da afiş hazırlarken seçtiğiniz yazı ve zemin renginin herkes tarafından okunabilir olup olmadığını WCAG 2.2 kontrast formülüyle ölçün. Normal ve büyük metin için AA ve AAA eşiklerini tek bakışta görün; eşiği geçmeyen renklere tonu koruyan en yakın öneriyi alın ve önizlemeyi kırmızı, yeşil ve mavi renk körlüğü türlerinde benzetin.

Renk Kontrast Denetleyici (WCAG) Rehberi

Bu araç ne yapıyor?

İki renk arasındaki kontrast oranını Web İçeriği Erişilebilirlik Yönergeleri (WCAG 2.2) formülüyle hesaplar; normal metin, büyük metin ve arayüz ögeleri için AA ve AAA uygunluğunu gösterir. Oran 1:1 (aynı renk) ile 21:1 (siyah üzerine beyaz) arasındadır.

Nasıl kullanılır?

  1. Yazı ve zemin rengini renk seçiciden seçin ya da onaltılık kodunu yazın.
  2. Kontrast oranını ve AA/AAA rozetlerini okuyun; yeşil rozet eşiğin geçildiğini gösterir.
  3. Eşik geçilmiyorsa önerilen rengi tıklayarak uygulayın, ardından önizlemeyi renk körlüğü türlerinde kontrol edin.

Sonucunuz ne anlama geliyor?

WCAG'ye göre normal metin için en az 4,5:1 (AA) ya da 7:1 (AAA), 24 piksel ve üzeri ya da yaklaşık 18,7 piksel kalın büyük metin için 3:1 (AA) ya da 4,5:1 (AAA), simge ve form kenarlığı gibi arayüz ögeleri için 3:1 kontrast gerekir. Oran, iki rengin bağıl parlaklığından hesaplanır; bu yüzden aynı açıklıktaki kırmızı ve yeşil birbirine karşı çok düşük kontrast verir ve renk körlüğü olan kullanıcılar için ayırt edilemez hâle gelir. Açık gri yazılar (#999 ve daha açığı) beyaz zeminde AA'yı geçemez; #767676 geçebilen en açık gri tonudur. Sarı ve açık turkuaz gibi parlak renkler beyaz zeminde yazı rengi olarak neredeyse hiç işe yaramaz, bunları koyu zeminde kullanmak gerekir. Öneri motoru rengin tonunu ve doygunluğunu korur, yalnız açıklığını en az ölçüde değiştirerek eşiği geçen ilk rengi bulur.

Hangi işlerde kullanılır?

  • Web tasarımcıları ve geliştiriciler — Düğme, bağlantı ve gövde metni renklerinin AA eşiğini geçtiğini yayına almadan önce doğrular.
  • Sunum ve afiş hazırlayanlar — Projektörde ya da baskıda silik kalabilecek renk çiftlerini önceden fark eder.
  • Kurum ve kamu sitelerinde çalışanlar — Erişilebilirlik denetimlerinde istenen kontrast şartını belgelemek için oranı ve önerilen rengi not eder.

İpuçları

  • Renk kodunu #1f2937 ya da kısa biçimde #333 olarak yazabilirsiniz.
  • Eşiği geçmeyen yazı renginde, önerilen rengin üstüne tıklayınca uygulanır.
  • Önizlemeyi renk körlüğü türlerinde deneyerek yalnız renge dayalı ayrımları yakalayın.

Sıkça sorulan sorular

AA ile AAA arasındaki fark nedir?

AA, yasal düzenlemelerde ve kamu sitelerinde genellikle istenen asgari düzeydir (normal metinde 4,5:1). AAA daha sıkıdır (7:1) ve az gören kullanıcılar için daha rahat okuma sağlar; her tasarımda zorunlu tutulmaz.

Renk körlüğü benzetimi ne kadar doğru?

Benzetim, bilimsel literatürde yaygın kullanılan Machado ve arkadaşlarının (2009) tam şiddet matrisleriyle yapılır. Kişiden kişiye değişen hafif renk körlüklerini birebir yansıtmaz; tasarımı gözden geçirmek için bir fikir verir, tanı aracı değildir.

Oran neden yuvarlanmadan aşağı kesiliyor?

WCAG eşikleri kesindir: 4,499:1 oranı 4,5:1 eşiğini geçmez. Oranı yukarı yuvarlamak geçmeyen bir rengi geçmiş gösterebileceği için değer iki basamağa aşağı kesilerek gösterilir.

Tüm aletler