Contrast Checker
WCAG contrast check
WCAG contrast check Tarayıcınızda yerel olarak çalışır
The quick brown fox
Small body text at 14px
| Normal text (AA) | needs 4.5:1 | Pass |
| Normal text (AAA) | needs 7:1 | Pass |
| Large text 18pt+ (AA) | needs 3:1 | Pass |
| Large text 18pt+ (AAA) | needs 4.5:1 | Pass |
| UI components and graphics (AA) | needs 3:1 | Pass |
Text: #1a1a1a Background: #ffffff Contrast ratio: 17.40:1 Normal text (AA) (needs 4.5:1): Pass Normal text (AAA) (needs 7:1): Pass Large text 18pt+ (AA) (needs 3:1): Pass Large text 18pt+ (AAA) (needs 4.5:1): Pass UI components and graphics (AA) (needs 3:1): Pass
About the
Kontrast Denetleyicisi, WCAG parlaklık formülünü kullanarak metin rengi ile arka plan rengi arasındaki kontrast oranını ölçer ve size bu çiftin hangi erişilebilirlik düzeylerini geçtiğini söyler. Bu, gövde metninin gerçekten okunabilir olup olmadığına karar veren kontroldür: normal metin için minimum 4,5'e 1 oranı, büyük metin ve arayüz sınırları için 3'e 1 ve gelişmiş uyumluluk için 7'ye 1 oranı minimumdur. Kontrastı göze göre değerlendirmek güvenilir değildir, çünkü göz yeşile maviye göre çok daha duyarlıdır, bu nedenle parlak görünen sarı ve koyu görünen mavi neredeyse aynı puanı alabilir.
Where people use the
- Renkli bir arka plan üzerindeki gövde metninin AA'ya uygun olup olmadığı kontrol ediliyor.
- Düğme rengi için siyah ve beyaz metin arasında seçim yapma.
- Yeniden tasarlamadan önce mevcut paletin denetlenmesi.
- Erişilebilirlik kararının bir destek bildiriminde belgelenmesi.
How to use the
- 1
Metin rengini ayarlama
1a1a1a gibi bir onaltılık değer yazın veya renk seçiciyi kullanın. f0a gibi üç basamaklı kısaltma kabul edilir.
- 2
Arka plan rengini ayarlayın
Arka plan için de aynısı. Önizleme, siz ikisinden birini değiştirdikçe güncellenir.
- 3
Oranı oku
Sayı, aynı renklerdeki 1:1'den, beyaz üzerine siyah olan 21:1'e kadar uzanır. Daha yüksek, daha okunabilir anlamına gelir.
- 4
İhtiyacınız olan seviyeyi kontrol edin
Normal gövde metninin AA için 4,5 ila 1 ve AAA için 7 ila 1 olması gerekir. 18 punto veya 14 punto kalın olan başlıklar ve kullanıcı arayüzü kenarlıkları 3'e 1 olmalıdır.
- 5
Sayının yanı sıra önizlemeye de bakın
Bir çift kağıt üzerinde geçebilir ve küçük boyutta veya düşük kaliteli bir ekranda yine de kötü görünebilir. Okunması zor görünüyorsa, okunması da zordur.
İpuçları ve en iyi uygulamalar
- Metnin rengini koyulaştırın, dolgular için daha parlak olanı koruyun.
- Metnin gerçekte kullanılacağı en küçük boyutu kontrol edin.
- Yalnızca metnin değil, kenarlıkların ve simgelerin de 3'e 1 olması gerekir.
Sık sorulan sorular
Kontrast oranı formülü nedir?
Her renk, gama düzeltmesinden sonra kırmızı için 0,2126, yeşil için 0,7152 ve mavi için 0,0722 standart ağırlıklar kullanılarak bağıl parlaklığa dönüştürülür. Bu durumda oran, daha açık parlaklık artı 0,05 bölü daha koyu artı 0,05'tir. Sonuç 1:1 ile 21:1 arasında değişir.
Marka rengim neden başarısız oluyor?
Çünkü doygun orta ton renklerin çoğu beyaza karşı 4,5'a 1'e ulaşamaz. Genel çözüm, büyük dolgular için daha parlak sürümü korurken metin kullanımında rengi koyulaştırmaktır; çoğu tasarım sisteminin ana renkleriyle yaptığı tam olarak budur.
Oranı geçmek erişilebilir olmak için yeterli mi?
Gerekli ama yeterli değil. Çok büyük veya çok küçük metinler, ince yazı tipi ağırlıkları, görsellerin üzerindeki metinler ve belirli renk körlüğü bozuklukları, oranın ötesinde okunabilirliği etkiler. Mümkün olan her yerde gerçek kullanıcılarla test edin.
Yön önemli mi, ışık karanlığa mı yoksa karanlık aydınlığa mı?
Hayır. Oran simetriktir, yani beyaz üzerine siyah ve siyah üzerine beyazın her ikisi de 21:1 puan alır. Pratikte farklılık gösteren şey, uyumdan ziyade tasarım kararı olan parlama ve algılanan ağırlıktır.
Neler büyük metin olarak sayılır?
WCAG terimleriyle, 18 punto veya daha büyük ya da kalın yazıyla 14 punto veya daha büyük. Kabaca 24 piksel veya kalın olduğunda yaklaşık 18,66 piksel olan CSS piksellerinde.
Hesaplama nerede yapılıyor?
Tamamen tarayıcınızda. Hiçbir şey yüklenmedi, dolayısıyla renkleri henüz halka açık olmayan bir marka kılavuzundan kontrol edebilirsiniz.