Kontrast oranı nasıl hesaplanır.
Kontrast oranı, iki rengin bağıl parlaklıklarının oranıdır ve 1:1 (aynı renk) ile 21:1 (siyah–beyaz) arasında bir değer alır.
Kontrast, erişilebilirlikte göz kararının en çok yanıldığı yerdir. İki rengin «yeterince farklı» görünmesi hiçbir şey söylemez: parlak sarı üzerine beyaz metin göze canlı gelir ama 1,1:1 ölçer ve okunmaz. Bu yüzden kontrast bakılmaz, hesaplanır.
Formül: bağıl parlaklık
Hesap iki adımdır. Önce her renk için bağıl parlaklık bulunur, sonra ikisinin oranı alınır. Bağıl parlaklık, rengin insan gözü tarafından algılanan aydınlığıdır ve kanal ağırlıkları eşit değildir — yeşil, kırmızıdan ve maviden çok daha fazla ağırlık taşır.
- Her kanalı 0–1 aralığına indir: değeri 255'e böl.
- Gama düzeltmesini kaldır: değer 0,03928'in altındaysa 12,92'ye böl, üstündeyse (değer + 0,055) / 1,055 işleminin 2,4. kuvvetini al.
- Ağırlıklı topla: 0,2126 × kırmızı + 0,7152 × yeşil + 0,0722 × mavi.
- Oranı bul: (parlak + 0,05) / (koyu + 0,05). Sonuç 1 ile 21 arasındadır.
Yeşilin 0,7152 ağırlık taşıması sezgiye aykırı görünebilir ama gözün yeşil-hassas koni hücrelerinin baskınlığını yansıtır. Pratik sonucu şudur: bir paleti koyulaştırmak isteyen tasarımcı için en etkili kanal yeşildir, ve iki rengin yeşil değeri yakınsa aralarındaki kontrast düşük kalır — kırmızı ve mavi ne kadar farklı olursa olsun.
Formüldeki 0,05 sabiti de tesadüf değil: ekranların hiçbir zaman mutlak siyah üretemediği, her zaman bir miktar çevresel yansıma olduğu varsayımını temsil eder. Bu yüzden oran hiçbir zaman sonsuz olmaz, tavanı 21:1'dir.
Eşik değerleri
WCAG üç ayrı eşik tanımlar ve hangisinin geçerli olduğu metnin boyutuna ve içeriğin türüne göre değişir.
- Normal metin, AA (1.4.3) — 4,5:1.
- Büyük metin, AA (1.4.3) — 3:1. Büyük metin: 18,66px kalın ya da 24px normal ve üstü.
- Normal metin, AAA (1.4.6) — 7:1.
- Büyük metin, AAA (1.4.6) — 4,5:1.
- Arayüz bileşeni ve anlam taşıyan grafik, AA (1.4.11) — 3:1. Metin değil, SINIR ölçülür.
- Devre dışı bileşen ve saf dekorasyon — eşik yok, kapsam dışı.
Büyük metin istisnası sık yanlış kullanılır. 18,66px kalın sınırı, tarayıcı varsayılanı 16px iken 14pt'a karşılık gelir; clamp ile ölçeklenen bir başlıkta değer ekran genişliğine göre değişir ve dar ekranda eşiğin altına düşebilir. Bu yüzden ölçeklenen tipografide güvenli yol, büyük metin istisnasına hiç yaslanmamaktır.
Ölçülmüş bir örnek
Soyut kalmaması için bu sitenin kendi palet çiftleri. Değerler yukarıdaki formülle hesaplandı ve doğrulama süiti her koşumda yeniden hesaplıyor — bir renk kayarsa test kırmızı yanar.
- Gövde metni / kâğıt zemin — 18,15:1. AAA eşiği 7:1; iki buçuk kat üstünde.
- İkincil metin / kâğıt zemin — 7,07:1. AAA eşiğinin tam üstünde, bilinçli seçim.
- Vurgu rengi / kâğıt zemin — 10,22:1. Bağlantı ve odak halkası bu rengi kullanır.
- Gövde metni / kart zemini — 16,01:1.
- Koyu zeminde vurgu / mürekkep — 4,55:1. AA eşiği 4,5:1'in hemen üstü; koyu bantta bilinçli olarak farklı bir ton kullanılır.
- Hata rengi / kâğıt zemin — 6,25:1. Yalnız form hatasında; dekorda asla.
İkincil metnin 7,07:1 ölçmesi dikkat çekicidir: değer AAA eşiğinin yalnız yüzde biri üstünde. Bu, tesadüfen değil hesapla seçilmiş bir gridir — daha açık bir gri estetik olarak tercih edilebilirdi ama eşiğin altına düşerdi. Kontrast burada bir tasarım kısıtı olarak çalışmış.
Yaygın hatalar
Kontrast hesabında tekrar eden birkaç hata var; hepsi ölçümü geçersiz kılar.
Saydamlık üzerinden ölçmek. Yarı saydam bir metin rengi, altındaki zeminle karışır ve gerçek renk hesaplanan renk değildir. Ölçüm, tarayıcının hesapladığı NİHAİ piksel değeri üzerinden yapılmalıdır — bu yüzden ciddi denetimler ekran görüntüsünden değil, canlı sayfadan okur.
Zemini yanlış varsaymak. Metin bir görselin, gradyanın ya da video karesinin üstündeyse tek bir zemin rengi yoktur. Bu durumda en kötü durum ölçülmeli, ortalama değil — ve pratikte doğru çözüm zemine bir maske katmanı koyup zemini sabitlemektir.
Hover ve odak durumlarını atlamak. Bir bağlantının normal hâli 7:1 ölçebilir ama hover'da açılan tonu 3:1'e düşebilir. Her etkileşim durumu ayrı bir renk çiftidir ve ayrı ölçülmelidir.
Kontrast bir renk çiftinin değil, bir DURUMUN özelliğidir.
Son olarak: kontrastı bir kez ölçüp geçmek yetmez. Palet dosyası düzenlendiğinde ölçüm bayatlar. Kalıcı çözüm, çiftleri bir teste bağlamaktır — değer eşiğin altına düştüğü anda dağıtım kırmızı yansın, kimsenin gözüne kalmasın.
Karanlık tema ayrı bir palettir
Karanlık tema, açık temanın renklerini ters çevirmek değildir ve kontrast açısından tamamen ayrı bir hesap gerektirir. Sebep fiziksel: koyu zemin üzerinde açık metin, açık zemin üzerinde koyu metinden farklı algılanır — ince yazı tipleri koyu zeminde optik olarak kalınlaşır ve saf beyaz metin parlama (halation) yapar.
Pratik sonuç şudur: karanlık temada gövde metni için saf beyaz kullanmak, kontrast hesabı 21:1 versin diye cazip görünür ama okuma konforunu düşürür. Hafif kırık bir beyaz — parlaklığı yüzde birkaç düşürülmüş — hem eşiğin çok üstünde kalır hem gözü yormaz.
Vurgu rengi de ayrı ele alınmalıdır. Açık zeminde 10:1 ölçen koyu bir mavi, koyu zeminde 1,5:1'e düşer ve okunmaz hâle gelir. Bu yüzden ciddi palet sistemleri koyu zemin için ayrı bir vurgu tonu tanımlar. Bu sitede tam olarak öyle yapılmış: koyu bantta kullanılan açık vurgu tonu mürekkebe karşı 4,55:1 ölçüyor ve AA eşiğinin üstünde kalıyor.
Her iki temanın da ayrı ayrı ölçülmesi ve ayrı ayrı teste bağlanması gerekir. Tek temayı ölçüp «diğeri de tutar» varsaymak, en sık yapılan ve en kolay yakalanan hatadır.
Ölçüm nasıl otomatikleştirilir
Kontrastı elle ölçmenin sorunu tekrar edilebilir olmamasıdır. Bir kez ölçülüp geçilen değer, palet dosyasına yapılan bir sonraki dokunuşta sessizce bayatlar. Kalıcı çözüm ölçümü koda bağlamaktır ve bunun iki katmanı var.
- Token katmanı — palet çiftleri kaynak dosyadan okunur ve formülle hesaplanır. Hızlı, tarayıcı gerektirmez, her koşumda çalışır. Yakaladığı şey: bir rengin eşiğin altına kaydırılması.
- Render katmanı — canlı sayfadan gerçek piksel değerleri okunur. Yavaş, tarayıcı gerektirir. Yakaladığı şey: saydamlık, üst üste binen katmanlar, gradyan ve hover durumları — token katmanının göremediği her şey.
- İkisi birlikte — token katmanı ucuz olduğu için her koşumda; render katmanı kritik ekranlar için. Biri diğerinin yerine geçmez.
Bu ayrım önemlidir çünkü çoğu ekip yalnız birincisini kurar ve ikincisinin yakaladığı sınıf hatalara kör kalır. Saydam bir katman altındaki metin, token hesabında kusursuz görünür; ekranda okunmaz. Tersi de doğrudur: yalnız render ölçümü yapan bir ekip, henüz hiçbir sayfada kullanılmayan ama palette duran bozuk bir çifti göremez.
Bu sitede iki katman da kurulu. Token katmanı yedi palet çiftini her koşumda hesaplıyor; render katmanı kritik ekranlarda gerçek piksellerden okuyor. İkinci katmanın varlığı tesadüf değil — bir kusur ölçülerek yakalandıktan sonra eklendi ve o hikâye metin dışı kontrast sayfasında anlatılıyor.
Bir kez ölçülen kontrast, bir sonraki palet düzenlemesinde bayatlar. Ölçüm koda bağlanmadıysa yapılmamış sayılır.