Kontrast oranı nasıl hesaplanır? WCAG

Kısa cevap

Web erişilebilirlik yönergeleri WCAG, metin ile zemini karşılaştırmak için iki rengin göreli parlaklığından bir oran hesaplar: sonuç 1:1 ile 21:1 arasında bir sayıdır ve normal metin için en az 4,5:1 istenir. Turuncu ile beyazın ikisi de parlak renkler olduğu için aralarındaki parlaklık farkı küçüktür; bu yüzden turuncu üzerinde beyaz metin çoğu zaman eşiğin altında kalır. Formül yaygın ve kullanışlıdır, ama algıyı her durumda doğru ölçmediği için eleştirilir ve yerine konacak yöntem hâlâ tartışılmaktadır.

Göreli parlaklık: renk bir sayıya dönüşüyor

WCAG kontrast hesabının ilk adımı, her rengi tek bir sayıya indirmektir. Ekrandaki bir renk kırmızı, yeşil ve mavi olmak üzere üç kanal değeriyle tanımlanır; örneğin saf turuncu, onaltılık yazımla #FF8C00, kırmızıda en yüksek değeri, yeşilde orta bir değeri, mavide sıfırı taşır.

WCAG önce bu değerleri 0 ile 1 arasına ölçekler, sonra ekranın ton eğrisini geri alarak ışık miktarıyla orantılı "doğrusal" değerlere çevirir. Ekranlar değerleri doğrusal olmayan bir eğriyle kodlar; bu eğrinin ayrıntısı EK-05'in konusudur. Doğrusal değerlere geçildikten sonra üç kanal ağırlıklı olarak toplanır: kırmızı 0,2126, yeşil 0,7152, mavi 0,0722 ağırlıkla.

