WCAG Kontrast Denetleyici: AA ve AAA
Bu WCAG kontrast denetleyici, bir ön plan rengi ile bir arka plan rengi arasındaki kontrast oranını hesaplar, ardından normal veya büyük metin için AA ya da AAA gereksinimlerine göre denetler. Canlı önizleme, okunabilirliği değerlendirmenize yardımcı olmak için metni arka planına karşı gösterir. Eşikler AA için 4,5:1 ve 3:1, AAA için 7:1 ve 4,5:1'dir.
Bu WCAG kontrast denetleyici, bir ön plan rengi ile bir arka plan rengi arasındaki kontrast oranını hesaplar. Sonucu normal ve büyük metin için WCAG AA ve AAA eşiklerine göre derecelendirir ve metni arka planına karşı görebilmeniz için canlı bir önizleme sunar. Renk kontrastını denetlemek ve okunabilirliği değerlendirirken net bir sonuç almak için kullanın.
Renkleri AA veya AAA ölçütlerine göre ve metnin normal mi büyük mü olduğuna göre değerlendirmeyi seçin. AA için gerekli kontrast oranı normal metinde 4,5:1, büyük metinde 3:1'dir. AAA için eşikler normal metinde 7:1, büyük metinde 4,5:1'dir. Denetleyici, oranın seçilen gereksinimle nasıl karşılaştırıldığını raporlar.
Önizlemede ön plan ve arka plan renklerinin farklı rolleri vardır: ön plan metin rengidir, arka plan ise arkasındaki renktir. İkiliyi birlikte denetlemek, iki rengi de tek başına yargılamak yerine kontrastlarını birlikte değerlendirmenize yardımcı olur. Canlı önizleme, oran ve derecenin yanında hızlı bir görsel denetim sunar.
Denetleyici tamamen tarayıcınızda çalışır ve girdiniz kendi cihazınızda işlenir; hiçbir veri bir sunucuya gönderilmez. Sayfa yüklendikten sonra çevrimdışı çalışır ve ücretsizdir. Geliştiriciler, tasarımcılar ve DevOps mühendisleri; renk kombinasyonlarını WCAG ölçütlerine göre denetlemek ve bir arayüzü paylaşmadan veya yayınlamadan önce kontrast sorunlarını yakalamak için kullanabilir.
Adım 1: Denetlemek istediğiniz ön plan ve arka plan renklerini girin. Denetleyicinin karşılaştırdığı iki renk bunlardır.
Adım 2: Değerlendirilecek ölçütü seçin. Denetleyici kontrastı normal veya büyük metin için AA ya da AAA eşiklerine göre derecelendirir.
Adım 3: Kontrast oranını ve dereceyi inceleyin. Sonuç, seçilen renklerin seçilen ölçütü karşılayıp karşılamadığını gösterir.
Adım 4: Canlı önizlemeyi denetleyin. Metni arka planına karşı görmek okunabilirliği bir bakışta değerlendirmenize yardımcı olur.
Kullanım senaryosu: Bir arayüzde kullanmadan önce bir ön plan ve arka plan renk kombinasyonunun gerekli bir WCAG kontrast eşiğini karşılayıp karşılamadığını denetleyin.
Kullanım senaryosu: Başarısız bir renk kombinasyonunu inceleyiciye veya kullanıcıya ulaşmadan yakalayın; böylece daha erken değerlendirebilirsiniz.
Kullanım senaryosu: Yalnızca kontrast oranına güvenmek yerine nedeni de içeren bir geçti/kaldı sonucu alın.
Kullanım senaryosu: Arka planına karşı kontrastını denetlerken metnin nasıl göründüğünü değerlendirmek için canlı önizlemeyi kullanın.
Kullanım senaryosu: Farklı metin gereksinimlerini değerlendirmeniz gerektiğinde normal ve büyük metni AA veya AAA ölçütlerine göre denetleyin.
Kullanım senaryosu: Önerilen bir renk kombinasyonunu projenizin uyması gereken eşiklere göre doğrulayın.