WCAG Renk Kontrastı: Web Siteleri İçin Tasarım Rehberi

WCAG renk kontrastı, metin ile arka plan arasındaki parlaklık farkını değerlendirmeye yardımcı olur. Kurumsal renklerin şık görünmesi, her ziyaretçinin metni rahat okuduğu anlamına gelmez. Tasarım ekibi marka kimliğini korurken sayfanın okunabilirliğini de ölçmelidir.

WCAG renk kontrastı için temel eşikler

WCAG 2.2 AA düzeyinde normal metin en az 4,5:1 kontrast gerektirir. Büyük metin için alt sınır 3:1 olur. Büyük metin tanımı, en az 18 punto normal ya da 14 punto kalın yazıyı kapsar. Punto ile CSS pikseli aynı ölçü değildir.

Metin türü	AA alt sınırı
Normal metin	4,5:1
Büyük metin	3:1
Logo içindeki metin	Bu metin kontrastı ölçütü istisna tanır.

W3C kontrast açıklaması, ölçütün kapsamını ve istisnalarını açıklar. Ekip contrast ratio sonucunu yuvarlayarak eşik üstüne taşımamalıdır. WCAG contrast kontrolü, tahmine dayalı renk seçiminin yerini somut ölçüme bırakır.

WCAG renk kontrastı testinde farklı durumlar

Ayrıca tasarımcı ana metnin yanında menüleri, form açıklamalarını ve hata mesajlarını da incelemelidir. Fotoğraf üstündeki yazı, görselin farklı bölgelerinde farklı kontrast verir. Sabit bir arka plan katmanı bu değişkenliği azaltmaya yardımcı olur.

Açık ve koyu tema ayrı kontroller gerektirir. Fareyle üzerine gelme, odak ve seçim durumları da test kapsamına girer. Erişilebilir renk kontrastı, birkaç başlığın rengini değiştirmekten daha kapsamlı bir tasarım kararıdır.

WCAG renk kontrastı ve marka kimliği

Bununla birlikte marka ekibi her kurumsal rengi gövde metninde kullanmak zorunda değildir. Ana renk vurgu alanlarında kalırken metin daha güçlü bir ton kullanır. Tasarım sistemi, onaylı renk çiftlerini tanımlayarak sonraki sayfalarda tutarlılık sağlar.

Kurumsal arayüzünüzün tasarım hedeflerini NEXTDİJİ ile değerlendirin. Proje kapsamına renk çiftlerini ve etkileşim durumlarını ekleyin.

Renk ölçümünü tasarım sistemine taşıyın

Öncelikle renk envanterini bileşen düzeyinde çıkarın. Tasarımcı yalnız ana sayfanın ekran görüntüsünü incelemekle yetinmemelidir. Çünkü aynı gri ton, beyaz kartta ve açık mavi kutuda farklı sonuç verir. Her kayıt; ön plan rengini, arka plan rengini, yazı boyutunu ve kullanım durumunu içermelidir.

Örneğin tasarım sistemi metin, yardımcı metin, bağlantı ve hata mesajı için ayrı renk rolleri tanımlar. Ancak bu rollerin adları tek başına uygunluk kanıtı oluşturmaz. Geliştirici her renk çiftini gerçek sayfada ölçer. Böylece tasarım dosyasıyla tarayıcı çıktısı arasındaki farkları yakalar.

Ayrıca düğme sınırları ve anlam taşıyan simgeler için metin dışı kontrastı inceleyin. İlgili ölçüt, kontrolü tanımak için gerekli görsel bilgilerde komşu renge karşı en az 3:1 oran ister. Bununla birlikte her dekoratif çizgi aynı kapsama girmez. Ekip nesnenin görevini ve ilgili istisnaları ayrı ayrı değerlendirmelidir.

Fotoğraf, saydamlık ve koyu tema için test senaryosu

