WCAG'ye göre kontrast oranı kaç olmalı?

AA düzeyinde normal metin için en az 4,5:1, büyük metin ve arayüz bileşenleri için en az 3:1. AAA düzeyinde normal metin için 7:1, büyük metin için 4,5:1.

Büyük metin ne demek?

W3C'ye göre en az 18 punto ya da en az 14 punto kalın yazı. Birçok gövde fontunda bu, varsayılan boyutun yaklaşık 1,5 katıdır. Kalın yazıda yaklaşık 1,2 katıdır.

4,49:1 yeterli sayılır mı?

Hayır. W3C oranın yuvarlanmamasını ister. 4,499:1 bile 4,5:1 eşiğini karşılamaz. 4,49:1 de karşılamaz.

Logo ve pasif butonlar kurala dahil mi?

Hayır. Logo ya da marka adındaki yazı ve pasif bir arayüz bileşenindeki yazı için kontrast şartı yoktur.

Yarı saydam renkleri hesaplayabilir miyim?

Bu araç yalnızca opak hex kodu alır. Yarı saydam bir renkte, zeminin üstünde oluşan son opak rengi bulun ve onu girin.

Kontrast oranı hesaplayıcı: WCAG renk kontrastı

Kontrastı hesaplayın

Kontrast hesaplayıcı

Metin rengi (hex)

Arka plan rengi (hex)

JavaScript kapalı olduğu için aşağıda örnek renklerin sonucu görünüyor. Formülü aşağıdaki "Formül ve kaynak" bölümünde bulabilirsiniz.

Normal metin böyle görünür.

Büyük metin böyle görünür.

Arayüz kenarı

Kontrast oranı

3,54:1

Normal metin · AA en az 4,5:1Geçmiyor
Normal metin · AAA en az 7:1Geçmiyor
Büyük metin · AA en az 3:1Geçiyor
Büyük metin · AAA en az 4,5:1Geçmiyor
Arayüz bileşeni · AA (1.4.11) en az 3:1Geçiyor

Normal metin AA'yı geçmiyor. Aynı tonda geçen en yakın renkler:

Koyu ton: #767676 (4,54:1)

Hex kodunu yazın ya da renk seçiciyi kullanın. Oran her değişiklikte yeniden hesaplanır. Öneriler yalnızca metin rengini değiştirir, arka plana dokunmaz.

Sonucu nasıl okursunuz

Hesaplayıcı beş eşiğe aynı anda bakar. Eşiklerin hepsi W3C'nin WCAG 2.2 metninden geliyor.

Ne	AA	AAA
Normal metin (1.4.3, 1.4.6)	4,5:1	7:1
Büyük metin	3:1	4,5:1
Arayüz bileşenleri ve grafikler (1.4.11)	3:1	Yok

W3C tanımına göre büyük metin, en az 18 punto ya da en az 14 punto kalın yazıdır. W3C'nin notuna göre bu, birçok gövde fontunda varsayılan boyutun yaklaşık 1,5 katına denk gelir. Kalın yazıda bu kat yaklaşık 1,2'dir. Kendi fontunuzda yine de ölçün.

Oran yuvarlanmaz. W3C bunu açıkça yazar: 4,499:1, 4,5:1 eşiğini karşılamaz. Bu yüzden hesaplayıcı virgülden sonraki iki haneden sonrasını atar.

Kontrast şartı her yazıya uygulanmaz. Pasif bir arayüz bileşenindeki yazı ve yalnızca süs için konmuş metin muaftır. Logo ya da marka adının parçası olan yazı da muaf sayılır.

1.4.11 ise metin dışındaki parçalara bakar. Bir bileşeni ve durumunu tanımak için gereken görsel bilgi, yanındaki renge karşı en az 3:1 olmalıdır. Form alanını belli eden kenarlık ya da seçili durumu gösteren işaret buna örnektir.

Audit'lerde bu kuralı en sık çiğneyen şey, açık gri kenarlıklı form alanları. Beyaz zeminde alanın nerede başladığı seçilmez.

Bir örnek: açık gri metin

