Görsel kontrast denetleyici
WCAG kontrastını kontrol etmek için bir görselde herhangi iki noktaya tıkla — AA, AAA, büyük metin eşikleri. Sadece hex kodlarını değil gerçek ekran görüntülerini doğrulayan tasarımcılar için.
Bu ne işe yarar?
WCAG kontrast denetleyicileri normalde iki hex kodu ister — ama gerçek bir ekran görüntüsü üzerinde erişilebilirlik geçişi yapan bir tasarımcının elinde hex değil piksel vardır. Bu araç bir görsel yüklemene (ekran görüntüsü, hero tasarım, yoğun arka planlı logo) ve herhangi iki noktaya tıklamana izin verir. İmlecin altındaki rengi örnekler (1 piksel veya 3×3/5×5 ortalaması) ve WCAG 2.1 kontrast oranını hesaplar. AA, AA-büyük, AAA, AAA-büyük ve UI bileşenleri eşiği (1.4.11) için yargı verir. Her şey tarayıcıda.
Ne zaman kullanılır
- Kaynağı olmayan bir ekran görüntüsünü doğrulama — bir pazarlama sayfası, rakip UI, PDF.
- "Arka plan rengi"nin tek bir değer olmadığı yoğun bir fotoğraf arka plan üzerinde bir logoyu denetleme.
- Bir gradient boyunca veya yarı saydam metin arkasında en kötü kontrast değerini kontrol etme.
- Tasarımı yeniden inşa etmeden iki UI durumunu (örn. düğme rest vs hover) hızla karşılaştırma.
Örnekleme nasıl çalışır
Tek piksel örnek hassastır ama gürültülüdür — anti-aliased kenarlar, JPEG artefaktları ve subpixel render komşu pikselleri farklılaştırır. 5×5 ortalama genelde UI için istediğindir: bir insanın tanımlayacağı rengi döndürür, tıklamanın altındaki tam pikseli değil. Bir logo kenarını veya keskin renk sınırını kontrol ediyorsan 1px kullan.
Sık yapılan hatalar
- Anti-aliasing. Metin kenarları tasarım niyetinde olmayan renklere ortalanır. Harfin gövdesinin ortasına tıkla, kenarına değil.
- JPEG sıkıştırması. Yüksek sıkıştırılmış görsellerde düz bölgelerde renk drift'i olur. 5×5 ortalama drift'i düzeltir.
- Yarı saydam katmanlar. Kontrast için önemli olan render edilen pikseldir, kaynak renk değil. Bu araç render edilen pikseli okur — tam olarak istediğin şey.
- Renkleri kontrol ediyorsun, tasarım niyetini değil. Gerçek dünyada render edilen düğme rest'te AA'yı geçer ama başka bir ekran görüntüsünde hover'da başarısız olursa, her iki durum da erişilebilirlik hatalarıdır.
- Görsel ölçekleme. Araç büyük görselleri performans için küçültür. Örneklenen piksel görüntülenen pikseli yansıtır; çok küçük bir UI öğesinin piksel-mükemmel örneklemesine ihtiyacın varsa yüklemeden önce görseli kırp.