Renk kontrastı ve erişilebilirlik: WCAG oranları ve çözümler

Beyaz zemin üzerinde açık gri metin, tasarım dosyasında temiz görünür. Parlak güneş altında bir telefonda ya da az gören biri için ise okumak zahmetlidir. Üstelik bu, en yaygın erişilebilirlik hatasıdır: WebAIM Million 2026 (yeni sekmede açılır), en popüler bir milyon ana sayfanın %83,9'unda düşük kontrastlı metin buldu; sayfa başına ortalama 34 ayrı örnek.

İyi haber şu: Kontrast ölçülebilir, eşikler nettir ve çözümler çoğunlukla ucuzdur. Bu rehber size rakamları, ücretsiz araçları ve marka renklerinizi sıfırdan başlamadan düzeltmenin bir yolunu veriyor.

Renk kontrast oranı nedir?

Kontrast oranı, iki rengin, genellikle metin ile arka planının, göreli parlaklığını (luminans) karşılaştıran bir sayıdır. WCAG bunu sabit bir formülle hesaplar ve sonuç 1:1'den (fark yok, beyaz üzerine beyaz) 21:1'e (beyaz üzerine siyah) kadar uzanır. Sayı ne kadar yüksekse, iki rengi ayırt etmek o kadar kolaydır.

Formül (L1 + 0,05) / (L2 + 0,05) şeklindedir; burada L1 açık rengin, L2 koyu rengin göreli parlaklığıdır. Bunu elle hesaplamanız hiç gerekmeyecek, ama bir ayrıntı önemli: Yalnızca parlaklık sayılır, renk tonu sayılmaz. Yeşil zemin üzerindeki kırmızı metnin canlı görünüp yine de düşük puan almasının nedeni bu.

Gözden kaçan diğer ayrıntı yuvarlamadır. W3C'nin 1.4.3 açıklama belgesi (yeni sekmede açılır), hesaplanan değerlerin “yuvarlanmaması gerektiğini (ör. 4,499:1, 4,5:1 eşiğini karşılamaz)” söylüyor. Yani beyaz üzerinde #767676 gri (4,54:1) geçerken #777777 (4,48:1) geçemez; oysa kimse ikisini gözle ayırt edemez.

WCAG hangi kontrast oranını şart koşuyor?

Yasaların ve sözleşmelerin çoğunun atıf yaptığı AA seviyesinde, normal metnin arka planına karşı en az 4,5:1, büyük metnin ise 3:1 kontrasta ihtiyacı var (1.4.3 başarı ölçütü). Arayüz bileşenleri ve anlam taşıyan grafikler, yanlarındaki renklere karşı 3:1 kontrast ister (1.4.11). Daha katı AAA seviyesi ise normal metin için 7:1, büyük metin için 4,5:1 ister (1.4.6).

Neden 4,5:1? W3C, bu oranın “yaklaşık 20/40 görmeye denk görme kaybı yaşayan kullanıcıların genellikle deneyimlediği kontrast duyarlılığı kaybını telafi ettiğini” açıklıyor. Başka bir deyişle eşik, görmesi orta derecede azalmış kişilere göre belirlenmiş; buna kendini asla engelli olarak tanımlamayacak pek çok yaşlı müşteri de dahil.

Bazı metinler muaftır: logolar ve marka adları, tamamen dekoratif metinler, kimseye görünmeyen metinler, başka önemli görsel içerik barındıran bir resmin içindeki metinler ve etkin olmayan (devre dışı) kontrollerdeki metinler. Logonuz olduğu gibi kalabilir. Logonuzun soluk rengiyle yazılmış bir paragraf ise kalamaz.

Hangi metin büyük metin sayılır?

WCAG'de büyük metin en az 18 punto, kalınsa en az 14 punto demektir. W3C bunları yaklaşık 24 CSS piksel ve kalın için 18,5 piksel olarak çeviriyor. Bundan küçük her şey tam 4,5:1 oranına ihtiyaç duyar. Gövde metni, görsel açıklamaları, form etiketleri, fiyatlar ve alt bilgi bağlantıları neredeyse hiçbir zaman büyük metin değildir; bu yüzden yüksek oranı karşılamaları gerekir.

Uygulamada bu şöyle görünür. Beyaz üzerinde #949494 gri 3,03:1 puan alır. Bu, 28 piksellik bir başlık için yeterlidir, aynı renkteki 16 piksellik bir paragraf içinse başarısızdır. Pek çok site başlıklarda geçer, altındaki her şeyde kalır.

İnce ve dekoratif yazı tiplerine ekstra dikkat gerekir. W3C, kenar yumuşatma (anti-aliasing) nedeniyle “özellikle ince veya alışılmadık yazı tiplerinin kullanıcı aracıları tarafından” seçtiğiniz renkten “çok daha soluk bir renkte işlenebileceğini” belirtiyor. Marka yazı tipiniz ince bir kalınlıktaysa, 4,51'i hedeflemek yerine 4,5:1'in üzerinde bir pay bırakın.

Kontrast düğmeler, simgeler, odak göstergeleri ve grafikler için de geçerli mi?

