Ücretsiz Online Kontrast Denetleyici (WCAG)
Normal ve büyük metinlerde ön plan ile arka plan renk kontrast oranlarını WCAG AA ve AAA erişilebilirlik uyumu açısından değerlendirin.
Normal metin
Büyük metin (18pt / 14pt kalın)
The quick brown fox jumps over the lazy dog.
Kontrast oranı
17.40:1
Renk kontrastı nasıl kontrol edilir
İki rengi girin.
Metin rengini ve arka plan rengini seçin ya da her kutuya #1a1a1a gibi 6 haneli bir hex kodu yazın.
Oranı ve denetimleri okuyun.
Kontrast oranı siz yazdıkça güncellenir ve beş satır, AA ve AAA metin ile arayüz öğeleri için geçti veya kaldı durumunu gösterir.
Ayarlayın ve kopyalayın.
İhtiyacınız olan satırlar geçene kadar bir rengi koyulaştırın veya açın, ters çift için Değiştir'i deneyin, ardından oranı notlarınız için kopyalayın.
Sık sorulan sorular
WCAG oranları, büyük metin, yuvarlama ve bu denetleyicinin neleri okuyabildiği hakkında yanıtlar.
WCAG AA hangi kontrast oranını gerektirir?
WCAG AA, normal metin için en az 4,5:1, büyük metin için 3:1 ister. Simgeler, giriş alanı kenarlıkları ve diğer arayüz öğeleri, yanlarındaki renklere karşı 3:1 gerektirir. AAA, metin kurallarını normal metin için 7:1'e, büyük metin için 4,5:1'e yükseltir.
Kontrast oranı nasıl hesaplanır?
Her rengin kırmızı, yeşil ve mavi değerleri doğrusal ışığa dönüştürülür ve ağırlıklandırılarak göreli bir parlaklık elde edilir. Oran, açık rengin parlaklığına 0,05 eklenip koyu rengin parlaklığına 0,05 eklenmiş değere bölünmesiyle bulunur; bu yüzden aynı renk için 1:1'den beyaz üzerinde siyah için 21:1'e kadar değişir.
WCAG'de büyük metin ne sayılır?
Büyük metin, en az 18pt (24px) normal veya 14pt (yaklaşık 18,66px) kalın yazıdır. AA için yalnızca 3:1, AAA için 4,5:1 gerekir. Denetleyici yazı tipi boyutu sormaz; bu yüzden büyük metin satırlarını yalnızca metniniz o kadar büyükse dikkate alın.
WCAG AA yeterli mi, yoksa AAA gerekir mi?
AA, çoğu yasanın ve politikanın işaret ettiği seviyedir; bunlar arasında AB'deki EN 301 549 ve eyalet ile yerel yönetim web siteleri için 2024 tarihli ABD kuralı bulunur ve her ikisi de WCAG 2.1 AA'yı kullanır. AAA daha katıdır ve uzun okuma metinleri için iyi bir hedeftir.
Arayüz bileşenleri denetimi ne anlama gelir?
Metin dışı öğeler için 3:1 kuralını, yani WCAG başarı ölçütü 1.4.11'i test eder. Simge renkleri, giriş alanı kenarlıkları, odak halkaları ve grafik çizgileri için kullanın. Öğenin rengini metin rengi kutusuna, arkasındaki rengi arka plan kutusuna yazın.
Neden 3.00:1 gösteriyor ama başarısız oluyor?
Ekrandaki oran iki ondalık basamağa yuvarlanır, ancak denetimler WCAG'nin gerektirdiği gibi tam değeri kullanır. Beyaz üzerinde #959595 gri 2.995:1 olduğundan 3.00:1 görünür ve yine de 3:1 satırlarında başarısız olur. Geçmek için rengi biraz koyulaştırın.
Denetleyici neden 0.00:1 gösteriyor?
Yalnızca 6 haneli hex kodlarını okur; başında # olabilir de olmayabilir de. #fff gibi kısa kodlar, saydamlık içeren 8 haneli kodlar, rgb(), hsl() ve renk adları 0.00:1 verir ve tüm satırlarda başarısız olur. #fff yerine #ffffff yazın. #12345g gibi yanlış bir harf, uyarı vermeden farklı bir renk olarak okunur.
Mümkün olan en yüksek kontrast oranı nedir?
21:1; bu, saf beyaz #ffffff üzerinde saf siyah #000000 demektir. İki aynı renk en düşük değer olan 1:1 verir. Buradaki varsayılan çift olan beyaz üzerinde #1a1a1a 17.40:1 alır, beyaz üzerinde orta gri #767676 ise 4.54:1 olup 4,5:1 AA sınırının hemen üzerindedir.
Degrade veya fotoğraf üzerindeki metni kontrol edebilir miyim?
Doğrudan edemezsiniz, çünkü araç bir düz rengi diğeriyle karşılaştırır. Degrade veya görsel üzerindeki metin için, metnin arkasında açıklık bakımından metin rengine en yakın noktayı bulun. Bu rengi arka plan olarak girin ve kontrol edin.
APCA veya WCAG 3'ü destekliyor mu?
Hayır. WCAG 2.1, WCAG 2.2 ve güncel yasaların dayandığı WCAG 2.x kontrast oranını kullanır. APCA, metni boyut ve kalınlığa göre puanlayan, gelecekteki WCAG 3 için hazırlanmış bir taslak yöntemdir ve bu araç onu hesaplamaz.
Bu kontrast denetleyici ücretsiz ve gizli mi?
Evet. Ücretsizdir, hesap gerektirmez ve denetim sayısında sınır yoktur. Girdiğiniz renkler tarayıcınızda kalır ve kaydedilmez. Canlı sitede Google Analytics yalnızca Oranı kopyala tıklamalarını sayar; renkleri veya oranı asla saymaz.
WCAG Metin ve Arayüz Renkleri için Kontrast Denetleyici
İki hex rengi girin, bir kontrast oranı alın; beş WCAG denetimi, canlı önizleme, değiştirme düğmesi ve kopyalayabileceğiniz bir oran ile.
Kontrastı WCAG AA ve AAA'ya Göre Denetleyin
Kontrast oranını almak için bir metin rengi ve bir arka plan rengi seçin. Ardından beş satır, AA ve AAA metin boyutları ile arayüz öğeleri için 3:1 kuralında geçti veya kaldı durumunu gösterir.
- AA için normal metin 4,5:1 ister
- AAA için normal metin 7:1 ister
- Büyük metin ve arayüz öğeleri 3:1 ister
Metni Arka Plan Renginizde Önizleyin
Önizleme kutusu arka plan renginizle dolar ve örnek metni üç boyutta metin renginizle gösterir. Renklerden birini değiştirdiğinizde oran ve tüm geçti/kaldı satırları güncellenir.
- Üç boyutta örnek metin
- Her renk değişikliğinde güncellenir
- Oran iki ondalık basamakla gösterilir
Metin ve Arka Planı Değiştirin
Renkleri değiştir düğmesine tek tıklama iki rengi yer değiştirir; böylece koyu arka plan üzerinde açık metni ve tersini test edebilirsiniz. Oran aynı kalır, ancak önizleme değişir.
Kontrast Oranını Kopyalayın
Oranı kopyala, oranı 4.54:1 gibi iki ondalık basamakla panonuza koyar; tasarım şartnamesi, denetim raporu veya iş kaydı için hazırdır. Geçti/kaldı satırları, WCAG'nin istediği gibi yuvarlanmamış değeri kullanır.
Hex Kodlarını Yazın veya Seçin
Her renk için bir seçici ve bir metin kutusu vardır. #767676 gibi 6 haneli bir hex kodunu başında # ile veya olmadan yazın. #fff gibi kısa kodlar ve rgb() değerleri okunmaz.
Ücretsiz, Kayıt Gerektirmez
Hesap olmadan istediğiniz kadar kullanın. Girdiğiniz renkler tarayıcınızda kalır. Canlı sitede Google Analytics yalnızca Oranı kopyala tıklamalarını sayar; renkleri asla saymaz.
Renk kontrastı ne zaman kontrol edilmeli
Kontrastı erken denetleyin; renk henüz kolayca değiştirilebilirken.
Tasarım incelemesi
Teslimden önce tasarım dosyalarınızdaki renk seçimlerini denetleyin. Her hex kodunu tasarım aracınızdan kopyalayın, buraya yapıştırın ve AA'yı geçemeyen çiftleri düzeltin.
- Marka renginiz üzerinde beyaz etiketli birincil düğmeler
- Renk tonlu veya marka renkli arka planlardaki gövde metni
- Çoğu zaman fazla açık kalan yer tutucu ve yardımcı metinler
Erişilebilirlik denetimi
Mevcut bir siteyi veya uygulamayı WCAG 2.1 AA'ya göre denetleyin. Her metin ve arka plan çiftini test edin, oranı not edin ve beş denetimden hangisinde başarısız olduğunu kaydedin.
- Gövde metni için 4,5:1 kuralında başarısız olan çiftleri bulun
- Her oranı denetim notlarınıza veya iş kaydına kopyalayın
- Simge ve giriş alanı kenarlık renklerini 3:1 için denetleyin
Tasarım sistemi
Paletinizdeki renk belirteçlerini yayınlamadan önce test edin. Her metin belirtecini her yüzey rengi üzerinde denetleyin, ardından hangi çiftlerin gövde metni için güvenli olduğunu işaretleyin.
- Her metin belirtecini her yüzey rengi üzerinde test edin
- Açık ve koyu tema çiftlerini denetlemek için Değiştir'i kullanın
- Belgelerinizde kullanmak üzere AA'yı geçen çiftleri listeleyin
Daha Fazla Aracı Keşfedin
Bu araçla birlikte harika çalışan diğer ücretsiz araçları keşfedin
CSS gradyan oluşturucu
Özel CSS gradyanlarını görsel olarak oluşturun
Box shadow oluşturucu
CSS box-shadow efektlerini canlı önizlemeyle tasarlayın
Renk Dönüştürücü
HEX, RGB ve HSL renk kodlarını yazarken dönüştürün
Renk paleti çıkarıcı
Bir görseldeki ana renkleri HEX, RGB veya HSL olarak çıkarın
JSON biçimlendirici
JSON'u tarayıcınızda biçimlendirin, doğrulayın ve küçültün
Regex test aracı
Düzenli ifadeleri canlı olarak test edin ve hata ayıklayın