Kontrast Denetleyici – WCAG Kontrast Oranı
Kontrast oranını kontrol etmek ve renk kombinasyonunuzun WCAG AA ve AAA erişilebilirlik standartlarını karşılayıp karşılamadığını görmek için bir ön plan ve arka plan rengi girin.
Kontrastı kontrol etmek için iki renk girin
HEX, RGB, HSL ve OKLCH formatlarını destekler
Bir örnek deneyin
Daha fazla araç
Erişilebilirlik için renk kontrastını kontrol edin
Renk kontrastı okunabilirlik için çok önemlidir. Ön plan metni arka planına karşı yeterli kontrasta sahip olmadığında okunması zorlaşır — özellikle düşük görme veya renk körlüğü olan kullanıcılar için.
Bu kontrast denetleyici, herhangi iki renk arasındaki kontrast oranını hesaplar ve WCAG 2.1 başarı kriterlerine göre değerlendirir. HEX, RGB veya HSL formatında renk girin ve anında sonuç alın.
WCAG kontrast düzeylerini anlama
Web İçeriği Erişilebilirlik Yönergeleri (WCAG), metin okunabilirliği için minimum kontrast oranlarını tanımlar. İki uyumluluk düzeyi vardır:
- WCAG AA Normal Metin — en az 4,5:1 kontrast oranı gerektirir
- WCAG AA Büyük Metin — en az 3:1 kontrast oranı gerektirir (büyük metin 18pt+ veya 14pt+ kalın)
- WCAG AAA Normal Metin — en az 7:1 kontrast oranı gerektirir
- WCAG AAA Büyük Metin — en az 4,5:1 kontrast oranı gerektirir
AA, çoğu web sitesi ve uygulamanın hedeflediği standart düzeydir. AAA, maksimum okunabilirliğin önemli olduğu durumlarda önerilen geliştirilmiş düzeydir.
Kontrast denetleyicisi nasıl kullanılır
- Bir ön plan (metin) rengi girin — HEX, RGB veya HSL
- Desteklenen herhangi bir formatta arka plan rengi girin
- Kontrast oranını ve metnin bu arka plandaki canlı önizlemesini görün
- WCAG AA ve AAA düzeyleri için başarılı/başarısız sonuçları kontrol edin
- Ön plan ve arka planı hızla değiştirmek için değiştir düğmesini kullanın
Renk kontrastını ne zaman kontrol etmelisiniz
- Bir web sitesi veya uygulama için metin ve arka plan renkleri seçerken
- Bir tasarım sisteminin erişilebilirlik gereksinimlerini karşılayıp karşılamadığını doğrularken
- Düğme, bağlantı veya simge renklerini arka planlarına karşı test ederken
- Karanlık mod renk kombinasyonlarını kontrol ederken
- Yasal erişilebilirlik standartlarını (ADA, EAA, Section 508) karşılarken
Doğru, anlık ve ücretsiz
Bu araç, standart bağıl parlaklık formülünü kullanarak WCAG 2.1 kontrast oranını hesaplar. Sonuçlar tarayıcınızda anında hesaplanır — hiçbir veri herhangi bir sunucuya gönderilmez.
Önce bir renk bulmanız veya dönüştürmeniz mi gerekiyor? Bir görüntüden renk çıkarmak için Renk Seçici'yi veya HEX, RGB ve HSL arasında dönüştürmek için Renk Dönüştürücü'yü kullanın.
Sıkça Sorulan Sorular
- Metin için iyi bir kontrast oranı nedir?
- Normal boyuttaki gövde metni için WCAG AA'yı karşılamak üzere en az 4,5:1 kontrast oranı gereklidir. Büyük metin (18pt veya 14pt kalın ve üstü) için minimum 3:1'dir. En yüksek erişilebilirlik düzeyi (WCAG AAA) için normal metin en az 7:1 gerektirir.
- WCAG AA ile AAA arasındaki fark nedir?
- AA, çoğu web sitesi ve uygulamanın karşılaması gereken standart uyumluluk düzeyidir. AAA, daha katı kontrast gereksinimleri olan geliştirilmiş düzeydir ve devlet veya sağlık web siteleri gibi maksimum okunabilirliğin kritik olduğu içerikler için önerilir.
- WCAG'da büyük metin nedir?
- Büyük metin, normal ağırlıkta 18 punto (24px) veya daha büyük ya da kalın yazıda 14 punto (yaklaşık 18,66px) veya daha büyük olarak tanımlanır. Büyük metin, boyutu nedeniyle doğası gereği okunması daha kolay olduğundan daha düşük kontrast gereksinimlerine sahiptir.
- Bu denetleyici hangi renk formatlarını destekler?
- HEX (ör. #1E293B), RGB (ör. rgb(30, 41, 59)) veya HSL (ör. hsl(222, 33%, 17%)) formatında renk girebilirsiniz. Araç formatı otomatik olarak algılar.
- Kontrast oranı nasıl hesaplanır?
- Kontrast oranı WCAG 2.1 formülü kullanılarak hesaplanır: (L1 + 0,05) / (L2 + 0,05), burada L1 daha açık rengin bağıl parlaklığı ve L2 daha koyu rengin bağıl parlaklığıdır. Sonuç 1:1 (kontrast yok) ile 21:1 (maksimum kontrast, beyaz üzerine siyah) arasında değişir.
- Bu araç mobilde çalışır mı?
- Evet. Kontrast denetleyici, modern bir tarayıcıya sahip her cihazda çalışır — masaüstü, tablet veya telefon.
- Bu araç ücretsiz mi?
- Evet. ColourPicker.app tamamen ücretsizdir, kayıt gerektirmez.
- Yalnızca metin değil, UI bileşenleri için de kontrastı kontrol edebilir miyim?
- WCAG 2.1, anlamlı UI bileşenleri ve grafik nesneler için de minimum 3:1 kontrast oranı gerektirir (Başarı Kriteri 1.4.11). Bu denetleyiciyi bu kombinasyonları doğrulamak için de kullanabilirsiniz — oran hesaplaması aynıdır.