Bir hizmet sayfasının fotoğraf üzerinde beyaz başlık kullandığını düşünün. Ancak mobil kırpma, koyu alan yerine açık gökyüzünü başlığın arkasına taşıyorsa kontrast değişir. Bu nedenle yalnız tek ekran genişliğinde ölçüm yapmayın. Farklı kırpma noktalarında metnin arkasındaki en zayıf alanı kontrol edin.

Benzer şekilde saydam arka plan, altında kalan görsele göre renk değiştirir. Tasarımcı gerektiğinde daha güçlü bir katman veya düz renkli metin kutusu tercih eder. Böylece okunabilirlik, fotoğraf seçimine bütünüyle bağımlı kalmaz. İçerik ekibi yeni kapak yüklediğinde aynı senaryoyu tekrar test eder.

Koyu temada ise bütün renkleri ters çevirmek doğru bir yöntem değildir. Örneğin hata kırmızısı ve bağlantı mavisi bazı temalarda ayrı tonlar gerektirir. Ayrıca devre dışı kontrol ile etkin kontrol arasındaki farkı açık biçimde koruyun. Kullanıcı hangi eylemi gerçekleştireceğini görünümden ve açıklamadan anlamalıdır.

Yayın öncesinde hangi kanıtları saklamalısınız?

Test kaydına ekran adresini, bileşen adını ve ölçüm tarihini ekleyin. Bunun yanında renk kodlarını ve hesap sonucunu saklayın. Sınırdaki bir sonucu yukarı yuvarlamayın. Örneğin 4,49:1 değeri, 4,5:1 şartını karşılamaz.

Ardından testi klavye odağı, fare etkileşimi ve hata durumu için tekrarlayın. Yalnız renk değişimiyle hata anlatan bir form, kontrastı yüksek olsa bile ayrı sorun taşır. Bu nedenle açıklayıcı hata metni ve uygun simge gibi ek işaretler kullanın. Son kontrolü gerçek tarayıcı çıktısı üzerinden tamamlayın.

Proje yöneticisi bu kayıtları ortak bileşenlerle ilişkilendirir. Böylece marka ekibi ana rengi değiştirdiğinde hangi ekranların ek kontrol istediğini görür. Düzenli bakım, her yeni sayfada aynı tartışmayı baştan yürütme ihtiyacını azaltır. Kurumsal renk rehberiyle teknik test listesi aynı sürümü takip etmelidir.

Örnek uygulama: Kurumsal teklif düğmesi

Bir firmanın açık mavi zemin üzerinde beyaz metin kullandığını varsayalım. Öncelikle düğmenin normal görünümünü ölçün. Ardından fare etkileşimi ve klavye odağı durumlarını ayrı inceleyin. Çünkü tasarımcı bazen farklı durumlarda farklı renk kodları kullanır. Yalnız normal görünümün geçmesi diğer durumları doğrulamaz.

Örneğin metin küçükse büyük yazı istisnasını kullanmayın. Bunun yerine ön planı veya arka planı yeterli kontrast sağlayacak biçimde değiştirin. Ayrıca odak göstergesinin düğme ve çevresiyle ilişkisini test edin. Böylece kullanıcı hem etiketi okur hem etkin kontrolü takip eder. Sonrasında mobil görünümde aynı kontrolleri tekrarlayın.

Ancak ölçüm sonucunu tek başına tasarım onayı saymayın. Düğmenin metni de eylemi açıkça anlatmalıdır. Örneğin “Devam” yerine işlemin bağlamına uygun bir teklif ifadesi seçin. Bu nedenle görsel kalite, içerik ve etkileşim testlerini aynı kabul kaydında birleştirin. Ekip bir sonraki kampanyada bu ortak bileşeni yeniden kullanır.

Sık sorulan sorular

Koyu tema tek başına yeterli mi?

Hayır. Her tema kendi metin ve arka plan çiftleriyle ölçüm gerektirir.

Renk dışında işaret gerekir mi?

Evet. Hata ve durum mesajları, metin gibi ek ipuçlarıyla anlamı desteklemelidir.