Renk Kontrastı Denetleyicisi

Metninizi herkes için okunabilir hale getirin

Canlı önizleme ve hex veya RGB girişi ile metin ve arka plan rengi arasındaki kontrast oranını WCAG AA ve AAA standartlarına göre kontrol edin.

Düşük kontrastlı metinler en yaygın erişilebilirlik hatalarından biridir. Bu denetleyici, resmi WCAG bağıl parlaklık formülünü kullanarak metniniz ve arka plan renkleriniz arasındaki tam kontrast oranını hesaplar ve ardından AA'yı (normal metin için 4,5:1, büyük metin için 3:1) ve daha katı AAA'yı (7:1 ve 4,5:1) geçip geçmediğini size söyler. Canlı önizleme, seçtiğiniz renklerdeki gerçek metni gösterir.

Özellikler

WCAG AA ve AAA başarılı/başarısız sonuçları
Canlı kontrast oranı hesaplaması
Renk seçicilerle hex ve RGB girişi
Renklerinizde canlı metin önizlemesi
Normal ve büyük metin eşikleri
Tarayıcınızda yerel olarak çalışır

Renk Kontrastı Denetleyicisi nasıl kullanılır?

1
Metin rengini seçin
Ön plan rengini seçin veya yazın.
2
Arka planı seçin
Arka plan rengini seçin veya yazın.
3
Oranı oku
Kontrast oranına ve AA/AAA sonuçlarına bakın.
4
Ayarlamak
Renkleri geçinceye kadar ayarlayın.

Yaygın kullanım durumları

Kullanıcı arayüzü metninin WCAG erişilebilirliğini karşıladığını doğrulayın
Düğmeyi ve bağlantı kontrastını kontrol edin
Bir markanın renk paletini denetleyin
Düşük kontrastlı pazarlama metnini düzeltin

Ayrıntılı kılavuz

Renkleri istediğiniz şekilde girin

Renk seçicileri kullanın veya hex kodlarını ve rgb() değerlerini doğrudan yazın; araç her ikisini de ayrıştırır. Her iki rengi de ayarladığınızda oran ve başarılı/başarısız işaretleri anında güncellenir, böylece uyumlu olana kadar bir gölgeyi dürtebilirsiniz. Her şey yerel olarak çalışır; bu da onu kullanıcı arayüzü, temalar ve pazarlama sayfaları tasarlarken hızlı bir yardımcı haline getirir.

WCAG kontrast düzeyleri ne anlama gelir?

WCAG 2, kontrastı 1:1'den (kontrast yok) 21:1'e (beyaz üzerine siyah) kadar bir oran olarak ölçer. Olağan yasal ve sektörel temel olan AA Düzeyi, normal metin için en az 4,5:1 ve büyük metin için 3:1 gerektirir; bu da 24 piksel normal veya yaklaşık 18,66 piksel kalın ve üzeri anlamına gelir. AAA Seviyesi bunları 7:1 ve 4,5:1'e yükseltir. Giriş sınırları, odak halkaları ve anlam taşıyan simgeler gibi kullanıcı arayüzü parçalarının çevrelerine göre en az 3:1 olması gerekir. Oran, her rengin göreceli parlaklığından hesaplanır; bu nedenle, farklı görünen iki renk, eşit derecede parlaksa yine de başarısız olabilir; bu, yeşil üzerine kırmızıda yaygındır.

Arızalı bir renk çiftini düzeltme

Bir çift başarısız olduğunda, renk tonu yerine açıklığı değiştirin: oran geçene kadar metni koyulaştırın veya arka planı küçük adımlarla aydınlatın; renk yine de markanız gibi hissedecektir. Orta turuncu veya deniz mavisi gibi orta tonlardaki marka renkleri genellikle AA'da beyaz metin taşıyamaz. Bu durumda büyük başlıklar, kenarlıklar veya arka planlar için marka rengini kullanın ve gövde metnini daha koyu bir gölgeye ayarlayın. Genellikle çok soluk olduklarından yer tutucu metni ve devre dışı bırakılan durumları da test edin. Oranın, resimlerdeki ince yazı tiplerini veya metinleri hesaba katmadığını unutmayın; bu durumlarda fazladan kenar boşluğu bırakın.

Sık sorulan sorular

WCAG'yi geçmek için hangi kontrast oranına ihtiyacım var?

AA için normal metnin 4,5:1 ve büyük metnin 3:1 olması gerekir. Daha katı AAA için normal metnin 7:1 ve büyük metnin 4,5:1 olması gerekir. Büyük metin kabaca 18 punto veya 14 punto kalındır.

Kontrast oranı nasıl hesaplanır?

Her iki renk için de WCAG bağıl parlaklık formülünü kullanır ve daha sonra açık parlaklığı (artı 0,05) koyuya (artı 0,05) bölerek 1:1 ila 21:1 arasında bir değer verir.

RGB'nin yanı sıra hex'e de girebilir miyim?

Evet: #1e293b veya rgb(30, 41, 59) gibi onaltılık kodları yazın veya renk seçicileri kullanın. Her iki format da anında ayrıştırılır.

Ücretsiz mi?

Evet, hiçbir kayıt olmadan tamamen ücretsiz, tamamen tarayıcınızda çalışıyor.

İki rengin birlikte erişilebilir olup olmadığını nasıl kontrol ederim?

Metin ve arka plan onaltılık değerlerini girin; denetleyici kontrast oranını hesaplar ve normal ve büyük metin için WCAG AA ve AAA'yı geçip geçmediğini gösterir.

Erişilebilirlik açısından renk kontrastı neden önemlidir?

Düşük kontrast, az gören veya renk körü olan kişiler için metnin okunmasını zorlaştırır. WCAG oranlarının karşılanması, içeriğin herkes için okunabilir olmasını sağlar ve ortak bir erişilebilirlik ve SEO gereksinimidir.

Metninizi herkes için okunabilir hale getirin

Özellikler

Renk Kontrastı Denetleyicisi nasıl kullanılır?

Metin rengini seçin

Arka planı seçin

Oranı oku

Ayarlamak

Yaygın kullanım durumları