Erişilebilirlik için renk kontrastı ve denetleyici

Neden yapmak istersiniz

Beyaz bir sayfadaki gri bir metin satırı kendi monitörünüzde şık görünebilir, ama güneş altında telefonda ya da az gören veya renk körlüğü olan bir okuyucu için okunamaz olabilir. Kontrast, bu sorunun ölçülebilen kısmıdır. Web İçeriği Erişilebilirlik Yönergeleri (WCAG) bunu kontrast oranı denen bir sayıya çevirir ve bir tasarım yayınlanmadan önce kontrol edebileceğiniz geçme sınırları verir.

Bu rehber, bu sayıyı Renk araçları denetleyicisiyle nasıl okuyacağınızı, hangi eşiklerin geçerli olduğunu ve geçen bir oranın neden tek başına yeterli olmadığını, özellikle renklerin anlamı tek başına taşıdığı durumlarda, gösterir.

Adım adım, aracıyla

Renk araçları üç sekmeden oluşur: Palet, Renk geçişi ve Dönüştür ve kontrast. Kontrast denetimi üçüncü sekmededir ve cihazınızda çalışır.

1. Dönüştür ve kontrast sekmesini açın. Başlığın altındaki sekmeyi seçin.
2. İki rengi girin. Metin rengi ve Arka plan rengi alanlarını ayarlayın. HEX, RGB veya HSL alanlarına yazabilirsiniz; diğer ikisi buna göre güncellenir. Böylece bir tasarım dosyasından herhangi bir biçimde kopyaladığınız değer işe yarar.
3. Metnin büyük olup olmadığını belirtin. Geçerliyse Büyük metin (18 punto ve üzeri veya 14 punto kalın) kutusunu işaretleyin.
4. Sonuçları okuyun. Araç Kontrast oranını ve iki satırı gösterir: AA — asgari kontrast ve AAA — gelişmiş kontrast. Her biri Geçti veya Kaldı olarak işaretlenir.
5. Ayarlayın ve paylaşın. Renklerden birini değiştirin ve sonucun güncellenmesini izleyin. Bu sonucun bağlantısını kopyala, ayarları bir meslektaşınıza gönderebileceğiniz bir URL’de saklar.

Renkleri hâlâ seçiyorsanız, Palet sekmesinde Tamamlayıcı veya Komşu gibi bir uyumla temel bir palet oluşturun, sonra kullanmayı planladığınız çiftleri kontrast sekmesine taşıyın. Uyum şemaları dengeli görünen tonları seçer; birlikte okunabilen çiftleri değil. Bu yüzden metin çiftlerini her zaman denetleyin.

Dikkat edilmesi gerekenler

Eşikler. Normal gövde metni için WCAG AA düzeyi en az 4,5:1 oran ister. AAA düzeyi 7:1 ister. Metin, 18 punto ve üzerinde ya da kalınsa 14 punto ve üzerinde büyük sayılır. Büyük metin için AA’da yalnızca 3:1, AAA’da 4,5:1 yeterlidir. Oran, aynı renkler için 1:1’den beyaz üzerinde siyah için 21:1’e kadar uzanır. Aynı 3:1 sınırı, WCAG’nin bir giriş alanının çerçevesi gibi arayüzün anlamlı bölümleri için de belirlediği sınırdır; ancak denetleyici yalnızca yazdığınız iki rengi karşılaştırır.

Kıl payı kaçırmak da kaçırmaktır. 4,4 oranı 4,5 sınırını geçemez. Yukarı yuvarlamayın. Bir marka rengi kıl payı kalıyorsa metni biraz koyulaştırın veya arka planı biraz açın ve yeniden denetleyin.

Sayı nasıl hesaplanır. Oran, iki rengin göreli parlaklığını, yani her birinin ne kadar parlak olduğunu karşılaştırır; her renk önce saklanan sRGB değerinden doğrusal ışığa dönüştürülür. Bu dönüşümün küçük bir kesme noktası vardır. Denetleyici, WCAG 2.x metninde yazan 0,03928 değerini kullanır. Yeni sRGB standardı 0,04045 verir. İkisi o kadar az farklıdır ki oranlar yalnızca çok uzak ondalık basamaklarda ayrışır; ancak WCAG değerini kullanmak bu aracın sonuçlarını yayımlanmış WCAG rakamlarıyla uyumlu tutar.

Biçimler arasında dönüştürmek bir kanalı bir birim kaydırabilir. HEX, RGB ve HSL 8 bitlik değerler kullanır; bu yüzden gidiş dönüş bir kanalı 1 oynatabilir. Bu bir yuvarlamadır, hata değildir ve tam sınırda değilseniz sonucu değiştirmez.

Kontrast, kategorik renkler için tüm hikâye değildir. Grafikler, haritalar ve durum rozetleri kategorileri ayırt etmek için sıklıkla birkaç ton kullanır; örneğin her çubuk veya çizgi için bir renk. Benzer açıklıktaki iki ton arasındaki oran, renkli bir monitörde çok farklı görünseler bile 1:1’e yakın çıkar. Çünkü formül tonu değil, yalnızca açıklığı ölçer. Bu nedenle kategorilerin birbirinden ayırt edilip edilemeyeceği için kontrast oranı yanlış testtir. Renk körlüğü olan kişiler böyle iki tonu aynı renk olarak görebilir; gri tonlamada veya çıktıda ise tamamen birbirine karışabilirler. İkinci bir ipucu ekleyin: doğrudan etiketler, farklı çizgi desenleri veya işaretçi biçimleri ve komşu kategoriler arasında açıklıkta belirgin bir fark. Denetleyici açıklık kısmında yardımcı olabilir; yan yana duran iki kategori rengi arasında düşük bir oran göstererek. Ancak göstergenin erişilebilir olup olmadığını söyleyemez.

Denetim yalnızca girdiğiniz iki rengi kapsar. Metnin arkasındaki bir fotoğrafı, bir katmanı veya tasarımın geri kalanını bilmez.

SSS

Gövde metni için hangi kontrast oranı gerekir?

WCAG AA için en az 4,5:1, AAA için 7:1. Metin büyükse, yani 18 punto ve üzeri ya da kalınsa 14 punto ve üzeri, AA için 3:1, AAA için 4,5:1 yeterlidir. Aracın doğru eşik çiftini uygulaması için araçtaki Büyük metin kutusunu işaretleyin.

Renklerim bana iyi görünürken denetleyici neden kaldı diyor?

Ekranınız, görme durumunuz ve oda ışığı okuyucunun değil, sizindir. Oran, hiçbir tekil ekrana bağlı olmayan, tekrarlanabilir bir ölçüdür. Bir çift kalıyorsa sayıyı gerçek kabul edin ve monitörünüzdeki görünüme güvenmek yerine renkleri ayarlayın.

Yer tutucu metin veya devre dışı düğme kapsama giriyor mu?

Devre dışı denetimler WCAG kapsamı dışındadır, ancak yer tutucu metin gerçek bir metindir ve okunabilmesi için yine yeterli kontrast gerekir. Emin değilseniz çifti denetleyin ve yalnızca yer tutucuda yazan yönergeler yerine görünür bir etiket tercih edin.