PRATİK REHBERLER · Web ve kodlar
Kontrastı kontrol edin, yetersiz değeri yuvarlayarak geçirmeyin
Farklı görünen iki renk zor okunan metin oluşturabilir. Gerçek çifti ölçün; yazı boyutunu, arka plan bileşimini ve arayüz durumlarını da kontrol edin.
1. Gerçek renkleri belirleyin
Harf rengini ve hemen arkasındaki zemini bulun. Aynı metin farklı yüzeylerdeyse genel palet yeterli değildir.
Araç iki opak onaltılık rengi karşılaştırır. Sayfayı otomatik taramaz; şeffaflık, görüntü ve geçişlerin bileşimini kendiliğinden oluşturmaz.
2. Uygun metin ölçütünü seçin
WCAG AA normal metin için en az 4,5:1, büyük metin için 3:1 ister. Kategori yalnızca başlık olmasına değil tanımlanan boyut ve kalınlığa bağlıdır.
Latin yazıda büyük, en az 18 punto normal veya 14 punto kalın metindir; diğer yazılar için eşdeğer tanımlar vardır. Emin değilseniz daha sıkı koşulu kontrol edin.
Renk kontrast kontrolü3. Oranı ve kararı birlikte okuyun
İki rengi girip uygun kategorinin kararını okuyun. İki ondalık basamakla gösterim, eşik yakınındaki farkı gizleyebilir.
Yetersiz değeri yukarı yuvarlayıp başarılı saymayın. Araç gösterim yuvarlamasından önceki değeri değerlendirir; sayıyla birlikte sonuç metnine de bakın.
BU ADIMI DENEYİN
Renk kontrast kontrolü
Tam hesaplayıcıyı burada kullanın: örnek değerleri yükleyin, her seferinde bir girdiyi değiştirin ve sonucu rehberdeki adımlarla karşılaştırın.
Tekrarlanabilir bir örnek
#FFFFFF üzerine #777777 yükleyip çalıştırın: yaklaşık 4,48:1, normal metin için AA eşiğinin altındadır. Yalnızca metni #767676 yapın: yaklaşık 4,54:1, bu eşiği geçer. Karar yuvarlanmamış oranla verilir.
Sonuç
Sonuç burada görünür.
4. Örnek: birbirine yakın iki gri
Beyaz üstünde #777777 yaklaşık 4,48:1 verir ve normal metin AA’yı karşılamaz. #767676 yaklaşık 4,54:1 verir ve bu eşiği karşılar. Görsel fark küçük, koşul kesindir.
Aynı beyaz üstünde iki gri
- Başlangıç verileri
- Zemin #FFFFFF; metin #777777 veya #767676
- Sonuç
- Yaklaşık 4,48:1: normal AA değil. Yaklaşık 4,54:1: normal AA koşulunu karşılar.
Renk örnekleri açıklama amaçlıdır. Etiketler renk, oran ve sonucu belirterek anlamı yalnızca görünüşe bırakmaz.
-
#777777 / #FFFFFF
Yaklaşık 4,48:1 — normal AA için yetersiz.
-
#767676 / #FFFFFF
Yaklaşık 4,54:1 — bu koşulu karşılar.
5. Tema ve durumlara göre tekrarlayın
Gövde metni, bağlantı, yardımcı metin ve düğme etiketlerini gerçek zeminlerinde deneyin. Koyu tema ve ilgili durumlarda tekrarlayın; yalnızca renkleri tersine çevirmek yetmeyebilir.
Değişken arka planda en elverişsiz olan dahil gerçek birleşimler kontrol edilmelidir. Görüntüden tek nokta almak bütün yüzeyi temsil etmez.
| Ölçüt | Asgari oran |
|---|---|
| AA normal | 4,5:1 |
| AA büyük | 3:1 |
| AAA normal | 7:1 |
6. Oranın ötesindeki okunabilirliği inceleyin
Yeterli oran tam erişilebilirliği kanıtlamaz. Boyut, kalınlık, aralık, anlam ve yalnızca renge dayanma ayrıca değerlendirilmelidir.
Eşiğin hemen üzerindeyseniz daha geniş pay düşünün. Renk bir sonucu bildiriyorsa metin veya şekil de aynı bilgiyi vermelidir.
Bunlar örnek girdilerdir, gerçek bir olayın ölçümleri değildir. Sonuç, tam araçla aynı hesaplama motorunu kullanır. Rehberdeki adımlarla karşılaştırdıktan sonra kontrolleri işaretleyin.
Kaynaklar ve yöntem
Sık sorulan sorular
Başarılı sonuç WCAG uygunluğunu onaylar mı?
Hayır. Girilen renk ve koşullardaki bu kontrastı değerlendirir. Diğer gereksinimler ayrı incelenmelidir.
Şeffaf katmanın rengini girebilir miyim?
Arka planla birleştikten sonraki etkili renk gerekir. İki opak renk testi bütün sayfanın bileşimini otomatik hesaplamaz.