Evet. 1.4.11 başarı ölçütü (AA) uyarınca, bir kontrolü, onun durumunu ya da bir grafiği tanımlamak için insanların görmesi gereken her şeyin, yanındaki renklere karşı 3:1 kontrastı olmalıdır. Bu; form alanı çerçevelerini, metin etiketi olmayan simgeleri, odak çerçevelerini, onay kutusu ve açma/kapama anahtarı durumlarını, grafiklerdeki çizgileri ve dilimleri kapsar. Bir düğmenin içindeki metin ise yine 4,5:1'e ihtiyaç duyar.

• Form alanları: Beyaz üzerinde açık gri #CCCCCC bir çerçeve 1,61:1 puan alır. Nereye yazılacağını gösteren tek şey bu soluk çizgiyse, ölçütü karşılamaz.
• Düğmeler: WCAG her düğmenin çevresinde görünür bir çerçeve şart koşmaz. W3C'nin 1.4.11 açıklama belgesi (yeni sekmede açılır), bir sınırın yalnızca kontrolü tanımlamanın başka görsel bir yolu olmadığında gerektiğini söylüyor. Bir düğme yalnızca renkli şekliyle tanınıyorsa, bu şeklin sayfaya karşı 3:1 kontrastı olmalı.
• Simgeler: Yanında metin olmayan bir arama büyüteci, istek listesi kalbi veya sepet simgesi 3:1'e ihtiyaç duyar.
• Odak göstergeleri: Klavye odağını gösteren çerçeve, çevresindeki arka planla kontrast oluşturmalı. Daha yeni odak ölçütlerini WCAG 2.2 rehberimiz ele alıyor.
• Grafikler: Çizgi grafikteki çizgiler ve pasta grafikteki dilimler, aynı değerler metin olarak da gösterilmiyorsa 3:1'e ihtiyaç duyar.
• Devre dışı kontroller muaftır, ama insanların bir düğmeye basılıp basılamayacağını yine de anlayabilmesi gerekir.

Akan metin içindeki bağlantılar özel bir durumdur. Altları çizili değilse ve yalnızca renkle gösteriliyorlarsa, W3C'nin G183 (yeni sekmede açılır) tekniği bağlantı rengi ile çevresindeki metin arasında 3:1 ister; ikisinin de arka plana karşı yine 4,5:1'i sağlaması gerekir. Bunların hepsini karşılayan üç renk bulmak zordur. Alt çizgi çok daha kolaydır.

Renk kontrastını nasıl kontrol ederim?

Belirli renk çiftleri için ücretsiz bir kontrast denetleyicisi, canlı sayfalar için tarayıcınızın geliştirici araçlarını, bir sitedeki sorunlu alanları bulmak için de otomatik bir taramayı kullanın. Ardından araçların kaçırdıklarını gözle kontrol edin: fotoğraf ve renk geçişli (gradyan) arka planlar üzerindeki metinler, üzerine gelme ve odak durumları, yer tutucu metinler ve hata mesajları. Bunun çoğu sayfa şablonu başına birkaç dakika sürer.

• WebAIM Contrast Checker (yeni sekmede açılır): İki hex kodu girin; normal metin, büyük metin ve grafik nesneler için geçti/kaldı sonucuyla birlikte oranı görün. Açıklık kaydırıcısı, ölçütü geçen en yakın tonu bulmak için kullanışlıdır.
• Colour Contrast Analyser (yeni sekmede açılır): Vispero'nun Windows ve macOS için ücretsiz masaüstü uygulaması. Damlalık aracı ekrandaki herhangi bir pikselden örnek alır; bu da görsel üzerindeki metinler, PDF'ler ve uygulamalar için işe yarar. Bir renk körlüğü simülatörü de içerir.
• Chrome DevTools: Bir metni inceleyin ve renk seçiciyi açın. Kontrast oranı bölümü (yeni sekmede açılır) AA ve AAA için çizgiler gösterir ve ölçütü geçen bir renk önerebilir. CSS Overview paneli de sayfadaki tüm kontrast sorunlarını listeler.
• Otomatik denetleyiciler: Tarayıcı eklentileri ve Lighthouse tüm sayfadaki düşük kontrastlı metni işaretler, ama görsel veya renk geçişli arka plan üzerindeki metinleri çoğu zaman geçti ya da kaldı diye değil, elle incelenmesi gereken öğeler olarak işaretler.

Araçların yetmediği yerde elle örnek alın. Büyük bir manşet görselinin üzerindeki metin için görselin en açık kısmını en açık harflerin arkasında kontrol edin; W3C, yeterli kontrastı olmayan arka plan görsellerini bilinen bir hata olarak listeliyor (F83). Düğmelerin üzerine gelin, onlara Tab ile ulaşın, bir form hatası tetikleyin, sunuyorsanız koyu moda geçin. Koyu tema da başarısız olabilir: #121212 arka plan üzerinde #757575 gri 4,07:1 puan alır. Web sitenizin erişilebilirliğini nasıl test edersiniz rehberimiz kontrastı diğer hızlı elle kontrollerle birlikte ele alıyor.

