WCAG Kontrast Denetleyici
Metin/arka plan renk çiftinin kontrast oranını WCAG AA ve AAA kriterlerine göre denetleyin — normal ve büyük metinde canlı önizlemeli.
1.142 görüntülenme
Hızlı kahverengi tilki tembel köpeğin üstünden atlar
Büyük metin örneği 24px
Oran Nasıl Hesaplanır?
WCAG'ın kontrast oranı formülü (L1 + 0,05) / (L2 + 0,05)'tir; L1 açık rengin, L2 koyu rengin bağıl parlaklığıdır — sonuç her zaman 1:1 (aynı renk) ile 21:1 (beyaz üzerinde saf siyah) arasına düşer. Bağıl parlaklık, RGB kanallarının basit bir ortalaması değildir; her kanal önce sRGB gama eğrisi tersine çevrilerek doğrusallaştırılır (0,03928'in altındaki değerler 12,92'ye bölünür, geri kalanı ((c+0,055)/1,055)^2,4 formülünden geçer), ardından algısal ağırlıklarla toplanır: L = 0,2126R + 0,7152G + 0,0722B. Yeşil kanal, gözün algıladığı parlaklığa mavi kanaldan yaklaşık on kat daha fazla katkı sağlar; bu yüzden bir rengin yeşil ve mavi değerlerini birbiriyle değiştirmek, ham parlaklığı aynı kalsa bile görünen ağırlığını büyük ölçüde değiştirebilir.
Somut bir örnek: beyaz zemin üzerinde saf orta gri #767676 tam olarak 4,54:1 oranı verir — normal metin için WCAG AA eşiği olan 4,5:1'in az üstünde. Bir ton daha koyulaştırıp #757575 yapınca oran 4,48:1'e düşer ve AA'yı kaçırır. Pek çok "bana normal görünüyor" gri-beyaz tasarımın denetimden sessizce kalmasının nedeni budur: geçen ve geçmeyen gri arasındaki görsel fark tek bir RGB adımıdır — göze görünmez ama otomatik bir tarayıcıya ya da güneş ışığında ekran büyütücü kullanan birine son derece görünürdür.
Bilinmesi Gerekenler
WCAG 2.1, metin boyutuna göre iki AA eşiği belirler: normal metin için 4,5:1 ve daha gevşek olan büyük metin için 3:1 — büyük metin, 18pt (24px) normal kalınlık veya 14pt (18,7px) kalın ve üzeri olarak tanımlanır, çünkü kalın kontur çizgileri düşük kontrastta bile okunaklı kalır. Daha sıkı AAA seviyesi normal metinde 7:1, büyük metinde 4,5:1 ister. Metin dışı arayüz öğeleri (ikonlar, giriş kutusu kenarlıkları, odak göstergeleri) WCAG 2.1 SC 1.4.11 kapsamında komşu arka plana karşı ayrı bir 3:1 gerekliliğine tabidir.
Bu sayılar keyfi değildir — az gören, renk körü ve yaşa bağlı kontrast duyarlılığı azalmış kullanıcılar üzerine yapılan araştırmalardan gelir ve aynı zamanda ADA (ABD içtihatlarında) ve EN 301 549 (Avrupa Erişilebilirlik Yasası'nın referans aldığı AB standardı) gibi erişilebilirlik mevzuatlarında hukuki bir referans noktası olarak kullanılır. Otomatik bir denetimde bulunan kontrast hatası, web erişilebilirliği davalarında en sık gösterilen ihlallerden biridir; bu yüzden birçok tasarım sistemi 4,5:1 tabanını her tasarımcının tek tek kontrol etmesine bırakmak yerine doğrudan renk token'larına gömer.
Sıkça Sorulan Sorular
Metinle arka planı takas etmek oranı değiştirir mi?
Hayır — formül her zaman açık rengi paya koyar, oran simetriktir. Okunurluk öznel olarak farklı hissedilebilir (koyuda açık metnin ışıması) ama WCAG puanı aynıdır.
Büyük metin neye denir?
24 px (18 pt) normal veya ~18,7 px (14 pt) kalın ve üstü. Büyük metinden AA'da yalnız 3:1 istenir çünkü iri harfler düşük kontrastta da okunur kalır.
Marka rengim geçemiyor — ne yapayım?
Dekorda tutun, metin kullanımını geçene kadar koyulaştırıp açın; ton skalası üretici bunun için birebir. Placeholder ve devre dışı durumlar gereklilikten muaftır ama onları da makul tutun.
Neden ham RGB ortalaması yerine bu gama-düzeltmeli parlaklık formülü kullanılıyor?
Çünkü insan gözünün parlaklık algısı doğrusal değildir ve kanallar arasında eşit ağırlıklı değildir — ham RGB'yi ortalamak, parlak sarıyı (#ffff00) ve orta maviyi (#0000ff) göze neredeyse aynı parlaklıkta gösterirdi, oysa sarı göze çok daha parlak gelir. Gama-çözme adımı, sRGB'nin değerleri doğrusal ışık yerine sıkıştırılmış biçimde sakladığını düzeltir; 0,2126/0,7152/0,0722 ağırlıkları ise gözün yeşile, kırmızıya göre daha fazla, maviye göre çok daha fazla duyarlı olmasını yansıtır. Bu adımlardan biri atlanırsa sonuç, kontrastın gerçekte nasıl algılandığıyla örtüşmeyen sayılar üretir.
Geçen bir kontrast oranı, renk körü kullanıcılar için de sorunsuz demek midir?
Tam olarak değil — oran yalnızca parlaklık farkını ölçer, ton farkını değil; bu yüzden iki renk 4,5:1'i geçse bile, farkları esas olarak tondan kaynaklanıyorsa (örneğin eşit parlaklıktaki bazı kırmızı/yeşil çiftleri) deuteranopi (yeşil körlüğü) olan biri için ayırt edilemez kalabilir. Yüksek bir kontrast oranı renk körlüğü erişilebilirliği için gerekli ama tek başına yeterli değildir; bunu bir parlaklık farkıyla ya da renk dışı bir ipucuyla (ikon, alt çizgi, desen) desteklemek her iki durumu da kapsar.
Benzer Araçlar
Sorun Bildir
WCAG Kontrast Denetleyici
Yorumlar
Henüz yorum yok — ilk yorumu siz yazın!