Renk Kontrast Oranı Nasıl Hesaplanır? (WCAG AA/AAA)

Renk kontrast oranı, bir metin renginin arka planından ne kadar ayrıştığını ölçer; 1:1 (aynı renkler) ile 21:1 (saf siyah üzerinde saf beyaz) arasında bir sayıyla ifade edilir. WCAG 2.1, bir metnin okunabilir sayılması için minimum oranlar belirler: AA seviyesinde normal metin için 4,5:1, çoğu erişilebilirlik denetiminin ve yasal gereksinimin referans aldığı eşik budur.

Formül

Oran, rengin ekranda “nasıl göründüğünden” değil, her rengin göreli parlaklığından (luminans) gelir. Dört adım bir hex kodunu luminans değerine dönüştürür:

1. Hex kodunu R, G, B olarak ayırın ve her değeri 255’e bölün, böylece her kanal 0 ile 1 arasında bir değer alır.
2. Her kanalı doğrusallaştırın. Ekranlar renk değerlerini parlaklığa doğrusal biçimde çevirmez, bu yüzden her kanala gama düzeltmesi uygulanır: değer ≤ 0,03928 ise 12,92’ye bölünür; değilse ((değer + 0,055) / 1,055) ^ 2,4 uygulanır.
3. Kanalları ağırlıklandırıp toplayarak göreli luminansı bulun: L = 0,2126 × R + 0,7152 × G + 0,0722 × B. İnsan gözü yeşile en duyarlı olduğu için yeşil en yüksek ağırlığı alır; mavi en düşük ağırlığı alır.
4. Daha açık luminansı daha koyu olana bölün, ikisine de 0,05 ekleyerek: (L_açık + 0,05) / (L_koyu + 0,05).

Sondaki bu + 0,05 işlevsel bir eklentidir: renklerden biri siyaha yaklaştığında oranın sonsuza doğru fırlamasını engeller, ve saf siyah üzerinde saf beyazın çok daha büyük bir sayı yerine tam olarak 21:1’de sabitlenmesinin nedeni de budur.

Çözümlü örnek: beyaz üzerinde #767676

Bu gri-beyaz çifti, tam bir eşiğin üzerinde durduğu için WCAG belgelerinde sıkça karşımıza çıkar; bu da onu elle hesaplamak için uygun bir örnek yapar.

Adım 1. RGB olarak #767676, 118, 118, 118’dir. 255’e bölününce her kanal için 0,4627 çıkar.

Adım 2. 0,4627, 0,03928’in üzerinde olduğundan gama formülüyle doğrusallaştırılır: ((0,4627 + 0,055) / 1,055) ^ 2,4 = 0,1810. Üç kanal da burada eşit olduğundan bu değer R, G ve B için aynı anda geçerlidir.

Adım 3. Luminans: L = 0,2126 × 0,1810 + 0,7152 × 0,1810 + 0,0722 × 0,1810 = 0,1810. Beyazın luminansı 1,0’dır (her kanal tam olarak 1’e doğrusallaşır).

Adım 4. Oran: (1,0 + 0,05) / (0,1810 + 0,05) = 1,05 / 0,2310 = 4,545, yuvarlanınca 4,54:1.

Bu değer, normal metin için AA’nın 4,5:1 sınırının hemen üzerinde, büyük metin için AAA’nın 4,5:1 sınırının da hemen üzerinde, ama normal metin için AAA’nın gerektirdiği 7:1’in oldukça altında. Tek bir hex değeri, metin boyutuna ve hedeflenen seviyeye göre üç farklı sonuç.

Yaygın renk çiftleri pratikte nasıl performans gösteriyor

Çift	Oran	AA normal (4,5:1)	AAA normal (7:1)	AA büyük (3:1)	AAA büyük (4,5:1)
#AAAAAA / #FFFFFF	2,32:1	Geçemedi	Geçemedi	Geçemedi	Geçemedi
#767676 / #FFFFFF	4,54:1	Geçti	Geçemedi	Geçti	Geçti
#2563EB / #FFFFFF	5,17:1	Geçti	Geçemedi	Geçti	Geçti
#333333 / #FFFFFF	12,63:1	Geçti	Geçti	Geçti	Geçti

Bu tablodan iki şey dikkat çekiyor. Birincisi, #2563EB gibi orta doygunlukta bir mavi (yaygın bir buton ve bağlantı rengi) gövde metni için AA’yı geçiyor ama AAA’da tamamen kalıyor; dolayısıyla bağlantılarında AAA hedefleyen bir site daha koyu bir ton kullanmalı. İkincisi, #AAAAAA civarındaki popüler açık gri yer tutucu metin rengi, büyük metin için gereken 3:1 minimumu dahil tüm eşiklerden kalıyor; bu da beyaz üzerinde “sade” gri metnin erişilebilirlik denetimlerinde en sık karşılaşılan bulgulardan biri olmasının nedeni.

