WCAG Kontrast Kontrolü
WCAG AA ve AAA erişilebilirlik uyumu için renk kontrast oranlarını kontrol edin
Girdi ve seçenekler
Hazır ayarlar ve örnekler
Tarayıcınızda çalışır. Girdileriniz bu cihazda kalır.
Sonuçlar
Sonucu görmek için değerlerinizi girin.
WCAG Kontrast Kontrolü hakkında
Bu ücretsiz çevrimiçi WCAG Kontrast Kontrolü aracımız, tasarımcıların, geliştiricilerin ve erişilebilirlik uzmanlarının metin ile arka plan renk kombinasyonlarının Web İçeriği Erişilebilirlik Yönergeleri (WCAG) 2.1 kontrast gereksinimlerini karşılayıp karşılamadığını doğrulamasına yardımcı olur. Erişilebilir renk kontrastı, az gören veya renk görme bozukluğu olanlar dahil tüm kullanıcıların web içeriğinizi okuyabilmesini ve onunla etkileşime geçebilmesini sağlar.
Araç, resmi W3C göreli parlaklık formülünü kullanarak herhangi iki renk arasındaki kontrast oranını hesaplar ve kombinasyonun hem normal hem büyük metin için WCAG AA ve WCAG AAA uygunluk düzeylerinden geçip geçmediğini anında bildirir. Tüm hesaplamalar, hiçbir sunucuya veri gönderilmeden doğrudan tarayıcınızda gerçek zamanlı olarak yapılır.
İster erişilebilirlik denetimi yapın, ister yeni bir arayüz tasarlayın, ister mevcut içeriğin uygunluğunu inceleyin, bu kontrast kontrolü aracı size hassas ve standartlara uygun sonuçların yanı sıra canlı metin önizlemeleri ve başarısız renk kombinasyonlarını düzeltmek için uygulanabilir öneriler sunar.
WCAG kontrast gereksinimlerini anlama
Bu Web İçeriği Erişilebilirlik Yönergeleri (WCAG), World Wide Web Consortium (W3C) tarafından yayımlanan, web erişilebilirliği için uluslararası kabul görmüş standarttır. WCAG, farklı görme düzeylerindeki kullanıcıların metni okuyabilmesini sağlamak için belirli kontrast oranı eşikleri tanımlar.
- WCAG AA düzeyi (normal metin): En az 4.5:1 kontrast oranı gerekir. Bu, gövde metnine, paragraflara ve 18pt (24px) veya kalın 14pt (kalın 18.66px) boyutundan küçük tüm metinlere uygulanır.
- WCAG AA düzeyi (büyük metin): En az 3:1 kontrast oranı gerekir. Büyük metin, en az 18pt (24px) veya kalın 14pt (kalın 18.66px) boyutundaki metin olarak tanımlanır.
- WCAG AAA düzeyi (normal metin): En az 7:1 kontrast oranı gerekir. Bu, normal boyuttaki metin için en yüksek erişilebilirlik uygunluk düzeyidir.
- WCAG AAA düzeyi (büyük metin): AAA uygunluk düzeyinde büyük metin için en az 4.5:1 kontrast oranı gerekir.
En az WCAG AA düzeyini karşılamak, erişilebilir web tasarımının temel standardı kabul edilir ve dünya genelinde Engelli Amerikalılar Yasası (ADA), Avrupa Erişilebilirlik Yasası ve Rehabilitasyon Yasası'nın 508. Bölümü dahil birçok yasal çerçevede zorunludur. WCAG AAA, uygulanabilir olduğu durumlarda önerilen daha yüksek bir erişilebilirlik düzeyi sunar.
Kontrast oranı nasıl hesaplanır?
İki renk arasındaki kontrast oranı, WCAG 2.1 şartnamesinde tanımlandığı gibi her rengin göreli parlaklığı kullanılarak belirlenir. Göreli parlaklık, bir rengin algılanan parlaklığını 0 (en koyu siyah) ile 1 (en açık beyaz) arasında ölçer.
Hesaplama üç adımdan oluşur. Önce her renk kanalı (kırmızı, yeşil, mavi), 255'e bölünerek 8 bit sRGB değerinden (0-255) normalleştirilmiş sRGB değerine (0-1) dönüştürülür. Sonra normalleştirilmiş her değere gama düzeltmesi uygulanır: değer 0,04045 veya altındaysa 12,92'ye bölünür; değilse ((value + 0.055) / 1.055) ^ 2.4 formülüyle dönüştürülür. Son olarak doğrusallaştırılmış kanal değerleri ağırlıklı katsayılarla birleştirilir: L = 0.2126 * R + 0.7152 * G + 0.0722 * B.
Son kontrast oranı (L1 + 0.05) / (L2 + 0.05) olarak hesaplanır; burada L1 açık rengin, L2 koyu rengin göreli parlaklığıdır. Sonuç, 1:1 (kontrast yok, aynı renkler) ile 21:1 (en yüksek kontrast, saf beyaz üzerinde saf siyah) arasında bir değerdir.
Temel özellikler
- Resmi W3C WCAG 2.1 parlaklık formülüyle gerçek zamanlı kontrast oranı hesaplama
- Hem normal hem büyük metin için WCAG AA ve AAA uygunluk düzeylerinin geçti/kaldı göstergeleri
- Hem ön plan hem arka plan renkleri için etkileşimli renk seçici ve onaltılık değer girişi
- Ters renk kombinasyonlarını test etmek için tek tıklamayla renkleri değiştirme
- Yaygın erişilebilir eşleşmeler dahil on hazır renk kombinasyonu
- Renklerinizin normal ve büyük metin boyutlarında nasıl göründüğünü gösteren canlı metin önizlemesi
- Mevcut kombinasyon başarısız olduğunda kontrolden geçen en yakın ön plan renginin otomatik önerilmesi
- Hem ön plan hem arka plan renkleri için teknik parlaklık ayrıntıları
- Her ortamda rahat kullanım için tam karanlık mod desteği
- Tüm işlemler, dış sunuculara veri iletilmeden yerel olarak tarayıcıda yapılır
WCAG Kontrast Kontrolü nasıl kullanılır?
- Ön plan rengini ayarlayın: Metin veya ön plan renginizi ayarlamak için renk seçici karesine tıklayın ya da metin alanına onaltılık bir değer (ör. #1A1A2E) yazın.
- Arka plan rengini ayarlayın: Benzer şekilde, metnin arkasındaki arka plan rengini ayarlamak için renk seçiciyi veya onaltılık değer girişini kullanın.
- Sonuçları inceleyin: Renkleri değiştirdikçe kontrast oranı ve dört WCAG düzeyinin tamamı için geçti/kaldı sonuçları anında gösterilir.
- Canlı önizlemeyi kontrol edin: Seçtiğiniz renk kombinasyonuyla hem normal hem büyük boyutta görüntülenen gerçek metni görmek için aşağı kaydırın.
- Önerileri uygulayın: Kombinasyon WCAG AA kontrolünden geçmezse önerilen bir ön plan rengi gösterilir. Kullanmak için Uygula'ya tıklayın.
- Hazır ayarları deneyin: Bilinen erişilebilir veya erişilemez renk kombinasyonlarını test etmek için Hızlı hazır ayarları kullanın.
- Renkleri değiştirin: Ön plan ve arka plan seçimlerinizi ters çevirmek için Renkleri değiştir düğmesine tıklayın.
Renk kontrastı erişilebilirlik için neden önemlidir?
Dünya genelinde yaklaşık 12 erkekten 1'inde ve 200 kadından 1'inde bir tür renk görme bozukluğu vardır. Ayrıca milyonlarca kişi az görme, yaşa bağlı görme değişiklikleri veya ekran parlaması gibi duruma bağlı görme güçlükleri yaşar. Yeterli renk kontrastı, web içeriğini bu kullanıcıların tümü için erişilebilir kılmanın en etkili ve doğrudan yollarından biridir.
Metin ile arka plan arasındaki düşük kontrast, web denetimlerinde en sık görülen erişilebilirlik sorunlarından biridir. Ekipler, tasarım ve geliştirme sırasında WCAG Kontrast Kontrolü kullanarak kontrast sorunlarını yayına çıkmadan belirleyip düzeltebilir; böylece düzeltme maliyetlerini azaltır ve en baştan erişilebilirlik düzenlemelerine uyum sağlar.
İyi renk kontrastı, engeli olmayan kullanıcılara da yarar sağlar. Parlak güneş ışığında, düşük kaliteli ekranlarda ve dikkat dağıtıcı unsurların yoğun olduğu ortamlarda okunabilirliği artırır. Erişilebilir tasarım, herkes için daha iyi bir deneyim oluşturan kapsayıcı tasarımdır.
Sıkça sorulan sorular
WCAG AA ile AAA arasındaki fark nedir?
WCAG AA, çoğu web sitesi ve uygulama için önerilen standart uygunluk düzeyidir. Normal metin için en az 4.5:1, büyük metin için 3:1 kontrast oranı gerektirir. WCAG AAA daha katı bir düzeydir; normal metin için 7:1, büyük metin için 4.5:1 gerektirir. AAA her içerikte her zaman sağlanamasa da kritik metin öğelerinde ve en yüksek okunabilirliğin gerektiği yerlerde önerilir.
WCAG kapsamında büyük metin nedir?
WCAG 2.1'e göre büyük metin, en az 18 punto (yaklaşık 24 CSS pikseli) veya kalın yazıldığında 14 punto (yaklaşık 18,66 CSS pikseli) boyutundaki metindir. Boyutu doğal olarak okumayı kolaylaştırdığı için büyük metnin kontrast gereksinimleri daha düşüktür.
Bu araç saydamlığı veya alfa kanallarını destekliyor mu?
Bu araç opak onaltılık renklerle (6 basamaklı onaltılık kodlar) çalışır. Saydam renklerde etkin kontrast, saydam katmanın arkasındaki arka plana bağlıdır ve sayfanın farklı yerlerinde değişebilir. Yarı saydam metni kontrol etmek için önce saydam katmanın gerçek arka planı üzerinde oluşturduğu etkin düz rengi hesaplamalı, ardından bu düz rengi burada test etmelisiniz.
WCAG uyumu yasal olarak zorunlu mu?
Birçok hukuk alanında evet. ABD'deki ADA, AB'deki Avrupa Erişilebilirlik Yasası, Kanada'daki Ontario Engelliler İçin Erişilebilirlik Yasası (AODA) ve diğer ülkelerdeki benzer mevzuatlar, dijital erişilebilirlik standardı olarak WCAG 2.1 AA düzeyine atıfta bulunur veya bunu içerir. Bu gereksinimleri karşılamayan kuruluşlar dava, para cezası ve itibar kaybıyla karşılaşabilir.