Renk kontrastı denetleyicinin arkasındaki hikâye
Düşük kontrast, webdeki en yaygın erişilebilirlik sorunlarından biridir. Kuralları sihirli sayılar gibi görünür, ama her birinin bir nedeni vardır: gözün yaşla birlikte duyarlılık kaybetmesi ve ekranların ışığı nasıl ürettiği.
4,5 ve 7 nereden geliyor
WCAG 2.0, Aralık 2008'de W3C önerisi oldu. Yazarlar ISO 9241-3 standardındaki 3:1 asgari değerinden yola çıktı ve 80 yaş civarında yaygın olan yaklaşık 20/40 görme keskinliğindeki kontrast duyarlılığı kaybını telafi etmek için yükseltti. Böylece AA düzeyi için 4,5:1 ortaya çıktı. AAA düzeyi, 7:1, aynısını yaklaşık 20/80 görme için yapar.
Göreli parlaklık
Formül önce her sRGB kanalını doğrusal ışığa çevirir, sonra kırmızı, yeşil ve maviyi 0,2126, 0,7152 ve 0,0722 ile ağırlıklandırır. Bunlar ITU-R BT.709 televizyon standardındaki ağırlıklardır, çünkü göz en çok yeşile duyarlıdır. Oran, açık olan parlaklık artı 0,05'in koyu olan artı 0,05'e bölümüdür. Bu 0,05 ekrandan yansıyan ışığı temsil eder ve ölçeği 1:1 ile 21:1, yani beyaz üzerine siyah arasında sınırlar.
Metnin ötesinde
Büyük metin, en az 24 px veya kalın ise 18,66 px, daha düşük kontrastta okunabilir kalır ve AA için yalnızca 3:1 gerektirir. Haziran 2018'de yayımlanan WCAG 2.1, 1.4.11 Metin Dışı Kontrast başarı ölçütünü ekledi: giriş alanı kenarlıkları, odak halkaları, simgeler ve bir grafiği anlamak için gereken parçalar çevrelerine karşı 3:1'e ulaşmalıdır.
Renk körlüğü ve gelecek
Yaklaşık her 12 erkekten 1'inde ve her 200 kadından 1'inde, çoğunlukla kırmızı ve yeşilde, renk görme bozukluğu vardır. Kontrast parlaklık üzerinden ölçülür, bu yüzden geçen bir çift okunabilir kalır, ancak yalnızca tonda ayrışan renkler birbirine benzeyebilir. Buradaki simülasyon Machado, Oliveira ve Fernandes'in 2009 modelini kullanır. WCAG 3 taslakları, yazı boyutunu ve metnin açık üzerine koyu mu koyu üzerine açık mı olduğunu da hesaba katan daha yeni bir yöntem olan APCA'yı inceler.
Sık sorulan sorular
İyi kontrast erişilebilirlik için yeterli mi?
Hayır. Birçok gereklilikten yalnızca biridir. WCAG ayrıca rengin anlam aktarmanın tek yolu olmamasını ister, örneğin bir bağlantıya veya hataya simge ya da alt çizgi eklenerek.
Simülasyon bir kişinin gördüğünü tam olarak gösterir mi?
Tam dikromazinin iyi bir yaklaşımıdır. Pek çok kişide daha hafif bir biçimi vardır ve herkes biraz farklı görür, bu yüzden onu bir rehber olarak kullanın.
WCAG 2 oranı yerine APCA mı kullanmalıyım?
Bugünkü uyumluluk için WCAG 2 oranını kullanın. Ekim 2023'te yayımlanan WCAG 2.2 aynı formülü korur ve EN 301 549 gibi yasa ve standartlar ona atıf yapar. APCA hâlâ geliştirilmektedir.
İlgili araçlar
Renk kontrastı denetleyici
Ücretsiz WCAG renk kontrastı denetleyici: metin ve arka plan rengini HEX, RGB veya HSL olarak girin, AA ve AAA sonuçlarıyla kontrast oranını görün, geçen en yakın rengi alın ve renk körlüğünü simüle edin.
Renk paleti
Oluşturun, kilit ve tarayıcınızda renkli paletler. HEX, CSS değişkenlerini veya JSON ihracat PNG veya SVG'i kopyalayın ve bir fotoğraftan renkler çıkarın.
Renkli tekerlek
Etkileşimli bir tekerlek üzerinde bir renk seçin, tamamlayıcı, analog, triadic ve diğer paletler ve HEX, RGB, HSL, HSV veya CMYK.
Gradient editör
Tarayıcınızda lineer ve radial CSS gradients oluşturun. Drag color duraklar, açısı ayarla ve CSS, HEX, RGB, HSL, HSV veya CMYK kopyalayın.
Renkler
Renkli ekranlarda ve baskıda nasıl çalışır: RGB, CMYK, HSL, hex, renkli tekerlek, gradients, kontrast ve PictorX araçları.
Bunu denemeye hazır mısın?
Pencere PictorX tarayıcınızda - yükleme yok, başlamak için gerekli kredi kartı yok.
Renk kontrastı denetleyiciyi aç