Metin ve arka plan renklerimin WCAG'den geçip geçmediğini nasıl kontrol ederim?

Metin rengi ve Arka plan rengi alanlarına hex kodlarını girin veya renk seçicileri kullanın. Kontrast oranı, AA ve AAA normal ve büyük metin ile UI bileşenleri için Geçti veya Başarısız ile birlikte görünür.

WCAG AA hangi kontrast oranını gerektirir?

AA, normal metin için 4,5:1 ve büyük metin için 3:1 gerektirir. AAA, normal metin için 7:1 ve büyük metin için 4,5:1 gerektirir. UI bileşenleri ve grafik nesneleri 3:1 gerektirir.

Ne büyük metin sayılır?

Araç, 18pt (24px) normal metni veya 14pt (18,66px) kalın metni büyük olarak kabul eder. Daha küçük metin, daha yüksek olan normal metin eşiklerini karşılamalıdır.

Renklerim AA'da başarısız oluyor. Bunları nasıl düzeltirim?

Tek tıklamayla Metin rengini düzelt veya Arka planı düzelt önerilerini kullanın. Bu öneriler, aynı tonu korurken açıklığı, çift 4,5:1 oranına ulaşana kadar ayarlar.

Hangi renk biçimlerini kabul ediyor ve ekrandan seçim yapabilir miyim?

#abc veya #1e293b gibi 3 haneli ve 6 haneli hex değerlerini kabul eder. Chromium gibi EyeDropper API'sini destekleyen tarayıcılarda bir Ekrandan renk seç düğmesi görünür.

Gerçekten ücretsiz mi?

Evet. Tüm araçlar ücretsizdir; hesap veya kredi kartı gerekmez. İşlem sunucularımızda değil cihazınızda yapılır ve araçları ücretsiz sunabilmemizi sağlayan da budur.

Mobilde çalışır mı?

Evet. iOS ve Android'in güncel mobil tarayıcılarında, hiçbir şey kurmadan çalışır.

🌓

Ücretsiz WCAG Renk Kontrastı Denetleyicisi

İki rengin erişilebilirlik için WCAG AA ve AAA kontrast standartlarını karşılayıp karşılamadığını kontrol edin. Kontrast çok düşük olduğunda otomatik önerilerle birden fazla metin boyutunda canlı önizleme.

Tarayıcınızda çalışırKayıt yok, açılır pencere yokGiriş gerekmezSonsuza kadar ücretsiz

Yüklendikten sonra çevrimdışı çalışır

Metin rengi

Arka plan rengi

Büyük başlık metni

Orta gövde metni (18px) okuma ve içerik için.

Normal gövde metni (16px) paragraflar için.

Küçük gövde metni (14px) altyazı ve meta veri için.

14,63:1

Kontrast oranı

✓WCAG AA — Normal metin

Gerekli 4.5:1 · Mevcut 14,63:1

✓WCAG AA — Büyük metin

Gerekli 3.0:1 · Mevcut 14,63:1

✓WCAG AAA — Normal metin

Gerekli 7.0:1 · Mevcut 14,63:1

✓WCAG AAA — Büyük metin

Gerekli 4.5:1 · Mevcut 14,63:1

✓UI bileşenleri / grafik nesneler

Gerekli 3.0:1 · Mevcut 14,63:1

Hızlı ön ayarlar

WCAG 2.1 kontrast yönergelerine göre. Büyük metin = 18pt (24px) normal veya 14pt (18,66px) kalın. Hex kodları iki yönde güncellenir: hex girin veya renk seçin, her iki giriş senkronize kalır.

Yaygın kullanımlar

WCAG Uyumluluğu İçin Web Sayfalarını DenetleSitenizin metin renklerinin erişilebilirlik için WCAG AA veya AAA kontrast standartlarını karşıladığını doğrulayın.
Marka Renk Kombinasyonlarını DoğrulayınMarka renk paleti eşleştirmelerini test ederek erişilebilir UI tasarımı için çalıştıklarından emin olun.
Koyu Mod Renk Paletlerini Test EdinKoyu arkaplanlar üzerinde açık metin yine de kontrastta başarısız olabilir - koyu mod paletinizin eşleştirmelerini burada kontrol edin.
Baskılı Materyaller İçin Renk EşleştirmeleriAfişler, işaretler ve baskılı materyaller de okunabilir kontrast gerektirir - özellikle daha yaşlı okuyucular için.
Erişilebilir Düğme Renkleri TasarlaCTA'lar, eylem düğmeleri ve bağlantıların arka planlarına karşı WCAG standardını geçtiğinden emin ol.

Nasıl çalışır

Kontrast denetimi tamamen tarayıcınızda WCAG 2.1 göreli parlaklık algoritması kullanılarak çalışır — kütüphane yok, sunucu yok, yalnızca spesifikasyonu birebir izleyen elle yazılmış matematik. Her sonuç siz yazdıkça veya renk seçtikçe gerçek zamanlı güncellenir.

1
Onaltılık girdi ve normalleştirme
Hem 3 basamaklı (#abc) hem 6 basamaklı (#aabbcc) onaltılık değerler kabul edilir ve tam RGB üçlülerine normalleştirilir. Geçersiz girdi sessizce siyaha dönmek yerine hemen reddedilir; böylece yanıltıcı bir geçti sonucu yerine kırmızı bir kenarlık görünür.
2
WCAG parlaklık hesaplaması
Her renk WCAG 2.1 formülüyle göreli parlaklığa dönüştürülür: sRGB kanal değerleri parçalı gama düzeltmesiyle doğrusallaştırılır (0,03928'in altında 12,92'ye bölünür, üstünde 2,4'üncü kuvveti alınır), ardından 0.2126R + 0.7152G + 0.0722B olarak ağırlıklandırılır.
3
Kontrast oranı ve uyumluluk denetimleri
Kontrast oranı (açık + 0,05) / (koyu + 0,05) olarak hesaplanır ve beş WCAG eşiğinin tamamıyla karşılaştırılır: AA normal metin (4.5:1), AA büyük metin (3:1), AAA normal metin (7:1), AAA büyük metin (4.5:1) ve arayüz bileşenleri (3:1). Sonuçlar her tuş vuruşunda güncellenir.
4
Tonu koruyan düzeltme önerileri
Çift WCAG AA'yı geçemezse araç HSL açıklık uzayında arama yapar — orijinal açıklıktan iki yöne doğru adım adım ilerler — ve aynı ton ve doygunluğu koruyarak 4.5:1'i geçen her rengin en yakın varyantını bulur. EyeDropper API (Chromium) da ekranınızdan herhangi bir rengi doğrudan örneklemek için kullanılabilir.

İlgili araçlar

👁️

Renk Körlüğü Simülatörü

Tasarımınızın renk görme bozukluğu olan kişilere nasıl göründüğünü görün. Protanopi, deuteranopi, tritanopi, akromatopsi ve daha hafif anomalileri simüle eder.

DeneyinDosyalar yerel kalır

📐

Ekran Çözünürlüğüm Nedir

Ekran çözünürlüğünüzü CSS ve gerçek piksel cinsinden, pencere boyutunu, piksel oranını, renk derinliğini, HDR'yi, dokunma desteğini ve yenileme hızını görün ve hepsini kopyalayın.

Deneyin

🖥️

Ölü Piksel Testi

Ekranınızı tam ekran siyah, beyaz, kırmızı, yeşil, mavi ve gri ile ölü veya takılı pikseller için kontrol edin, ayrıca isteğe bağlı bir takılı piksel düzeltici ile.