WCAG ve renk kontrastı

Kısaca: WCAG (Web Content Accessibility Guidelines), erişilebilir web siteleri için uluslararası standarttır. Kurallarından biri: metin arka planından yeterince ayrışmalıdır.

Biraz daha ayrıntılı: W3C yönergeleri dört ilkeye ayrılır: algılanabilir, işletilebilir, anlaşılabilir ve sağlam. Üç uyum düzeyi vardır: A, AA ve AAA. Çoğu sunum için hedef AA’dır; Alman Erişilebilirliği Güçlendirme Yasası (BFSG) ve Avrupa standardı EN 301 549 gibi yasalar da bunu varsayar.

Ayrıntılı

Kontrast oranı

Kontrast, iki rengin göreli parlaklıklarının oranı olarak verilir, 1:1’den (eşit) 21:1’e (beyaz üzerinde siyah). Bir renk değerinin parlaklığı kırmızı, yeşil ve mavi bileşenlerinden hesaplanır; yeşil en çok, mavi en az sayılır, çünkü göz buna daha az duyarlıdır.

Formül: kontrast = (L1 + 0,05) / (L2 + 0,05), burada L1 açık rengin, L2 koyu rengin parlaklığıdır.

Asgari değerler

İçerik	AA düzeyi	AAA düzeyi
Normal metin	4,5 : 1	7 : 1
Büyük metin (yaklaşık 24 px’ten veya 19 px kalından)	3 : 1	4,5 : 1
Kontroller ve grafikler (kenarlıklar, simgeler)	3 : 1	–

Beyaz üzerinde gri metin en sık yapılan hatadır: beyaz üzerinde #767676 4,5 : 1’e güçlükle ulaşır, #999999 artık ulaşamaz.

Bu neden önemli

Erkeklerin yaklaşık on ikide birinin renk görme eksikliği vardır, birçok insan yaşla daha kötü görür ve güneşte bir telefonda herkes iyi kontrasta bağımlıdır. Zayıf kontrast, Lighthouse gibi otomatik denetimlerin bir sayfayı düşük puanlamasının ana nedenlerinden biridir.

Renkle ilgili diğer kurallar

• Renk tek başına gösterge olmamalı: hataları yalnızca kırmızıyla değil, ek olarak metin veya simgeyle işaretle.
• Görünür odak: odaklanan öğe (klavye) net bir çerçeveye ihtiyaç duyar.
• Karanlık mod kendi renk değerlerine ihtiyaç duyar; bunlar da denetlenmelidir.

Denetleme ve düzeltme

Bir kontrast denetleyicisiyle ön plan ve arka plan rengini girer, oranı ve AA ile AAA hakkında bir ifade alırsın. Değer yetmiyorsa, sınıra ulaşana kadar metni daha koyu (açık zeminde) ya da daha açık (koyu zeminde) yaparsın. Bu genellikle pek göze çarpmayan ama birçok kişiye yardım eden küçük bir ayardır.

Ayrıca bak: Erişilebilirlik, CSS, HTML