Renk Kontrast Denetleyici

Tüm araçlar
Renk Kontrast Denetleyici
Bir metin ve arka plan rengi arasındaki WCAG kontrast oranını kontrol edin — normal metin, büyük metin ve UI bileşenleri için AA/AAA geçti-kaldı notlarını canlı önizleme ve erişilebilir renk önerileriyle görün.
Metin rengi
Ton
Arka plan rengi
Ton
Kontrast oranı
--:1
Normal metin
18px altındaki gövde metni (veya 14px altı kalın)
AA AAA
Büyük metin
18px+ normal veya 14px+ kalın
AA AAA
UI bileşenleri
İkonlar, kenarlıklar, form kontrolleri & grafikler
AA AAA
Canlı önizleme

Çabuk kahverengi tilki

Kontrast yeterliyse büyük metin rahatça okunur.

Bu normal gövde metninin örnek paragrafıdır. İyi renk kontrastı içeriğinizi görme güçlüğü veya renk körlüğü olan kişiler dahil herkes için okunabilir kılar. örnek bağlantı.

Küçük yazı ve başlıklar en zor okunanlar — en fazla kontrastı gerektirirler.
Örnek düğme Örnek düğme
Öneri

Her şey WCAG 2.x göreli parlaklık formülü kullanılarak tarayıcınızda canlı hesaplanır — yükleme yok, kayıt yok, tamamen ücretsiz.

Paylaş
İlgili Araçlar
Renk Körlüğü Simülatörü

Görüntünüzü veya paletinizi protanopi, deuteranopi, tritanopi veya akromatopsia olan kişilerin gördüğü gibi görün — tamamen tarayıcınızda çalışır, hiçbir şey yüklenmez.
Renk Kodu Dönüştürücü

HEX, RGB, RGBA, HSL, HSLA ve HSV arasında renk dönüştürün — bir renk seçin, alpha değerini ayarlayın ve herhangi bir biçimi anında kopyalayın.
Palet Dışa Aktarıcı

Bir renk seti yapıştırın veya içe aktarın ve CSS değişkenleri, SCSS, Tailwind config, JSON veya SVG renk kartları olarak anında dışa aktarın — herhangi bir paletin son adımı.
Popüler aramalar
renk kontrast denetleyici wcag kontrast oranı erişilebilirlik kontrast denetimi metin kontrast denetleyici aa aaa kontrast testi renk kontrastını online kontrol et

Bu ücretsiz aracı kendi web sitenize ekleyin — aşağıdaki kodu kopyalayıp yapıştırın.