← Tüm rehberler

Renk kontrastı (WCAG) nedir? Oranlar, AA ve AAA

· 2 dk okuma

Güzel görünen ama okunması zor bir metin, özellikle düşük görme yetisi olanlar ve güneş ışığında telefona bakanlar için sorundur. WCAG, bu okunabilirliği ölçmek için bir kontrast oranı tanımlar.

Kontrast oranı nedir?

Kontrast oranı, yazı rengi ile arka plan rengi arasındaki parlaklık farkını 1:1 ile 21:1 arasında bir sayıya çevirir. 1:1 aynı renk (hiç fark yok), 21:1 beyaz üzerinde siyahtır (en yüksek fark).

Nasıl hesaplanır?

Önce her rengin göreli parlaklığı hesaplanır (ekranın ışık üretme şekline göre kırmızı, yeşil ve maviye farklı ağırlıklar verilir). Sonra iki parlaklık şu formülle oranlanır:

oran = (açık parlaklık + 0,05) / (koyu parlaklık + 0,05)

WCAG'ın istediği oranlar

WCAG 2 iki başarı düzeyi tanımlar:

Örnekler (beyaz arka planda)

Gerçek hesaplanmış birkaç değer:

#0f1b2d koyu lacivert  17,28:1  AAA geçer
#1d4ed8 koyu mavi       6,70:1  AA geçer
#767676 gri             4,54:1  AA'yı sınırda geçer
#777777 gri             4,48:1  AA'dan kalır
#3b82f6 parlak mavi      3,68:1  yalnızca büyük metinde AA
#999999 açık gri        2,85:1  kalır

Küçük bir ton farkı (#767676 ile #777777) AA sınırını geçmeye ya da kalmaya yetebilir. Gri yazılar en sık kalan renklerdir.

Büyük metin ne demek?

WCAG'a göre en az 18 punto (yaklaşık 24 piksel) ya da kalın yazıda en az 14 punto (yaklaşık 18,7 piksel) büyüklüğündeki metin büyük sayılır ve daha düşük oran yeterlidir.

Kendin dene

Renk kontrast kontrolüne yazı ve arka plan rengini gir: oran, önizleme ve AA ile AAA ölçütlerinin geçip geçmediği tek tabloda görünür. Hiçbir şey tarayıcından çıkmaz.

Bu yazı genel bilgilendirmedir. Yasal erişilebilirlik gereksinimleri ülkeye ve sektöre göre değişir.

Diğer rehberler