Renk Kontrastı Kontrol Cihazı
WCAG 2.1 AA ve AAA erişilebilirlik standartlarına uygunluk için ön plan/ arka planını renk kombinasyonlarını kontrol edin.
Normal metin
Büyük yazı tipi (18pt / 14pt kalın)
The quick brown fox jumps over the lazy dog.
Kontrast oranı
17.40:1
PixConvert Kontrast Denetleyicisini Neden Kullanmalısınız?
WCAG uyumluluğunu tek bir araçla kontrol edin — renkleri seçin, sonuçları anında görün.
WCAG 2.1 Uyumluluğu
WCAG 2.1'in ilgili tüm başarı kriterlerini kontrol eder: AA normal, AA büyük, AAA normal, AAA büyük ve kullanıcı arayüzü bileşenleri.
Canlı Önizleme
Metnin normal, büyük ve kullanıcı arayüzü bileşeni boyutlarında gerçek arka planını rengi üzerinde nasıl görüntülendiğini görün.
Renk Seçici
Hassas renk seçimi için yerleşik tarayıcı renk seçici ve onaltılık kod girişi.
Kesin Oran
Belgeleme amacıyla kontrast oranını 2 ondalık basamağa kadar (örneğin 4,53:1) gösterir.
Renkleri Değiştir
Tek tıklamayla ön planı ve arka planını değiştirerek her iki kombinasyonu da anında kontrol edin.
%100 Özel
Saf WCAG formülü tarayıcınızda hesaplanmıştır. Sunucu yok, izleme yok.
Renk kontrastını ne zaman kontrol etmelisiniz?
Erişilebilirlik birçok yargı bölgesinde yasal bir gerekliliktir. Lütfen önceden kontrol edin.
Tasarım İncelemesi
Tasarım aşamasındaki Figma renk seçimlerinin, mühendislik ekibine teslim edilmeden önce WCAG gereksinimlerini karşıladığını doğrulayın.
- Birincil düğme renklerini kontrol edin
- Marka arka planlarındaki metni doğrulayın.
- Yer tutucu metnin okunabilirliğini test edin.
Erişilebilirlik Denetimi
Hukuki veya kalite incelemesinin bir parçası olarak, mevcut kullanıcı arayüzünün WCAG 2.1 AA uyumluluğunu denetleyin.
- Başarısız renk çiftlerini belirleyin.
- Belge kontrast oranları
- Önceliklendirme sırasına göre düzeltmeleri önceliklendirin.
Tasarım Sistemi
Yayınlamadan önce renk paletinizdeki her bir öğenin erişilebilirlik açısından doğruluğunu kontrol edin.
- Renk belirteç çiftlerini doğrulayın
- Erişilebilir tema varyantları oluşturun
- Belgeye uygun kombinasyonlar
Renk Kontrastısı Nasıl Kontrol Edilir?
Renk seçicileri veya onaltılık kod girişlerini kullanarak metin renginizi (ön plan) ve arka planını renginizi seçin.
Kontrast oranı ve WCAG geçme/kalma sonuçları anında güncellenir. Ters kombinasyonu kontrol etmek için Değiştir özelliğini kullanın.
AA ve AAA uyumluluk seviyelerine ilişkin sonuçları inceleyin — tüm hesaplamalar resmi WCAG 2.1 formülüne göre yapılır ve tamamen tarayıcınızda gerçekleştirilir.
Daha Fazla Araç 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.
Kutu Gölge Oluşturucu
Canlı önizleme ile CSS kutu gölgeleri tasarlayın
Renk Dönüştürücü
HEX, RGB ve HSL renk kodlarını anında dönüştürün
Renk Paleti Çıkarıcı
Herhangi bir görüntüden baskın renkleri çıkarın.
JSON Biçimlendirici
JSON verilerini anında biçimlendirin, doğrulayın ve küçültün.
Regex Test Cihazı
Düzenli ifadeleri canlı olarak test edin ve hata ayıklayın.
Sıkça Sorulan Sorular
Renk kontrastı ve erişilebilirlik açıklandı.
WCAG kontrast oranı gereksinimi nedir?
WCAG 2.1 Seviye AA, normal metin için 4,5:1, büyük metin (18pt+ veya 14pt+ kalın) için 3:1 ve kullanıcı arayüzü bileşenleri ve grafik nesneler için 3:1 oranlarını gerektirir. Seviye AAA ise normal metin için 7:1 ve büyük metin için 4,5:1 oranlarını gerektirir.
Kontrast oranı nasıl hesaplanır?
Kontrast oranı = (L1 + 0,05) / (L2 + 0,05), burada L1 daha açık rengin göreceli parlaklığı ve L2 daha koyu rengin göreceli parlaklığıdır. Parlaklık, WCAG 2.1 formülü kullanılarak doğrusallaştırılmış sRGB değerlerinden hesaplanır.
'Büyük yazı tipi' olarak ne sayılır?
WCAG, büyük metni 18 punto (24 piksel) veya daha büyük, kalın yazıldığında ise 14 punto (yaklaşık 18,67 piksel) veya daha büyük olarak tanımlar. Büyük metin, doğası gereği daha okunaklı olduğu için daha esnek bir kontrast gereksinimine (4,5:1 yerine 3:1) sahiptir.
AAA ile görüşmem gerekiyor mu?
WCAG Seviye AA, çoğu yargı bölgesinde standart yasal gerekliliktir (ABD'de ADA, AB'de EN 301 549). AAA ise geliştirilmiş hedeftir; minimum AA seviyesini hedefleyin, kritik içerik için mümkünse AAA seviyesini tercih edin.
Bu, görseller ve gradyanlar için de geçerli mi?
Bu araç, düz renk çiftlerini kontrol eder. Görüntüler veya gradyanlar üzerindeki metinler için, en kötü durumdaki arka planını rengini (koyu metin için metnin arkasındaki en açık nokta, açık metin için en koyu nokta) değerlendirmeniz gerekir. WCAG, görüntü arka planlarının kontrast testini geçmesini zorunlu tutmaz; bu bir en iyi uygulama yöntemidir.