Kontrast Kontrolü (WCAG AA / AAA notları)

Kontrast oranı nasıl çalışır?

WCAG (Web İçeriği Erişilebilirlik Kılavuzları), kontrastı iki rengin göreceli parlaklığı arasındaki oran olarak tanımlar. Formül, her sRGB kanalını doğrusallaştırır, insan gözü hassasiyetine göre ağırlandırır (R 0,2126, G 0,7152, B 0,0722), ardından (daha açık + 0,05) / (daha koyu + 0,05) hesaplar. Sonuç 1:1 (özdeş) ile 21:1 (beyaz üzere siyah) arasında değişir.

Bunu tarayıcında resmi WCAG 2.x formülünü kullanarak hesaplıyoruz. Dört not rozeti, AA'nın 4,5:1 (normal) ve 3:1 (büyük) ile AAA'nın 7:1 (normal) ve 4,5:1 (büyük) eşiklerine göre kontrol eder. 'Büyük metin', 24px / 18pt veya 18,66px / 14pt kalındır.

Asgari olarak AA'yı neden geçmeli?

AA, pek çok yargı bölgesinde yasal olarak uygulanabilir düzeydir (ABD ADA, AB EN 301 549, dijital hizmetler için İngiltere Eşitlik Yasası). Gövde metni üzerinde AA'da başarısız olmak, en yaygın erişilebilirlik sorunudur ve lansmanından sonra değil, tasarım sırasında düzeltmek en kolay olanıdır.

AAA, uzun biçimli okuma, kamu hizmetleri ve yüksek önem taşıyan arayüzler için önerilir. Katıdır — tasarımcının açık gri üzerine beyaz ilk sezgisi genellikle AAA'da kolaylıkla başarısız olur. Siteniz ağırlıklı olarak hızlı bakış içerikleri sunuyorsa AA hedefle; kitap, makale veya kritik bilgi yayınlıyorsan AAA hedefle.

Yaygın hatalar

'Benim ekranımda iyi görünüyor.' Kalibre edilmiş ekranlar, floresan ofis ışıkları ve açık havada akıllı telefon kullanımı algılanan kontrastı değiştirir. Oranı kullan, gözünü değil.

Hex kodlarını tersine çevirerek karanlık mod tasarlama. Ters çevirme tonu değiştirir ve kontrastı bozar. Temaları değiştirdikten sonra her renk çiftini yeniden test et.

Marka kılavuzlarına güvenme. Pek çok marka paleti WCAG farkındalığından önce seçildi. Markının pembesi beyaz üzerinde başarısız oluyorsa, gövde metni için biraz daha koyu bir pembe öner ve orijinali dekoratif kullanım için koru.