Görsel Üzerindeki Yazıda Kontrastı Gerçekten Ölçmek

Fotoğraf üzerine beyaz yazı koyup üstüne bir siyah katman atmak, erişilebilirlik tavsiyelerinin en çok tekrarlananı. Katman gerçekten çalışıyor, ama "koydum, oldu" kısmı çalışmıyor: WCAG'in 4.5:1 eşiği iki düz renk arasında tanımlı bir orandır, bin renkli bir fotoğrafla değil. Hesabı doğru yerden yapmak gerekiyor.

Oran neye göre hesaplanıyor

Kontrast formülü iki rengin bağıl parlaklığını alır ve (L1+0.05)/(L2+0.05) ile bir sayı üretir. Girdisi iki renktir. Arka planı bir fotoğraf olduğunda tek bir L2 yoktur, harfin altında yüzlerce farklı piksel vardır ve otomatik denetleyicilerin çoğu bu durumda ya sessiz kalır ya da CSS'te yazan arka plan rengini ölçer, yani gerçekte görülen şeyi değil.

Doğru yaklaşım ortalama almak değil, en kötü pikseli almak. Metin kutusunun kapladığı alandaki en açık piksel hangisiyse (beyaz yazı için) hesabı ona göre yap. Ortalama parlaklık, gökyüzünün parladığı tek bir köşede yazının kaybolmasını gizler.

Küçük ama yaygın bir hata

3:1 eşiği büyük harfle yazılmış metin için değil, büyük punto için geçerli. WCAG'in tanımı 18pt (yaklaşık 24px) ya da kalınsa 14pt (yaklaşık 18.66px) üzeridir. Başlığı büyük harfe çevirmek eşiği düşürmez, sadece okuma hızını yavaşlatır. Ayrıntılar için WCAG 1.4.3 açıklaması yeterli.

Katmanın opaklığını gözle ayarlama

Siyah katmanın üstündeki rengi tahmin etmek yerine kompozitini hesapla, üç satırlık iş. Alfa a ile siyah katmanın altındaki C rengi C×(1−a) olur; sonra sRGB doğrusallaştırmasını uygulayıp orana bakarsın.

Sonuç çoğu tasarımcıyı şaşırtıyor. Fotoğrafın en açık pikseli beyazsa ve üstüne %50 siyah katman koyduysan, beyaz metinle oran yaklaşık 4:1 çıkar. Yani eşiğin altında, hem de "yarı yarıya kararttım" hissiyle. Aynı hesapta opaklığı %60'a çıkarmak oranı 5.7:1'e taşır. Aradaki fark gözle bakınca zar zor seçiliyor, denetimde ise geçer ile kalır farkı.

Blur ve gölge neyi çözer

Bulanıklaştırma kenarları siler, parlaklığı silmez. Parlak bir fotoğrafı blurlarsan elinde daha düz ama hâlâ parlak bir zemin kalır; beyaz yazı yine kaybolur. Blur'un asıl faydası kontrast kazandırmak değil, harf sınırlarıyla yarışan detayı ortadan kaldırmak. Kararma işini yine katman yapmalı.

Metin gölgesi ise daha kırılgan. Formül gölgeyi tanımıyor, denetim araçları ölçemiyor, ince gövdeli fontlarda gölge harfin içine değil sadece dışına düşüyor. Gölgeyi son rötuş olarak kullan, kontrast stratejisi olarak değil.

Zemini seçmek, düzeltmekten kolay

Sık atlanan çözüm: metni fotoğrafın sakin bir bölgesine taşımak. Bir görselde genelde büyükçe bir düz alan bulunur, gökyüzü ya da gölgede kalan bir yüzey. Yazıyı oraya koyunca ne katman ne blur gerekir. Ama bunu yaparken kırpma davranışını da düşün: aynı fotoğraf mobilde dar oranla kırpılacaksa, sakin bölge kadrajdan çıkabilir ve metin bambaşka bir zeminin üstüne düşer. Kontrastı sadece masaüstü kompozisyonunda test etmek, hatanın telefonlarda ortaya çıkmasını garanti eder.

Pratikte akış

• Metnin bineceği alandaki en açık (beyaz yazı için) ya da en koyu (siyah yazı için) pikseli bul.
• Katmanın opaklığını o piksele göre hesapla, gözle değil.
• Sonucu kırpılmış mobil kadrajda tekrar kontrol et.
• Color Contrast Analyzer gibi bir araçla ekrandan örnekleyerek doğrula.