Tahmine dayanmadan WCAG kontrast oranını tutturmak

Normal gövde metni için WCAG'nin AA düzeyi, arka planına karşı en az 4.5:1 kontrast oranı ister. Büyük metin 3:1 ister. Arayüz bileşenleri ve anlam taşıyan grafikler 3:1 ister. AAA düzeyi metni 7:1, büyük metni ise 4.5:1 seviyesine çıkarır. Oranlar 1:1 (aynı renkler) ile 21:1 (saf beyaz üzerine saf siyah) arasında değişir.

Bunu gözle değerlendiremezsiniz. Monitörünüzde benzer derecede okunaklı görünen iki çift, eşiğin iki farklı yanında durabilir, dolayısıyla oranın hesaplanması gerekir.

Eşikler

Bunlar üç başarı ölçütünden gelir: AA düzeyinde 1.4.3 Kontrast (En Az), AAA düzeyinde 1.4.6 Kontrast (Geliştirilmiş) ve AA düzeyinde 1.4.11 Metin Dışı Kontrast; sonuncusu denetimlerin görsel sınırlarını ve grafiklerin anlaşılması için gereken kısımlarını kapsar.

Büyük metin, en az 18 punto ya da kalınsa 14 punto demektir; bu da kabaca 24px normal veya 18,5px kalın karşılığına gelir. "Bir başlık" demek değildir: kurallar açısından 20px'lik bir başlık normal metindir ve tam 4.5:1 ister.

Birkaç şey muaftır: tümüyle süsleme amaçlı metin, etkin olmayan bir denetimin içindeki metin, başka önemli görsel içerik barındıran bir resmin parçası olan metin ve logo yazıları. Yer tutucu ve yardımcı metinler muaf değildir.

Oran gerçekte neyi ölçer

Formül iki rengin bağıl luminans değerini karşılaştırır:

ratio = (L_lighter + 0.05) / (L_darker + 0.05)

Bağıl luminans, bir rengin ne kadar ışık yaydığını gösteren, 0 (siyah) ile 1 (beyaz) arasında bir sayıdır. Her kanalda sRGB gama eğrisi geri alınarak, ardından kanallar ağırlıklandırılarak hesaplanır:

L = 0.2126 R + 0.7152 G + 0.0722 B     (on linearised channels)

İki tarafa da eklenen 0.05, ekrandan yansıyan bir miktar ortam ışığını modeller; en yüksek değerin sonsuz değil 21 olmasının nedeni de budur.

Bundan iki sonuç çıkar. Oran yalnızca luminansa bağlıdır, renk tonuna değil; dolayısıyla iki renk ton olarak birbirinden çok uzak olsa bile birbirinin üstünde neredeyse görünmez olabilir. Bir de simetriktir, yani hangi rengi ön plan saydığınız fark etmez.

Bağıl luminans, parlaklık demek değildir

Şu ağırlıklara bakın. Luminansın yaklaşık %72'sini yeşil, %21'ini kırmızı, ancak %7'sini mavi sağlar. Bu, bir rengin ne kadar canlı göründüğünün değil, insan görüşünün bir modelidir ve alışana kadar yanlış hissettiren sonuçlar üretir.

• Beyaz üzerine saf sarı #FFFF00 yaklaşık 1.07:1'dir, yani neredeyse görünmezdir; sarı güçlü bir renk gibi hissettirse bile.
• Aynı sarı siyah üzerinde yaklaşık 19.6:1'dir, siyah üzerine beyaza neredeyse denk.
• Siyah üzerine saf mavi #0000FF yaklaşık 2.4:1'dir ve her ölçütten kalır; kalın ve doygun görünmesine rağmen.

HSL açıklığının kötü bir vekil olmasının nedeni de budur. İki renk HSL'de %50 açıklıkta durup çok farklı luminansa sahip olabilir, çünkü HSL renk tonu ile açıklığı bağımsız sayar, görme ise saymaz. Bir açıklık adımının kontrast adımı olduğunu varsaymak yerine dönüştürün, sonra ölçün.

Tekrar tekrar yapılan hatalar

Beyaz üzerine gri gövde metni. Asıl mesele bu. Beyaz üzerinde AA'yı geçen en açık gri yaklaşık #767676'dır ve 4.54:1 eder. Bir ton daha açığı olan #777777 4.48:1'dir ve kalır. #999999 gibi sevilen "soluk" griler 2.9:1 dolayına düşer, yani gerekenin üçte ikisinden azdır. Beyaz üzerinde AAA istiyorsanız kabaca #595959 gerekir; bu da tam olarak 7:1'dir.

Yer tutucu ve yardımcı metin. İkincil oldukları için gövde metninden birkaç ton açık ayarlanırlar. Yine de metindirler ve yine 4.5:1 isterler.

Yarı saydam renkler. Öğe %60 opaklıkta duruyorsa bildirilen renkten alınan bir oranın hiçbir anlamı yoktur. Ekranda gerçekte görünen birleşik rengi hesaplayın, sonra onu ölçün.

Görsellerin, geçişlerin ve videonun üzerindeki metin. Oran pikselden piksele değişir ve önemli olan en kötü pikseldir. Alışılmış çözüm, fotoğrafın koyu kalmasını ummak yerine metnin arkasına yarı saydam bir örtü koymaktır.

Marka renkli düğmeler. Orta tonlu bir marka rengi üzerindeki beyaz metin çoğu zaman 3:1 ile 4.5:1 arasına düşer; grafik nesne olarak geçer, etiket olarak kalır. Düğmeyi koyulaştırın ya da bu başarısızlığı bile bile kabul edin.

Odak göstergeleri ve yalnızca simgeden oluşan düğmeler. İkisi de 3:1'lik metin dışı kuralına girer. Aynı rengin biraz farklı bir tonundaki odak halkası sık kaçırılan bir noktadır; bir düğmenin tek içeriği olan gri bir simge de öyle.

Ters çevirerek yapılan koyu tema. Açık bir paleti ters çevirmek oranları korumaz, çünkü luminans ortaya göre simetrik değildir. Saf siyah üzerine saf beyaz en yüksek değeri, 21:1'i verir, ama birçok kişi ortaya çıkan ışımayı rahatsız edici bulur; bu yüzden çok koyu bir gri üzerinde kırık beyaz, örneğin #121212 üzerinde #E6E6E6 ile yaklaşık 15:1, yaygın bir orta yoldur.

Ekran görüntüsünden ölçmek. Kenar yumuşatmalı metnin kenarına konan bir damlalık, metin rengini değil metin ile arka planın karışımını örnekler. Kalın bir çizginin ortasından örnekleyin ya da daha iyisi, değerleri CSS'inizden okuyun.

Tahmini ortadan kaldıran bir akış

Önce arka planı sabitleyin, sonra ön planı eşiği biraz payla geçene kadar koyulaştırın ya da açın ve o çifti kaydedin. Paleti onaylı renklerden değil onaylı çiftlerden kurun: bir renk tek başına erişilebilir olmaz, ancak bir bileşim içinde olur. Yalnızca durağan durumu değil her durumu, koyu tema yayımlıyorsanız her iki temayı da kontrol edin.

Son bir not. WCAG'nin gelecekteki bir sürümü için daha yeni bir algısal model olan APCA geliştiriliyor ve özellikle koyu arka plan üzerindeki açık metinde epey farklı davranıyor. Bilmekte yarar var, ama bugün uyulacak sayılar yukarıdaki WCAG 2 oranlarıdır.