Kontrast Kontrolcüsü Aracı Nasıl Kullanılır
Metin ve arka plan renk kombinasyonunun WCAG 2.1 erişilebilirlik standartlarına uygunluğunu test etmenin adım adım anlatımı.
Bu aracı hemen kullanın
Hesaplamayı yapmak için araca gidin
Kontrast Kontrolcüsü; metin ve arka plan renkleriniz arasındaki WCAG 2.1 kontrast oranını hesaplar ve AA, AAA seviyelerinde geçer mi düşer mi onu söyler. Görme güçlüğü olan kullanıcıların içeriğinizi okuyabilmesini sağlamak için tüm web ve baskı tasarımlarında kullanılması önerilen bir erişilebilirlik testidir.
Adım Adım Kullanım
Metin rengini girin
Üstteki Yazı Rengi alanına HEX kodunu (örneğin #1A1A1A) yazın veya renk seçicisinden seçin. Kod geçersizse kenarlık kırmızıya döner.
Arka plan rengini girin
Aynı şekilde Arka Plan alanına HEX kodu girin. Tasarımınızdaki gerçek arka plan rengini seçmeye dikkat edin.
Kontrast oranına bakın
Sayfada anında 1:1 ile 21:1 arasında bir oran çıkar. 4.5:1 ve üstü normal metin için, 3:1 ve üstü büyük metin için AA seviyesinde geçerlidir.
AA ve AAA rozetlerini kontrol edin
Sonuç kartında dört adet rozet (AA Normal, AA Büyük, AAA Normal, AAA Büyük) görünür. Yeşil tik geçti, kırmızı çarpı kaldı anlamına gelir.
Renkleri yer değiştirin
Yer Değiştir butonu metin ve arka plan renklerini takas eder; aynı kombinasyonun ters yönde nasıl çalıştığını test etmek için faydalıdır.
Önerilen rengi uygulayın
Kontrast yetersizse araç, mevcut arka plana uygun siyah veya beyaz öneri verir ve hedef oranı (örneğin 7:1) yakalayan ayarlanmış renk önerir. Tasarımınıza bu yeni HEX kodunu uygulayın.
Örnek Senaryo
Açık gri arka plan üzerinde gri metin testi
Bir buton tasarımında metin rengi #999999 ve arka plan rengi #FFFFFF olarak girildi. Kontrast oranı 2.85:1 olarak hesaplandı; bu oran AA Normal eşiği olan 4.5:1 ve AA Büyük eşiği olan 3:1 değerlerinin altında kaldığı için her iki seviyede başarısız işareti çıktı. Aracın önerdiği #595959 metin rengi ile oran 7.04:1'e yükseldi ve AAA Normal seviyesinde geçti, butonun erişilebilirliği iyileşti.
Sık Yapılan Hatalar
Yalnızca yazı rengini değiştirip arka planı atlamak
Metni koyulaştırırken arka planın rengini de göz önünde bulundurmamak çoğu kontrast sorununun temelidir. Her iki rengi birlikte değerlendirin.
Büyük metin tanımını kaçırmak
WCAG'da büyük metin 24 px (18 pt) ve üstü düz, 18.66 px (14 pt) ve üstü kalın metin demektir. Daha küçük metin için 4.5:1 eşiği geçerlidir.
Renk körlüğünü unutmak
Kontrast geçer ama renk seçimi (örneğin yeşil-kırmızı) renk körü kullanıcılar için ayırt edilemez olabilir. Renk körlüğü simülatörü ile birlikte test edin.
Sadece AA hedeflemek
AAA seviyesi (normal metin için 7:1) erişilebilirliği belirgin biçimde artırır. Mümkün olan her yerde AAA hedeflenmesi önerilir.
Saydamlığı (alpha) hesaba katmamak
Yarı saydam metinlerde (örneğin opacity 0.6) görünen renk arka planla harmanlanır; kontrast testini gerçek gözüken renk üzerinden yapın, kaynak rengi üzerinden değil.
Sık Sorulan Sorular
WCAG 2.1 AA ve AAA arasındaki fark nedir?
AA seviyesi yasal asgari erişilebilirlik standardıdır; normal metin için 4.5:1, büyük metin için 3:1 oran ister. AAA en yüksek seviyedir ve normal metin için 7:1, büyük metin için 4.5:1 oran ister. AAA tüm tasarımlar için uygulanabilir olmasa da kritik içerikte hedeflenmelidir.
Kontrast oranı 1:1 ile 21:1 arasında niye değişiyor?
Kontrast oranı iki rengin göreceli parlaklık (luminans) değerlerinin oranıdır. Aynı renk için 1:1, saf siyah-beyaz için 21:1 değerini alır. Bu aralık WCAG 2.1 formülünün matematiksel sınırıdır.
Hangi tasarım öğelerinde kontrast kontrolü gerekir?
Tüm metinler, ikon-arka plan, form alan kenarlıkları, vurgulanmış durumlar (focus), bağlantılar ve grafik içeriklerin önemli bilgi taşıyan kısımları için kontrast kontrolü zorunludur. Yalnızca dekoratif öğeler bu kapsam dışındadır.
Renk seçici ile mi HEX ile mi giriş daha doğru?
İki yöntem aynı sonucu verir; renk seçici görsel ayar için, HEX kodu tasarım dosyasından doğrudan kopyalama için pratiktir. Kurumsal renk paletleriniz için HEX kodu sözlüğü tutmanız önerilir.
Baskı tasarımları için de geçerli mi?
Evet. WCAG dijital ortam için yazılmış olsa da kontrast prensibi baskıda da kullanıcı deneyimini iyileştirir. Özellikle yaşlı okuyuculara hitap eden baskı materyallerinde 4.5:1 hedeflenmelidir.
Önerilen renk kurumsal kimliğime uymazsa ne yaparım?
Marka renginizi koruyup parlaklık değerini ayarlayabilir, daha koyu veya açık tonunu kullanabilirsiniz. Aracın önerisi yön gösterir; nihai renk seçimi marka yönergesi ve kontrast eşiği birlikte değerlendirilerek yapılır.
Kontrast oranı nasıl hesaplanıyor?
Her renk sRGB değerlerinden lineer RGB'ye dönüştürülür, göreceli parlaklık (luminans) hesaplanır ve (L1 + 0.05) / (L2 + 0.05) formülü uygulanır. L1 daha açık, L2 daha koyu rengin parlaklığıdır.
İlişkili Araçlar
Hazır mısınız?
Bu aracı kullanarak hesaplamanızı hemen yapın.