Ağırlıklar rastgele değildir: gündüz görmesi tayfın ortasına ayarlıdır ve koni tepkilerinin çakıştığı bu kuşak, BI-09'un anlattığı gibi, aynı enerjideki kırmızı ya da maviden çok daha parlak algılanır. Bu yüzden yeşil kanal parlaklığın yaklaşık yüzde 72'sini taşır, mavi ise yalnız yüzde 7'sini. Saf mavi (#0000FF) çok doygun ve güçlü görünse de göreli parlaklığı yalnız 0,07'dir; saf turuncunun (#FF8C00) göreli parlaklığı ise yaklaşık 0,40'tır.

WCAG'nin kendi metninde küçük bir düzeltme de vardır: doğrusallaştırma adımındaki eşik değeri Mayıs 2021'e kadar eski bir belgeden alınmış 0,03928 olarak yazılıydı; şimdi sRGB standardındaki 0,04045 kullanılıyor. Pratikte sonuç neredeyse hiç değişmez, ama bir formülün de düzeltilen bir metin olduğunu hatırlatır.

Kontrast oranı formülü

İki rengin göreli parlaklığı bulunduktan sonra oran şöyle hesaplanır: açık rengin parlaklığına 0,05 eklenir, koyu rengin parlaklığına 0,05 eklenir ve birincisi ikincisine bölünür. Eklenen 0,05, ekran yüzeyine vuran ortam ışığını ve parlamayı temsil eder; ayrıca siyahın sıfır parlaklığında oranın sonsuza gitmesini önler.

Beyazın parlaklığı 1, siyahınki 0 olduğunda sonuç (1 + 0,05) / (0 + 0,05) = 21 çıkar; bu ulaşılabilecek en yüksek orandır. Aynı iki renk ise her zaman 1:1 verir. Formülün önemli bir özelliği, hangi rengin metin, hangisinin zemin olduğuna bakmamasıdır: beyaz üzerinde siyah metin ile siyah üzerinde beyaz metin aynı oranı alır.

AA ve AAA: iki seviye, iki eşik

WCAG'nin başarı ölçütleri seviyelere ayrılır. Kontrast için iki seviye önemlidir. AA seviyesi, pek çok kurumun ve yasal düzenlemenin temel aldığı asgari düzeydir: normal metin en az 4,5:1, büyük metin en az 3:1 olmalıdır. AAA seviyesi daha sıkıdır: normal metin için 7:1, büyük metin için 4,5:1.

Bu sayıların bir gerekçesi vardır. Yönergelerin açıklama belgesine göre 4,5:1 oranı, yaklaşık 20/40 görme keskinliğine denk gelen görme kaybında genellikle yaşanan kontrast duyarlılığı kaybını telafi etmeyi amaçlar; 7:1 ise yaklaşık 20/80 görme kaybına göre seçilmiştir. Yani eşikler, kusursuz gören bir tasarımcının rahatça okuduğu metni değil, görmesi azalmış bir okurun okuyabildiği metni hedefler.

Eşikler kesin sınırlardır. Beyaz zemin üzerinde #777777 grisi 4,48:1 verir ve normal metinde testi geçemez; bir ton koyusu #767676 ise 4,54:1 verir ve geçer. Göz bu iki griyi neredeyse hiç ayırt edemez, ama test ayırt eder.

Büyük metin ve arayüz öğeleri

Büyük harfler daha kolay okunduğu için WCAG onlara daha düşük bir eşik tanır. Büyük metin en az 18 punto ya da en az 14 punto kalın yazıdır; açıklama belgesine göre bu, CSS'te yaklaşık 24 piksel ve kalın yazıda yaklaşık 18,5 pikseldir. Bu boyutlardaki başlıklar AA seviyesinde 3:1 ile yetinebilir.

Metin dışındaki öğeler için ayrı bir ölçüt vardır. Bir düğmenin kenarı, bir form alanının çerçevesi, bir onay kutusunun işareti ya da bir grafikteki anlamlı çizgi, komşu renklerle en az 3:1 kontrast taşımalıdır. Çok açık gri çerçeveli form alanları, beyaz zeminde bu ölçütü en sık geçemeyen öğelerdir; kullanıcı alanın nerede başladığını göremez.

Formülün eleştirileri ve yeni öneriler

WCAG 2 formülü basit, tekrarlanabilir ve her tarayıcı aracına eklenebilir olduğu için dünyanın her yerinde kullanılır. Ama tasarımcılar ve algı araştırmacıları formülün bazı durumlarda gözün gördüğüyle çeliştiğini uzun süredir söyler.

Kartın sorusu bunun en bilinen örneğidir. Saf turuncu (#FF8C00) üzerinde beyaz metnin oranı 2,33:1'dir; en düşük eşik olan 3:1'i bile karşılamaz. Aynı turuncu üzerinde siyah metin ise 9,00:1 verir ve AAA seviyesini de geçer. Formüle göre siyah metin açık ara kazanır. Oysa birçok tasarımcı ve kullanıcı, özellikle büyük ve kalın yazıda, turuncu üzerindeki beyazı okunaklı, siyahı ise ağır ve kirli bulur. Turuncuyu koyulaştırmak da işe yarar: #E65100 üzerinde beyaz 3,79:1'e, #C2410C üzerinde 5,18:1'e çıkar.

Eleştirilerin bir kısmı formülün yapısına yöneliktir. Formül metin ile zemini simetrik ele alır, oysa açık zeminde koyu metin ile koyu zeminde açık metin aynı şekilde algılanmaz; bu fark karanlık temalarda belirginleşir. Formül yazı boyutunu ve kalınlığını yalnız iki kaba basamakla hesaba katar. Ayrıca koyu renk çiftlerinde kontrastı olduğundan yüksek gösterme eğilimi taşır.

Bu eleştirilere yanıt olarak Andrew Somers öncülüğünde APCA adlı bir yöntem geliştirildi. APCA, metin ile zemini ayrı ele alır, sonucu yönü de gösteren bir değerle verir ve eşiği yazı boyutu ile kalınlığına göre değiştirir. Uzun süre WCAG'nin gelecek sürümü için aday gösterildi; ama W3C'nin WCAG 3 çalışma taslağında belirli bir yöntem adı geçmez. 10 Eylül 2026 tarihli taslak, metin kontrastı gerekliliğini "belirlenecek bir kontrast ölçüsü" ile yazar ve kullanılacak algoritmanın henüz belirlenmediğini, ancak bir boyut–kalınlık etkeni içereceğinin varsayıldığını not eder.

Bu durumda pratik öneri açıktır: bugün geçerli standart WCAG 2.2'dir ve yasal ya da kurumsal gereklilikler ona göre denetlenir. Formülün kör noktalarını bilmek ise, testi geçip yine de okunaksız kalan ya da testi kıl payı kaçırıp aslında iyi okunan tasarımları fark etmeyi sağlar.

Örnek — fotoğraf üzerindeki başlık

Bir haber sitesi, röportaj fotoğraflarının üzerine beyaz başlık yazıyor. Fotoğrafın başlığın düştüğü bölgesinde bazen bir kişinin yüzü ya da boynu var. Ten, bu tasarım için zemin rengi olur ve kontrastı doğrudan belirler.

Örnek ten renkleriyle hesaplandığında tablo çarpıcıdır. Çok açık, pembemsi bir ten tonu (#F1C7A9) üzerinde beyaz metnin oranı yalnız 1,56:1'dir. Orta–sıcak bir ten tonunda (#C68863) oran 2,96:1'e çıkar ve büyük metin eşiğinin hemen altında kalır. Orta–koyu bir tonda (#8D5524) 6,07:1, çok koyu bir tonda (#4A2C1D) 12,58:1'e ulaşır. Aynı beyaz başlık, bir fotoğrafta okunur, öbüründe kaybolur.

Tasarımcının çözümü tek bir fotoğrafa göre karar vermek değildir. Başlığın arkasına yarı saydam koyu bir şerit ya da degrade koymak, kontrastı fotoğraftaki kişinin ten tonundan bağımsız hâle getirir ve her fotoğrafta aynı okunaklılığı sağlar.

Sık yapılan yanlış

Özet

1. WCAG, her rengin göreli parlaklığını doğrusallaştırılmış kırmızı, yeşil ve mavinin ağırlıklı toplamıyla hesaplar ve iki parlaklıktan 1:1 ile 21:1 arasında bir kontrast oranı çıkarır.
2. AA seviyesi normal metin için 4,5:1, büyük metin ve arayüz öğeleri için 3:1; AAA seviyesi normal metin için 7:1 ister ve eşikler yuvarlanmaz.
3. Formül metin ile zemini simetrik ele aldığı ve koyu çiftlerde yanılabildiği için eleştirilir; APCA gibi öneriler var, ama WCAG 3 henüz bir yöntem seçmemiştir.

Kendini sına

1. (Kolay) WCAG'ye göre kontrast oranının alabileceği en yüksek değer nedir ve hangi renk çiftinde ortaya çıkar?
2. (Kolay) AA seviyesinde normal metin için gereken en düşük kontrast oranı kaçtır?
3. (Orta) Turuncu üzerinde beyaz metin neden sıklıkla testi geçemez?
4. (Orta) Göreli parlaklık hesabında yeşil kanal neden en büyük ağırlığı taşır?
5. (Zor) Bir metin 4,499:1 kontrast oranına sahip. AA seviyesini karşılar mı ve bu durum formül hakkında ne düşündürür?
6. (Zor) Fotoğraf üzerindeki beyaz başlık örneğinde, kontrastı kişinin ten tonundan bağımsız kılmak için ne yapılabilir ve neden?

Cevaplar

1. 21:1; siyah ile beyaz arasında ortaya çıkar, çünkü (1 + 0,05) / (0 + 0,05) = 21'dir («Kontrast oranı formülü»).
2. 4,5:1; büyük metin için 3:1 yeterlidir («AA ve AAA: iki seviye, iki eşik»).
3. Turuncu, doygun olmasına rağmen parlak bir renktir; göreli parlaklığı beyaza yakın olduğu için ikisi arasındaki oran düşük kalır. Saf turuncu üzerinde beyaz metin 2,33:1 verir ve 3:1'i bile karşılamaz; siyah metin ise 9,00:1 verir («Formülün eleştirileri ve yeni öneriler»).
4. Gündüz görmesi tayfın ortasına ayarlı olduğu için o kuşaktaki ışık daha parlak algılanır; yeşil kanal parlaklık algısının yaklaşık yüzde 72'sini taşır («Göreli parlaklık: renk bir sayıya dönüşüyor»).
5. Karşılamaz, çünkü eşikler yuvarlanmadan uygulanır. Bu, gözün ayırt edemeyeceği kadar küçük bir farkın testin sonucunu değiştirebildiğini ve eşiklerin algıdaki yumuşak geçişi keskin bir çizgiye çevirdiğini gösterir («AA ve AAA: iki seviye, iki eşik»).
6. Başlığın arkasına yarı saydam koyu bir şerit ya da degrade eklenebilir; böylece zemin rengi fotoğraftaki tene değil şeride bağlı olur ve her fotoğrafta aynı kontrast elde edilir («Örnek — fotoğraf üzerindeki başlık»).

Kaynaklar

• W3C, «Web Content Accessibility Guidelines (WCAG) 2.2», W3C Önerisi, 12 Aralık 2024.
• W3C, «Understanding Success Criterion 1.4.3: Contrast (Minimum)», WCAG 2.2 açıklama belgesi.
• W3C, «W3C Accessibility Guidelines (WCAG) 3.0», Çalışma Taslağı, 10 Eylül 2026.

Sonraki adım

GT-02 bu dersin oranlarını tipografiye taşıyor: değer kontrastını, ince yazı tiplerinde rengin nasıl kaybolduğunu, renkli zeminde beyaz metnin ne zaman çalıştığını ve yan yana titreşen renk çiftlerini ele alıyor. UX-08 ise ölçümü sürece çeviriyor: otomatik kontrast denetleyicilerini, görme simülatörlerini, yüksek kontrast modlarını ve bu araçların kaçırdıklarını anlatıyor.