İki renk arasındaki kontrast oranını ölçün ve WCAG AA ile AAA'yı geçip geçmediğini tarayıcınızda anında görün.
Kontrast oranı, WCAG'ın bir metnin okunabilir olup olmadığına karar vermek için kullandığı sayıdır. İki rengin bağıl parlaklığını 1:1 (aynı) ile 21:1 (beyaz üzerine saf siyah) arasında bir ölçekte karşılaştırır. AA düzeyinde WCAG normal metin için en az 4.5:1, büyük metin için 3:1 ister; AAA düzeyi bunları 7:1 ve 4.5:1'e yükseltir. Arayüz bileşenlerinin — simge düğmeleri, alan kenarlıkları, odak halkaları — yanlarındaki renge karşı 3:1'e ihtiyacı vardır.
Hesap, basit bir parlaklık farkı değildir. Her sRGB kanalı önce doğrusallaştırılır: 0.03928 eşiğinin altında 12.92'ye bölünür, üstünde normalleştirilip 2.4 kuvvetine yükseltilir. Bu adım vardır, çünkü ekran değerleri gama kodludur ve yayılan ışıkla orantılı değildir. Ardından doğrusal kanallar kırmızı için 0.2126, yeşil için 0.7152 ve mavi için 0.0722 ile ağırlıklandırılır; bu, her ana rengin algılanan parlaklığa katkısını yansıtır — yeşil açık ara baskındır. Son olarak iki parlaklık (L1 + 0.05) / (L2 + 0.05) formülüne girer; buradaki 0.05 terimi, gerçek bir ekranın siyah gösterirken bile yansıttığı ışığı modeller. Beyaz üzerine siyahın sonsuz değil de tam olarak 21:1 olmasının nedeni bu sabittir.
Yayına almadan önce kullanın, çünkü marka paletleri sanılandan çok daha sık sınıfta kalır. #777777 gibi orta bir gri, beyaz üzerinde 4.48:1 verir — parlak bir monitörde rahat, AA eşiğinin yüzde biri kadar altında ve güneşte bir telefonda gerçek bir sorun. Öneri düğmesi tam olarak bu durumu hedefler: metin renginin HSL açıklığını yarım puanlık adımlarla yukarı ve aşağı gezdirir ve seçtiğiniz renk tonuyla doygunluğu koruyarak 4.5:1'e ulaşan ilk değerde durur. Dürüst bir sınır: oran yalnızca parlaklığı ölçer, dolayısıyla renk körü okurlar için renk tonu karışıklığı hakkında hiçbir şey söylemez ve büyük metin kuralının ötesinde yazı kalınlığı hakkında da bir şey söylemez. Her şey tarayıcınızda yerel olarak çalışır.
Bağıl parlaklık: 0–1 aralığına normalleştirilmiş her sRGB kanalı c için, c ≤ 0.03928 iken c / 12.92, aksi hâlde ((c + 0.055) / 1.055)^2.4 kullanın; ardından L = 0.2126·R + 0.7152·G + 0.0722·B. Kontrast oranı = (L1 + 0.05) / (L2 + 0.05); burada L1 iki rengin açık olanıdır. Eşikler: normal metin AA için 4.5:1, normal metin AAA için 7:1, büyük metin AA ve arayüz bileşenleri için 3:1, büyük metin AAA için 4.5:1.
18pt (24px) ve üzeri metin ya da kalın yazıldığında 14pt (yaklaşık 18.7px) ve üzeri. Büyük metnin AA'da yalnızca 3:1'e, AAA'da 4.5:1'e ihtiyacı vardır, çünkü daha kalın ve daha büyük harf biçimleri düşük kontrastta da okunaklı kalır.
Çünkü eşik keskin bir sınırdır. #777777 beyaz üzerinde 4.48:1 verir, AA ise 4.5:1 ister; yani 0.02'lik bir farkla kalır. Bir adım koyulaştırıp #767676 yapmak 4.54:1'e çıkarır ve geçer — öneri düğmesinin yaptığı tam olarak budur.
Evet. WCAG 1.4.11 başarı ölçütü, bir kullanıcı arayüzü bileşeni ya da anlam taşıyan bir grafik ile yanındaki renkler arasında 3:1 ister. Alan kenarlıkları, açma/kapama durumları, odak göstergeleri ve yalnızca simgeden oluşan düğmeler bunun kapsamına girer.
Bu araç, erişilebilirlik mevzuatının, denetimlerin ve tasarım sistemlerinin şu anda referans aldığı WCAG 2.x oranını uygular. APCA, WCAG 3 için önerilen algısal algoritmadır; farklı sayılar üretir ve henüz bir uyumluluk koşulu değildir.
Hayır. Parlaklık ve oran cihazınızda JavaScript ile hesaplanır. Hiçbir şey herhangi bir sunucuya gönderilmez veya bir yerde saklanmaz.
Vai.la, herhangi bir URL'yi tıklama istatistikleri, QR Code ve kendi biolink'inizle birlikte kısa bir bağlantıya dönüştürür.
Vai.la, araçların nasıl kullanıldığından veya sonuçlarına dayanarak alınan kararlardan sorumlu değildir.