Markamı değiştirmeden düşük kontrastı nasıl düzeltirim?

Genellikle metin ve küçük öğeler için marka renginizin daha koyu bir tonunu ekleyerek, orijinali ise büyük başlıklar, arka planlar ve illüstrasyonlar için saklayarak. Pek çok marka rengi yalnızca küçük boyutlarda başarısız olur. Açık bir marka rengi üzerinde beyaz metni koyu metinle değiştirmek çoğu zaman yeterlidir ve ziyaretçilerin çoğu yalnızca sayfanın daha kolay okunduğunu fark eder.

1. Her marka renginin, ana arka planlarınıza karşı en az 4,5:1 sağlayan ve metinde güvenle kullanılabilecek bir sürümünü oluşturun; bunu gövde metni, bağlantılar ve küçük simgeler için kullanın.
2. Parlak orijinal rengi büyük başlıklar (orada 3:1 yeterli), arka planlar, illüstrasyonlar ve süsleme için kullanın.
3. Açık marka renklerinde düğme metnini beyazdan koyuya çevirin.
4. Fotoğrafların üzerindeki metnin arkasına opak veya yarı saydam bir panel koyun.
5. Her durumu kontrol edin: üzerine gelme, odak, ziyaret edilmiş, seçili, hata ve yer tutucu.
6. Geçen renk çiftlerini tasarım token'ları veya tema ayarları olarak kaydedin; böylece yeni sayfalar onları yeniden icat etmek yerine devralır.

Renk körlüğü için tasarım: Neden tek başına renk yetmez?

Kontrast ve renk ayrı sorunlardır. Colour Blind Awareness (yeni sekmede açılır) verilerine göre yaklaşık her 12 erkekten 1'inde ve her 200 kadından 1'inde, çoğunlukla kırmızı-yeşil türünde bir renk görme eksikliği var. WCAG 1.4.1 (yeni sekmede açılır) (A seviyesi), rengin bilgi aktarmanın tek görsel yolu olmaması gerektiğini söyler; bu yüzden rengi metin, simge, desen veya alt çizgiyle destekleyin.

• Form hataları: Yalnızca kırmızı bir çerçeve yetmez. Alanın yanına, tercihen bir simgeyle birlikte “Posta kodunu girin” gibi bir mesaj ekleyin.
• Stok ve durum: Bir ürünün yanındaki yeşil veya kırmızı nokta pek çok alışverişçiye hiçbir şey söylemez. “Stokta var” ya da “Tükendi” yazın.
• Grafikler: Renk eşleştirmeye dayanan bir açıklama kutusu (lejant) zor okunur. Çizgileri doğrudan etiketleyin ya da desenler ve farklı çizgi stilleri kullanın.
• Bağlantılar: Gövde metninde, yukarıdaki nedenlerle, altlarını çizin.

Sorunu kendiniz görmek için Chrome DevTools görme eksikliklerini taklit edebilir; Colour Contrast Analyser'da da bir simülatör var. Kontrast burada da işe yarar: Oran renk tonunu değil açıklığı ölçtüğü için, oranı yüksek iki renk, tonları birbirine benzese bile ayırt edilebilir kalır. Az gören ve başka yetersizlikleri olan kişilerin cihazlarını nasıl ayarladığı hakkında daha fazlası için engelli kişilerin interneti nasıl kullandığına bakın.

Yüksek kontrast modları ve kontrast düğmeleri yeterli mi?

Hayır. İşletim sistemi kontrast temaları ve sayfa içi kontrast düğmeleri, daha fazla kontrasta ihtiyaç duyduğunu bilen ve onu açan kişilere yardım eder. Ama WCAG sayfanızı varsayılan hâliyle değerlendirir; yani her ziyaretçinin ilk gördüğü renklerin de ölçütü geçmesi gerekir. Bir düğme, daha fazlasını isteyenler için ek bir seçenektir, başarısız renklerin çözümü değil.

Bazı engelli kişiler, sizin renklerinizi kendi renkleriyle değiştiren Windows kontrast temalarını kullanır. Sitenizi böyle bir tema açıkken test etmeye değer: Arka plan görsellerinden oluşturulmuş simgeler kaybolabilir, yalnızca kutu gölgesiyle (box-shadow) çizilmiş odak stilleri görünmez hâle gelebilir. CSS prefers-contrast medya sorgusu da sistem ayarlarında bunu isteyen kişilere daha yüksek kontrastlı bir sürüm sunmanıza olanak tanır.

Kendi widget'ımızda bir kontrast ayarı ve renk körlüğü profili var; bazı ziyaretçiler bunları yararlı buluyor. Yine de size aynı şeyi söyleriz: Gövde metniniz beyaz üzerinde #999999 ise CSS'i değiştirin. Widget, daha fazla kontrast isteyen ziyaretçiye bunu elde etmenin bir yolunu verir. Başarısız varsayılan renkleri geçer hâle getirmez; belgelerimizdeki WCAG başvuru sayfası da bunu söylüyor.