Renk kontrastı denetleyici
WCAG kontrast oranını ve normal ile büyük metin için AA ve AAA geçti/kaldı sonucunu almak için bir metin rengi ve bir arka plan rengi girin; canlı önizlemeyle.
Tarayıcınızda çalışır; yazdığınız hiçbir şey cihazınızdan çıkmaz
Kontrast oranı –
| Kullanım | Gereken | Sonuç |
|---|---|---|
| Normal metin, AA | 4.5:1 | |
| Normal metin, AAA | 7:1 | |
| Büyük metin, AA | 3:1 | |
| Büyük metin, AAA | 4.5:1 |
Yalnızca parlaklık kontrastını ölçen WCAG 2.x kontrast oranını kullanır. Kırmızı-yeşil gibi renk körlüğü çiftlerini, ince veya küçük yazı tiplerini ya da resim ve renk geçişleri üzerindeki metni değerlendiremez. HEX (3, 4, 6 veya 8 haneli), rgb(), hsl() ve CSS renk adlarını okur; diğer CSS renk sözdizimini tarayıcınız okuyabildiği ölçüde okur.
Renk kontrastı nasıl denetlenir?
- Metin rengini ve arka plan rengini HEX,
rgb(),hsl()veyanavygibi bir CSS renk adı olarak yazın ya da yapıştırın; ya da her birini renk seçiciyle seçin. - Kontrast oranını okuyun: kontrast yoksa 1:1, beyaz üzerinde siyah için 21:1.
- Tabloya bakın: normal metin AA için 4,5:1, AAA için 7:1 ister; büyük metin AA için 3:1, AAA için 4,5:1 ister. Önizleme metnin nasıl göründüğünü gösterir.
Kontrast oranı ne anlama gelir?
WCAG kontrast oranı, iki rengin parlaklığını karşılaştırır. Her renk, gama eğrisi kaldırılmış sRGB değerleri kullanılarak ve üç kanal gözün ne kadar parlak bulduğuna göre ağırlıklandırılarak (en çok yeşil, sonra kırmızı, sonra mavi) 0 (siyah) ile 1 (beyaz) arasında bir bağıl parlaklığa dönüştürülür. Oran, açık parlaklık artı 0,05'in koyu parlaklık artı 0,05'e bölümüdür; bu yüzden özdeş renkler için 1:1'den beyaz üzerinde siyah için 21:1'e kadar uzanır.
WCAG 2, asgari değerleri metin boyutuna göre belirler. Normal metin, AA düzeyi için 4,5:1, daha katı AAA düzeyi için 7:1 ister. Okunması daha kolay olan büyük metin, AA için 3:1, AAA için 4,5:1 ister. Büyük, en az 24 px ya da kalınsa yaklaşık 18,7 px anlamına gelir.
Oran yalnızca açıklığa bakar. İki renk geçse bile renk körlüğü olan kişiler için ayırt etmek zor olabilir; ince yazı tipleri ya da fotoğraf üzerindeki metin asgari değerden daha fazla kontrast gerektirebilir. Rakamı bir alt sınır olarak kullanın ve önizlemeye bakın.
Geliştiriciler / yapay zekâ ajanları için
Kontrastı kodda, bir derleme adımında ya da bir yapay zekâ ajanından denetlemeniz mi gerekiyor? Bunun için bir API var: renk kontrastı denetleyici API rehberine bakın.
İpuçları
- Önce bir rengi HEX, RGB, HSL ve CMYK arasında dönüştürmeniz mi gerekiyor? Renk dönüştürücü aracını kullanın.
- Uyumlu renklerden oluşan bir set mi hazırlıyorsunuz? Renk paleti oluşturucu, her renk örneği için beyaz ve siyaha karşı kontrastı gösterir.
- Bir ekran görüntüsündeki pikselin rengine mi ihtiyacınız var? Resimden renk seç aracını kullanın.
Sık sorulan sorular
Kontrast oranı nasıl hesaplanır?
WCAG 2.x formülüyle: her rengin bağıl parlaklığı sRGB değerlerinden hesaplanır ve oran (açık + 0,05) bölü (koyu + 0,05) olur. 1:1 (kontrast yok) ile 21:1 (beyaz üzerinde siyah) arasında değişir. Oran iki ondalıkla gösterilir ve yuvarlanmamış değer yanında verilir.
AA ve AAA hangi oranları ister?
Normal metin AA için 4,5:1, AAA için 7:1 ister. En az 24 px normal veya yaklaşık 18,7 px kalın anlamına gelen büyük metin, AA için 3:1, AAA için 4,5:1 ister. Oran bir sınırı aşacak şekilde yukarı yuvarlanmaz: 4,499:1, 4,49 olarak gösterilir ve normal metinde AA'yı geçemez.
Beyaz üzerinde #777777 neden AA'yı geçemez?
Kontrastı 4,48:1'dir; AA'nın normal metin için istediği 4,5:1'in hemen altındadır. Bu yüzden gövde metninde kalır, ama yalnızca 3:1 isteyen büyük metinde geçer. #767676 gibi biraz daha koyu bir gri 4,54:1'e ulaşır ve geçer.
Saydam renklerde ne olur?
Kısmen saydam bir metin rengi, ekranın gösterdiği gibi önce arka planla karıştırılır ve karışmış renk ölçülür. Kısmen saydam bir arka planın beyaz üzerinde durduğu varsayılır. Kanallar, karıştırmadan sonra tam sayıya yuvarlanır.
Geçen bir oran metnin erişilebilir olduğu anlamına gelir mi?
Tek başına hayır. Oran yalnızca açıklık kontrastını ölçer. Renk körlüğü çiftleri, çok ince yazı tipleri, fotoğraf veya renk geçişi üzerindeki metin ya da bir anlamın yalnızca renkle verilip verilmediği hakkında hiçbir şey söylemez. Bunu bir garanti değil, asgari ölçüt olarak görün.
Bir sunucuya bir şey gönderiliyor mu?
Hayır. Renkler tarayıcınızda okunur ve ölçülür; yazdığınız hiçbir şey cihazınızdan çıkmaz.