Kendi renklerinizi test edin

Aşağıya iki hex değeri girerek tam oranı ve hangi WCAG seviyelerini geçtiğini canlı olarak görün; yükleme veya sunucuya gitme yok.

Renk Kontrast Kontrolü

Ücretsiz, kayıt yok, her cihazda çalışır.

Tam aracı aç

Sık yapılan hatalar

Büyük metnin daha düşük bir eşiği olduğunu unutmak. WCAG, “büyük metni” 18pt (24px) normal kalınlık veya 14pt (18,66px) kalın ve üzeri olarak tanımlar. 24px bir başlık sadece 3:1 gerektirir, 4,5:1 değil; bu yüzden aynı kontrast kuralını her metin boyutuna uygulayan bir tasarım sistemi, zaten uyumlu olan başlıkları reddeder.

Metin kontrastını test edip arayüz bileşeni kontrastını atlamak. WCAG 1.4.11, buton kenarlıkları, form alanı çerçeveleri ve tek başına anlam taşıyan ikonlar gibi metin dışı öğeler için ayrı bir 3:1 minimumu belirler. 7:1 gibi kusursuz bir metin kontrastına sahip bir buton, kenarlığı arka planla kaynaşıyorsa yine de bir denetimden geçemeyebilir.

Kontrastı yanlış arka plana karşı kontrol etmek. Bir fotoğrafın, gradyanın veya yarı saydam bir katmanın üzerindeki metnin tek bir arka plan rengi yoktur, birçok rengi vardır. Oran yalnızca örneklenen o kesin nokta için geçerlidir; üstte açık, altta koyu bir gradyan, ortalama yerine en kötü noktanın kontrol edilmesini gerektirir.

Marka renklerinin muaf olduğunu varsaymak. Bir logo yazısı kontrast gereksinimlerinden muaftır, ancak marka renginde yazılmış gövde metni ve arayüz metni muaf değildir. Logo vurgusu olarak gayet iyi çalışan birçok marka mavisi ve kırmızısı, beyaz üzerinde 16px paragraf metni olarak kullanıldığında 4,5:1’i geçemez.

Sıkça sorulan sorular

AA ile AAA arasındaki fark nedir? AA, çoğu yasal erişilebilirlik gerekliliğinin (ABD’de ADA, AB’de EN 301 549) referans aldığı standarttır ve çoğu denetimin kontrol ettiği seviyedir. AAA daha katıdır ve öncelikle düşük görme keskinliğine sahip kullanıcılara yönelik içerikler için düşünülmüştür; WCAG’in kendisi de AAA’nın her içerik türü için ulaşılabilir olmadığını belirtir, bu yüzden çoğu kuruluş her yerde AAA yerine genel olarak AA’yı hedefler.

Kontrast oranı renk körlüğünü hesaba katıyor mu? Hayır. Kontrast oranı tonu değil luminansı (parlaklığı) ölçer, bu yüzden belirli renkleri ayırt etme yeteneğine bağlı olmadığından birçok renk körlüğü biçimine dolaylı olarak yardımcı olur. Ama bir renk körlüğü kontrolünün yerini tutmaz: iki renk mükemmel kontrasta sahip olabilir ve yine de kırmızı-yeşil renk körlüğü olan biri için ayırt etmesi zor olabilir, eğer aralarındaki fark esasen parlaklıktan değil tondan kaynaklanıyorsa.

Beyaz üzerinde saf siyah neden tam olarak 21:1 veriyor, daha yuvarlak bir sayı değil? Siyahın luminansı 0, beyazınki 1’dir. Bu değerleri oran formülüne koyunca (1 + 0,05) / (0 + 0,05) = 1,05 / 0,05 = 21 çıkar. Tam olarak 21:1’de sabitlenmesinin nedeni +0,05 sabitinin nasıl seçildiğidir, bir tesadüf veya yuvarlama değil.

Koyu mod teması ayrı kontrast kontrolleri gerektirir mi? Evet. Açık bir arka planı koyu bir arka planla değiştirmek oranı korumaz: marka maviniz üzerindeki beyaz metin ile neredeyse siyah üzerindeki marka mavisi metin, iki farklı oranı olan iki farklı luminans çiftidir; bu yüzden her tema, açık moddaki sonucun hâlâ geçerli olduğunu varsaymak yerine kendi başına kontrolden geçmelidir.