WCAG kontrast kontrolü birkaç basit adımdan geçer. Hiçbir bilgi tarayıcınızdan dışarı çıkmaz.
- Bir ön plan ve bir arka plan rengi girersiniz. Araç, hex, rgb(), hsl() veya adlandırılmış CSS renklerini kırmızı, yeşil ve mavi kanal değerlerine ayrıştırır.
- Her RGB kanalı, sRGB aktarım işlevi kullanılarak doğrusallaştırılır. Bu, gama kodlu görüntü değerlerini doğrusal ışık yoğunluklarına dönüştürür.
- Doğrusal değerler, insan gözünün her kanala duyarlılığına göre ağırlıklandırılır — kırmızı için 0,2126, yeşil için 0,7152, mavi için 0,0722. Toplam, rengin bağıl parlaklığıdır.
- Kontrast oranı (L1 + 0,05) ÷ (L2 + 0,05)'tir; burada L1 daha açık rengin parlaklığı, L2 ise daha koyu olanınkidir. Eklenen 0,05, formülün saf siyah için de geçerli kalmasını sağlar.
- Oran, WCAG eşikleriyle karşılaştırılır: AA normal metin en az 4,5:1, AA büyük metin 3:1, AAA normal metin 7:1 ve AAA büyük metin 4,5:1 gerektirir. Büyük metin, en az 18pt veya 14pt kalın anlamına gelir.
FAQ
WCAG kontrast kontrolü hakkında sık sorulan sorular.
AA ve AAA arasındaki fark nedir?
AA, çoğu web içeriği için minimum uyumluluk seviyesidir. Normal metin için en az 4,5:1, büyük metin için 3:1 kontrast oranı gerektirir. AAA daha yüksek bir standarttır ve normal metin için 7:1, büyük metin için 4,5:1 gerektirir. Haber sitesindeki gövde metni gibi önemli içerikler için AAA'yı hedeflerken, daha geniş tasarım için AA kullanabilirsiniz. Marka renkleriyle her yerde AAA'yı karşılamak zor olabilir, bu nedenle birçok ekip genel olarak AA'yı hedefler ve mümkün olduğunda anahtar metni AAA'ya yükseltir.
WCAG kapsamında "büyük metin" olarak kabul edilen nedir?
WCAG 2.x, büyük metni normal kalınlık için en az 18 punto (24px) veya kalın için en az 14 punto (yaklaşık 19px) olarak tanımlar. Bir yazı yüzünün parçası olan semboller ve simgeler aynı eşiklere tabidir. Hangi eşiğin arayüzünüz için geçerli olduğundan emin değilseniz, ikisini de kontrol edin — AA Büyük daha düşük bir çıtaya sahiptir (3:1), bu nedenle AA Normal'de kalan çoğu renk çifti, metin yeterince büyük olduğunda AA Büyük'ü geçer.
Renk çiftim neden AA Büyük'ü geçiyor ama AA Normal'de kalıyor?
Çünkü AA Büyük yalnızca 3:1 oranı gerektirirken AA Normal 4,5:1 gerektirir. WCAG, daha büyük karakterlerin daha az kontrastla bile okunması daha kolay olduğu için büyük metin için daha düşük bir eşik belirler. Örneğin 4,0:1 puan alan bir renk çifti, AA Büyük'ü (3:1 eşik) geçer ancak AA Normal'de (4,5:1 eşik) kalır. Bu, beyaz arka planlarda ön plan olarak kullanılan daha açık marka renklerinde çok yaygındır.
Erişilebilirlik denetimi için yalnızca bu araca güvenebilir miyim?
Bu araç tek bir şeyi kontrol eder — iki düz renk arasındaki WCAG 2.x kontrast oranı. Gerçek erişilebilirlik daha fazlasını içerir: odak göstergeleri, yazı tipi boyutu ve kalınlığı, bilgiyi iletmenin tek yolu olarak renk ve ekran okuyucular ile yakınlaştırma araçlarıyla uyumluluk. Uygulamanızın erişilebilirliğinin tam bir resmini elde etmek için bu kontrast kontrolünü diğer denetim yöntemleriyle birlikte kullanın.
Giriş hangi renk biçimlerini kabul eder?
3, 4, 6 veya 8 basamaklı hex kodlarını (# ile veya # olmadan), eski virgüllü sözdiziminde veya modern boşlukla ayrılmış sözdiziminde rgb() ve rgba() değerlerini, herhangi bir standart renk tonu birimiyle (deg, rad, grad, turn) hsl() ve hsla() değerlerini, hsv(), hwb() ve CSS Color Module Level 4 spesifikasyonundaki 150 adlandırılmış CSS renginden herhangi birini yapıştırabilirsiniz. Renk tamamen cihazınızda ayrıştırılır.