Bilmen gereken sayılar
Web İçeriği Erişilebilirlik Yönergeleri (WCAG; 2.1 ve 2.2 sürümlerinde kontrast kuralları aynı) kontrast için üç başarı ölçütü tanımlar. Yasaların ve ihale şartnamelerinin çoğu AA seviyesine atıf yapar, yani web siteleri ve uygulamalar için pratik hedef budur.
Bir çifti kontrol etmek için yazı rengini aşağıdaki araca yaz (her CSS rengi olur: hex kodu, rgb(), hsl() ya da renk adı), Arka plan alanına zemin rengini gir ve her satırın sonucuna bak. Değiştir düğmesi iki rengin yerini değiştirir, koyu tema için işe yarar.
| Neyi kontrol ediyorsun | AA seviyesi | AAA seviyesi |
|---|---|---|
| Normal yazı (metin, etiket, link) | 4.5:1 | 7:1 |
| Büyük yazı (24 px normal ya da yaklaşık 19 px kalın ve üstü) | 3:1 | 4.5:1 |
| İkonlar, form kutusu kenarları, odak göstergeleri, grafik çizgileri | 3:1 | Ayrı AAA seviyesi yok |
| Logolar, süs görselleri, pasif (disabled) kontroller | Şart yok | Şart yok |
Burada dene: Renk kontrast kontrolü
Aracın tam sayfasını açKontrast oranı nasıl hesaplanır
Oran, bağıl parlaklığı (relative luminance) karşılaştırır: bir rengin standart sRGB ekranda ne kadar parlak göründüğü, siyah için 0, beyaz için 1. Önce kırmızı, yeşil ve mavi kanallar 0 ile 255 ölçeğinden 0 ile 1'e çevrilip doğrusallaştırılır (ekran değerleri gama kodlu olduğu için değerler kabaca 2,4'üncü kuvvete yükseltilir). Sonra kanallar ağırlıklandırılır: parlaklık = 0,2126 x kırmızı + 0,7152 x yeşil + 0,0722 x mavi.
Bu ağırlıklar birçok sürprizi açıklar. Algılanan parlaklığa en çok yeşil, en az mavi katkı yapar; bu yüzden siyah zemin üzerine saf mavi yazı kötü sonuç verir, beyaz üzerine sarı ise neredeyse görünmez (yaklaşık 1.07:1). Oranın kendisi (açık rengin parlaklığı + 0,05) / (koyu rengin parlaklığı + 0,05) şeklindedir. 0,05 ekran yansımasını hesaba katar ve sıfıra bölmeyi önler.
Formülde renk tonu hiç yer almaz. Kırmızı ile yeşil gibi iki renk açıkça farklı görünüp neredeyse aynı parlaklıkta olabilir; kırmızı yeşil renk körlüğü olan kişilerin ayırt edemediği tam da bu tür çiftlerdir.
Gerçek renk çiftleri ve oranları
Tasarımların çoğu gri yazıda takılır. Beyaz zeminde sınır #767676 civarındadır: bir ton açığı normal yazıda artık AA'yı geçmez.
| Beyaz #FFFFFF üzerine yazı rengi | Oran | Sonuç |
|---|---|---|
| #000000 siyah | 21:1 | AA ve AAA'yı geçer |
| #333333 koyu gri | 12.63:1 | AA ve AAA'yı geçer |
| #595959 gri | 7.0:1 | Normal yazıda AAA'yı geçer |
| #767676 gri | 4.54:1 | AA'yı geçen en açık gri |
| #777777 gri | 4.48:1 | Normal yazıda AA'dan kalır |
| #999999 açık gri | 2.85:1 | Büyük yazıda bile kalır |
| #007BFF parlak mavi | 3.98:1 | Sadece büyük yazı |
| #0066CC mavi | 5.57:1 | AA'yı geçer |
| #FF0000 kırmızı | 4.0:1 | Sadece büyük yazı |
Hangi öğe hangi oranı ister
- Metin, form etiketleri, link yazıları, bilgi taşıyan placeholder metinleri, hata mesajları: 4.5:1.
- 24 px ve üstü başlıklar ya da yaklaşık 19 px ve üstü kalın yazılar (18,66 px, yani 14 pt): 3:1.
- Görsel ya da gradyan üzerindeki yazı: ortalamaya değil, harflerin arkasındaki en kötü noktaya bak. Gerekirse düz ya da yarı saydam bir katman ekle.
- Form kutusu kenarları, onay kutusu çerçeveleri, açma kapama düğmesi durumları, yazısız ikonlar, odak çerçeveleri ve grafik çizgileri: komşu renge karşı 3:1 (1.4.11, metin dışı kontrast ölçütü).
- Pasif düğmeler, etkin olmayan kontroller, logolar ve sadece süs olan öğeler muaftır. Muaf olmak görünmez olmak demek değil: kullanıcı pasif bir düğmenin orada olduğunu yine görebilmeli.
- Metin içinde sadece renkle ayırt edilen linkler çevredeki yazıya karşı da 3:1 ister, ya da altı çizili olmalı.
Geçmeyen renkler nasıl düzeltilir
Renk tonunu değiştirmek nadiren işe yarar, açıklığı değiştirmek yarar. Marka tonunu koru, açık zeminde yazıyı koyulaştır, koyu zeminde açılaştır, geçene kadar devam et. Kontrolün altındaki Tonlar satırı rengin dokuz açık ve koyu sürümünü gösterir; adımlar eşit görünsün diye OKLCH ile üretilir. Geçen ilk tonu seç ve tasarımına yapıştır.
Marka rengi birebir aynı kalmak zorundaysa onu büyük başlıklarda, kenarlıklarda ya da üzerinde beyaz veya siyah yazı olan düğme zeminlerinde kullan; küçük yazı için daha koyu bir sürümünü seç. Birçok tasarım sistemi bu yüzden her marka renginin iki sürümünü tutar: biri zemin, biri yazı için.
Yarı saydam yazı, örneğin yüzde 60 opaklıkta beyaz, önce arka planla karıştırılır. Kontrol aracı bu karıştırmayı yapar; gösterilen oran insanların gerçekte gördüğüyle aynıdır. Sık yaşanan bir sürpriz: gri kart üzerinde düşük opaklıklı gri yazı, iki renk beyaza karşı ayrı ayrı geçse bile kalır.
Koyu tema, APCA ve yasal durum
Koyu temanın ayrıca kontrol edilmesi gerekir. Saf siyah üzerine saf beyaz (21:1) teknik olarak kusursuzdur ama bazı okurlarda harflerin etrafında parlama hissi yaratabilir; koyu gri zemin üzerinde #E6E6E6 gibi kırık beyaz yazı çoğu zaman daha rahattır ve yine AAA'yı geçer. Açık temada geçen paletin koyu temada da geçtiğini varsayma: soluk vurgu renkleri koyu zeminde sık sık 3:1'in altına düşer.
APCA adını duyabilirsin; gelecekteki WCAG 3 için önerilen yeni bir kontrast modeli. Yazı kalınlığını ve açık/koyu yönünü hesaba katar ama hâlâ taslak. Bugün uygunluk WCAG 2 oranıyla ölçülür ve bu araç da onu hesaplar.
WCAG 2.1 AA seviyesi birçok ülkede erişilebilirlik mevzuatının ve standartlarının dayanağıdır; Avrupa'da Avrupa Erişilebilirlik Yasası ve kamu sektörü kuralları için kullanılan EN 301 549 standardı da buna atıf yapar. İnternetten herkese satış yapıyorsan kontrast, karşılanması en kolay şartlardan biridir ve otomatik denetimlerde en sık raporlanan hatalardandır.