Nasıl kullanılır?
- Metin (ön plan) rengini ve arka plan rengini HEX, rgb(), hsl() veya başka bir CSS biçiminde girin ya da renk seçicileri kullanın.
- Her WCAG gereksinimi için kontrast oranını ve geçme ya da kalma sonucunu görün.
- Bir gereksinim karşılanmıyorsa bir hedef seçip önerilen rengi uygulayın. Bu renk, tonu korur ve yalnızca açıklığı değiştirir.
- Örneğin koyu bir düğmede açık renkli metni kontrol etmek için ters renk kombinasyonunu incelemek üzere “Takas et”i kullanın.
Nasıl çalışır?
Oran, WCAG 2.2 tanımına göre hesaplanır: her rengin göreli parlaklığı sRGB kanallarından hesaplanır ve oran (daha açık renk + 0.05) ÷ (daha koyu renk + 0.05) şeklindedir. Değer 1:1 (aynı renkler) ile 21:1 (beyaz üzerinde siyah) arasında değişir.
Kontrol edilen gereksinimler: 1.4.3 başarı ölçütü (AA), normal metin için 4.5:1 ve büyük metin için 3:1 ister; 1.4.6 (AAA) sırasıyla 7:1 ve 4.5:1 ister; 1.4.11 ise giriş alanı kenarlıkları ve simgeler gibi kullanıcı arayüzü bileşenleri ve anlamlı grafikler için 3:1 ister. Büyük metin, normal kalınlıkta en az 24px veya kalın yazı tipinde yaklaşık 18.66px olmalıdır. WCAG, değerin yukarı yuvarlanmasına izin vermez; bu nedenle 4.49:1, yakın olsa da AA gereksinimini karşılamaz. Burada gösterilen oran yuvarlanmaz, kesilir.
Öneri, metin renginin tonunu ve kroma değerini OKLCH'de koruyarak hedefi karşılayan en yakın açıklık değerini, daha koyu veya daha açık yönde arar. Kontrast oranı okunabilirliğin yalnızca bir unsurudur: yazı kalınlığı, boyutu ve renk görme farklılıkları da önemlidir. WCAG 2.2, erişilebilirlik yasalarının çoğunun atıfta bulunduğu güncel W3C önerisidir.
Örnekler
Gereksinimi kıl payı karşılayamayan gri metin
Beyaz üzerinde #777777, 4.48:1 kontrast oranı verir. Bu oran büyük metin ve kullanıcı arayüzü bileşenleri için yeterlidir ancak normal metinde AA gereksinimini karşılamaz. Gereksinimi karşılayan en yakın gri yaklaşık #767676'dır ve 4.54:1 oranına ulaşır.
Marka düğmesinde beyaz metin
#ff8800 üzerinde beyaz metin yaklaşık 2.4:1 oran verir ve büyük metin için gereken 3:1 seviyesini bile karşılamaz. Genellikle turuncuyu koyulaştırmak veya koyu metin kullanmak çözüm olur; öneri, metin renginin ne kadar koyu olması gerektiğini gösterir.
Form alanı kenarlığını kontrol etme
Beyaz üzerindeki açık gri #cccccc kenarlık yaklaşık 1.6:1 oran verir. 1.4.11 ölçütüne göre giriş alanını belirleyen kenarlığın 3:1 oranına ulaşması gerekir; bu nedenle yaklaşık #949494 veya daha koyu bir renk kullanılmalıdır.
Sık sorulan sorular
WCAG AA için hangi kontrast oranı gerekir?
Normal gövde metni için 4.5:1, büyük metin (24px veya kalın yazı tipinde 18.66px) ve kullanıcı arayüzü bileşenleri ile anlamlı grafikler için 3:1 gerekir. AAA, metin için gereksinimi 7:1'e, büyük metin için 4.5:1'e çıkarır.
Logo metninin veya devre dışı düğme metninin gereksinimi karşılaması gerekir mi?
Hayır. WCAG; logolardaki ve marka adlarındaki metinleri, yalnızca dekoratif amaçlı metinleri ve etkin olmayan (devre dışı) kullanıcı arayüzü bileşenlerindeki metinleri muaf tutar.
Sonucum neden başka bir denetleyicinin sonucundan biraz farklı?
Bazı araçlar oranı bir ondalık basamağa yuvarlar veya yukarı yuvarlama yapar. WCAG kesin değeri karşılaştırır; bu nedenle bu araç değeri iki ondalık basamağa keser. Alfa değeri içeren renklerde de küçük farklılıklar görülebilir.
Yeni APCA kontrast yöntemi hakkında ne bilmeliyim?
APCA, gelecekteki bir WCAG sürümü için önerilen farklı bir yöntemdir. Bu araç, ölçtüğü ve güncel erişilebilirlik kurallarının referans aldığı WCAG 2.2'nin parçası değildir.
Gizlilik
Renkler tarayıcınızda denetlenir. Hiçbir şey yüklenmez veya kaydedilmez.