Kontrast Kontrolü (Contrast Checker), iki renk arasındaki WCAG 2.1 kontrast oranını hesaplar ve hem normal hem de büyük metinler için AA/AAA eşiklerine göre derecelendirir. Canlı önizleme, seçilen renklerde işlenen metni gösterir ve "sayfa arka planını seç" butonu mevcut sayfanın arka planından örnek alır.
Erişilebilirlik giderek daha fazla zorunlu hale geliyor; WCAG uyumluluğu birçok yargı bölgesinde yasal bir gerekliliktir ve zorunlu olmadığı durumlarda bile düşük kontrast kullanıcıları uzaklaştırır. Kontrast Kontrolü, herhangi iki rengin WCAG standartlarını karşılayıp karşılamadığını size anında söyler. Renk seçici aracılığıyla bir ön plan ve arka plan seçin veya hex değerlerini yapıştırın; araç, resmi WCAG parlaklık formülünü kullanarak kontrast oranını hesaplar ve dört eşiğe göre derecelendirir: AA normal (≥4.5:1), AA büyük (≥3:1), AAA normal (≥7:1) ve AAA büyük (≥4.5:1). Her eşik, net bir Geçti/Kaldı (Pass/Fail) rozeti gösterir. Canlı önizleme, seçilen renklerde büyük ve normal metinleri işleyerek gerçek görsel etkiyi görmenizi sağlar. Kullanışlı bir buton, mevcut sayfanın gövde (body) arka plan renginden örnek alır; bu, gerçek bir sitedeki renk kombinasyonunun geçip geçmediğini kontrol ederken faydalıdır. Her şey tarayıcınızda yerel olarak çalışır, yükleme yapılmaz.
Kontrast oranını hesaplamak için resmi WCAG parlaklık formülünü kullanır. Sonuç kesindir ve tüm uyumlu erişilebilirlik denetleyicileriyle eşleşir.
AA normal (≥4.5:1), AA büyük (≥3:1), AAA normal (≥7:1), AAA büyük (≥4.5:1) için geçti/kaldı durumu bir tablo olarak gösterilir.
Seçtiğiniz renklerde gerçek büyük ve normal metinleri işler, böylece sayısal oranın yanı sıra görsel etkiyi de görürsünüz.
Tek tıkla mevcut sayfanın hesaplanmış gövde arka plan renginden örnek alır; gerçek dünyadaki kombinasyonları test etmek için kullanışlıdır.
Bir hex değeri yazın veya yerel renk seçiciyi kullanın. Değerler, her iki tarafta düzenleme yaptıkça çift yönlü olarak senkronize edilir.
Tek tıkla ön plan ve arka plan renklerini ters çevirir; koyu temaları veya hover (üzerine gelme) durumlarını kontrol ederken kullanışlıdır.
Bir renk paletini son haline getirmeden önce, WCAG AA uyumluluğundan emin olmak için her metin rengini arka planına göre kontrol edin; daha sonra düzeltme yapmaktan kurtulun.
Canlı bir sitede "sayfa arka planını seç" özelliğini kullanın, ardından gerçek metin rengini yapıştırın; Lighthouse'u açmadan dakikalar içinde erişilebilirlik ihlallerini bulun.
Bir marka erişilebilirlik testinden geçemeyebilecek bir renk seçtiğinde, en yakın uyumlu varyantı (daha koyu/açık ton) bulmak için denetleyiciyi kullanın.
Sadece varsayılan durumun değil; hover, aktif ve devre dışı (disabled) durum renklerinin de kontrast gereksinimlerini karşıladığını doğrulayın.
Koyu temalar genellikle gri üzeri gri metinlerde kontrast testinden geçemez. Bunları yakalamak için en koyu grilerinizi en koyu arka planlarınıza göre kontrol edin.
DevSuite Pro dock'undaki Kontrast simgesine tıklayın. Ön plan ve arka plan renk alanlarını içeren bir panel açılır.
Her biri için renk seçiciyi kullanın veya bir hex değeri yapıştırın. Renkleri değiştirdikçe canlı önizleme güncellenir.
Büyük sayı (örneğin 4.8:1) kontrast oranıdır. Daha yüksek olması daha iyidir. 3 mutlak minimumdur; 4.5 normal metin için hedeftir.
AA ve AAA, normal ve büyük metin boyutları için geçti/kaldı rozetleri, kombinasyonunuzun hangi seviyeye uygun olduğunu bir bakışta gösterir.
Eğer geçemiyorsa renkleri ince ayar yapın. Hedef seviye 'Geçti' (Pass) gösterene kadar ön planı koyulaştırın veya arka planı açıklaştırın (ya da tam tersi).
DevSuite Pro'yu ücretsiz yükleyin ve tarayıcınız için 64'dan fazla geliştirici aracının kilidini açın.