Hesaplayıcı açılışta #888888 gri metni beyaz zeminde gösterir. Oran 3,54:1 çıkar. AA düzeyinde bu renk büyük metin ve arayüz kenarı için yeterli, normal metin için yetersiz.

Bu tür grileri en çok form ipuçlarında, tarih ve fiyat altı notlarında görüyorum. Tasarım dosyasında şık durur. Güneş altında telefondan okurken kaybolur.

Form alanının içindeki silik örnek yazı (placeholder) da kuralın kapsamında. W3C bunu Understanding 1.4.3 sayfasında açıkça belirtir.

Öneri kutusu aynı gri tondan #767676 rengini verir. Oranı 4,54:1, yani AA'yı geçer. İki gri yan yana konunca fark zor seçilir, ama eşiği yalnızca biri geçer.

Ters yönde de deneyin. "Renkleri değiştir" butonu metinle zemini yer değiştirir. Oran aynı kalır, çünkü formül açık rengi her zaman bölünen olarak alır. Öneriler ise değişir, çünkü bu kez beyaz metin için ton aranır.

Formül ve kaynak

Hesaplayıcı, W3C'nin WCAG 2.2 metnindeki göreli parlaklık (relative luminance) tanımını birebir kullanır. Göreli parlaklık, en koyu siyahta 0, en açık beyazda 1 olan bir değerdir. Hesap dört adımdan oluşur:

Her iki renk için kırmızı, yeşil ve mavi kanalın 0–255 arasındaki değerini 255'e bölün.
Sonuç 0,04045 ya da daha küçükse 12,92'ye bölün. Büyükse 0,055 ekleyin, 1,055'e bölün ve 2,4'üncü kuvvetini alın.
Parlaklığı bulun: L = 0,2126 × R + 0,7152 × G + 0,0722 × B.
Oranı bulun: (L1 + 0,05) / (L2 + 0,05). L1 açık rengin, L2 koyu rengin parlaklığıdır.

Siyah ile beyazı deneyin. Beyazın L değeri 1, siyahınki 0'dır. Oran 1,05 / 0,05, yani 21:1 çıkar. Bu, ulaşılabilecek en yüksek değerdir.

Eski kaynaklarda 0,04045 yerine 0,03928 görebilirsiniz. W3C'ye göre tanımdaki değer Mayıs 2021'den önce 0,03928 idi ve sRGB belirtiminin eski bir sürümünden alınmıştı. Değişikliğin bu yönergelerdeki hesaplara pratikte etkisi yoktur.

Hesap sRGB renk uzayını varsayar.

4,5:1 neden seçildi? W3C'nin Understanding 1.4.3 sayfasına göre 3:1, ISO-9241-3 ve ANSI-HFES-100-1988'in standart görme için önerdiği en düşük orandır. 20/40 görme keskinliği ise kontrast duyarlılığında kabaca 1,5 katlık kayıpla ilişkilidir. Bu yüzden 20/40 gören biri için gereken oran 3 × 1,5 = 4,5:1 olur.

Geçmeyen rengi nasıl düzeltirim

Öneri kutusu metin renginin tonunu ve doygunluğunu korur, yalnızca açıklığını değiştirir. AA'yı geçen en yakın koyu ve en yakın açık rengi arar. Böylece marka renginize en yakın, eşiği geçen değeri görürsünüz.

Koyu ve açık öneriden hangisini seçeceğiniz arka plana bağlıdır. Açık zeminde genelde koyu ton işe yarar. Orta tonlu bir zeminde iki seçenek de çıkabilir.

W3C, metin rengini arka plan rengi olmadan tanımlamayı hata sayar. Sebebi basit: kullanıcının varsayılan renklerini bilemezsiniz. İkisini her zaman birlikte tanımlayın.

Kontrast, erişilebilirliğin yalnızca bir parçası. Diğer ölçütleri WCAG rehberinde anlattım. Ürününüzün bütününe bakılmasını isterseniz UX Audit WCAG 2.2 temel kontrollerini de içerir. Bence okunamayan metin, kullanılabilirlik sorunları içinde düzeltmesi en kolay olanlardan biri.