Düşük Kontrast Metin: Gri Yazı Tam Olarak Nerede Okunmaz Olur?

Açık gri metin ekranda sade durur, bunu inkâr etmenin anlamı yok. Ama sade ile okunur aynı şey değil ve ikisi arasındaki mesafenin bir ölçüsü var: kontrast oranı. Tasarım tartışmalarının çoğu bu sayı masaya konmadığı için zevk meselesine dönüşüyor, oysa hesabın kendisi kısa.

Kontrast oranı neyi ölçer

Formül iki rengin bağıl parlaklığını (relative luminance) alır ve şunu yapar: (L1 + 0,05) / (L2 + 0,05). L1 açık olan, L2 koyu olan. Sondaki 0,05 keyfi bir sayı değil, ekran camından yansıyan ortam ışığını temsil eder; o yüzden oran hiçbir zaman sonsuza gitmez. Alt sınır 1:1 (aynı renk), üst sınır beyaz üstüne siyahta 21:1.

Buradaki kelime parlaklık, renk değil. Formülün tonla ilgisi yok, yalnızca ışık miktarına bakıyor. Bunun pratikteki sonucu şaşırtıcı: saf kırmızı (#FF0000) beyaz zeminde 4:1 civarında kalır, yani gövde metni için yeterli değildir. Göze çarpıcı gelmesi kontrastlı olduğu anlamına gelmiyor. Aynı mantıkla, birbirinden çok farklı görünen ama parlaklıkları eşit iki renk 1:1 verir ve gri tonlamaya çevrildiğinde tek bir düz lekeye dönüşür.

Beyaz zeminde grinin sınırı

Somutlaştıralım. Beyaz arka planda:

• #767676 tam 4,54:1 verir. Gövde metni için geçen en açık nötr grilerden biridir.
• #949494 3,03:1 verir. Yalnızca büyük punto için geçer, paragraf için geçmez.
• #AAAAAA 2,3:1 verir. Hiçbir metin boyutu için geçmez.

Arayüzlerde "ikincil metin" diye kullanılan gri, sezgiyle seçildiğinde neredeyse hep #AAA ile #CCC arasına düşüyor. Yani tasarımcının kafasındaki "hafif soluk" ile ölçüm cihazının gördüğü "okunmaz" arasında iki üç ton fark var, hepsi o kadar.

4,5:1 ve 3:1 eşikleri nereden geliyor

WCAG'ın 1.4.3 ölçütü normal metin için 4,5:1, büyük metin için 3:1 ister. Büyük metnin tanımı da net: 18pt (24px) ya da kalınsa 14pt (yaklaşık 18,66px). Eşiğin gevşemesinin sebebi harflerin daha kalın çizgilerle render edilmesi, yani aynı kontrast oranında daha fazla piksel taşıması.

Bu tanım, konuyla ilgili yaygın bir tavsiyeyi de çürütüyor. "Yazıyı büyüt" denip ardından "en az 8pt kullanın" gibi bir alt sınır verilen metinlere sık rastlanıyor; 8pt yaklaşık 10,7 pikseldir ve tarayıcıların varsayılan 16px gövde metninin belirgin altında kalır. Böyle bir öneri büyütmek değil, küçültmeye izin vermektir. Punto düşürüp kontrastı sabit bırakmak da işe yaramaz: 24px'in altına indiğiniz anda 3:1 eşiği geçersizleşir ve 4,5:1'e geri dönersiniz.

Ölçümün yalan söylediği yerler

Oran doğru çıktığı halde metnin okunmadığı birkaç tipik durum var.

Placeholder yazısını etiket yerine kullanmak bunların başında geliyor. Placeholder tarayıcı varsayılanında zaten soluktur ve odaklanınca kaybolur, dolayısıyla formu doldururken alanın ne istediğini hatırlamanız gerekir. Pasif (disabled) durumlar ise standartta kontrast şartından muaf tutulmuş, bu da her soluk şeyi "nasılsa pasif" diye etiketleme alışkanlığını besliyor (bu muafiyeti fazla cömert buluyorum, çünkü kullanıcı bir alanın neden pasif olduğunu okuyamıyorsa hata mesajını da okuyamıyor).

Ters yönde bir tuzak daha var: karanlık temada saf beyazı saf siyaha koymak 21:1 verir ve ölçüm mükemmel görünür, ama parlak harflerin kenarları koyu zeminde taşarak halelenir. Koyu temada #121212 zemin üstünde #E8E8E8 gibi bir metin, hem eşikleri rahat geçer hem gözü yormaz. En yüksek oran her zaman en iyi oran değil.

Bir de fiziksel ortam meselesi var. Kapalı odada, kalibre edilmiş bir dizüstü ekranında, parlaklık %100'de bakıldığında 3:1 gayet iyi durur. Aynı ekran güneşte, telefonda, parlaklık düşükken kırılır. Kontrast eşiği tam da bu koşullar için var; iyi ihtimalde değil, kötü ihtimalde okunmasını garantiliyor.

SEO tarafındaki abartıyı düzeltmek

Kontrast oranı bir sıralama sinyali değil. Arama motorları sayfanızın metin rengiyle arka plan rengi arasındaki oranı ölçüp puan vermiyor, böyle bir kriter yok. Etki dolaylı: okunmayan sayfadan hızla çıkılır, hızla çıkılan sayfa dönüşüm üretmez. Kontrastı düzeltme gerekçesini erişilebilirlik üzerine kurun, arama motoruna bağladığınız anda ilk algoritma söylentisinde tartışmayı kaybedersiniz.

Göz kararını bırakıp kontrolü koda taşıyın

Renkleri CSS değişkeni olarak tek yerde tanımlayın ve kontrast kontrolünü tasarım aşamasında bir kere değil, her dağıtımda çalışan bir adım haline getirin. Düz zemin üstündeki metinde hesap deterministik, otomatik araç bunu güvenle yakalar. Otomatik kontrolün yetmediği tek yer görsel veya gradyan üstündeki yazıdır: orada ölçmeniz gereken şey ortalama değil, harflerin denk geldiği en kötü piksel. Fotoğraf üstüne yazı koyuyorsanız metnin arkasına yarı saydam koyu bir katman eklemek, renk seçmeye çalışmaktan daha sağlam sonuç verir.

Minimalizm kontrastı düşürmeyi gerektirmiyor. Sayfadaki öğe sayısını azaltmak sadeleştirir; okunması gereken metnin rengini soldurmak sadeleştirmez, yalnızca bilgiyi görünmez kılar.