Hızlı başlangıç
-
Renkleri seçin
Renk seçicisini kullanın veya #RRGGBB yazın.
-
Sonuçları okuyun
WCAG AA/AAA geçiş/başarısızlık.
Renk Kontrast Kontrolörü
Kontrast oranını ve AA/AAA uyumluluğunu hesaplamak için altaltılı ön plan ve arka plan renkleri girin.
Gizlilik: yerel olarak işlenir, asla yüklenmez.
Anında sonuçları görmek için aşağıdaki giriş alanına yapıştırın
检查前景色与背景色的对比度是否符合 WCAG 2.x 建议。
前景色
背景色
Aa
对比度
17.4
WCAG AA
通过
WCAG AAA
通过
AA 大文本
通过
Notlar
WCAG 阈值
AA 正文 ≥4.5:1，大文本 ≥3:1; AAA 正文 ≥7:1，大文本 ≥4.5:1。
Kontrast oranını ve AA/AAA uyumluluğunu hesaplamak için altaltılı ön plan ve arka plan renkleri girin.
WCAG seviyeleri
AA normal metin ≥4.5:1 gerektirir; büyük metin (18pt + veya 14pt kalın) ≥3:1 gerektirir.
Özellikler ve kullanım durumları
Ön plan / arka plan çiftleri ve AA / AAA uyum seviyeleri için WCAG kontrast oranlarını kontrol edin.
Tasarım sistemlerini, düğme okunabilirliğini, karanlık mod ayarlamasını ve a11y kendini denetimlerini sonlandırırken kullanın.
Tipik iş akışı
Tasarımcılar arabirim renklerinin erişilebilirlik standartlarını karşılayıp karşılayamadığını doğrulaya ihtiyaç duyduklarında, öncelikle metin rengini (örneğin #333333) ve arka plan rengini (örneğin #FFFFFFFF) araca girerler. Anında kontrast oranı (4.68:1) ve WCAG derecesi (AAA) görüntüler. Bu, özellikle çevik geliştirme döngüleri için, elle hesaplamalardan veya deneme-hatalı ayarlardan daha verimlidir.
Karanlık mod uygulanırken, geliştiriciler renk şemelerini toplu test edebilir.Örneğin, ana metni (#E0E0E0) koyu gri (#121212) ve saf siyah (#000000) karşılaştırın. Araç, kolay karşılaştırma için geçmişi tutar. Not: AA ≥4.5:1 kontrast gerektirir (normal metin), AAA ≥7:1 gerektirir:
Örnekler
Örnek
Input
#1a1a1a on #ffffff
Output
ratio ~16.1, AA pass
FAQ
RGB / HSL desteği?
Şimdilik sadece Hex; önce renk dönüştürücü aracı kullanın.
Gradient arka planlarda kontrast nasıl kontrol edilir?
CSS degradeleri için, metni her iki uçta ve anahtar orta renklere karşı test edin. Gradiente birden fazla renk varsa, referans olarak en düşük kontrast oranını kullanın. Uygulamada, okunabilirliği korumak için degrade alanlarında katı renkler veya yarı şeffaf kaplamaları kullanmayı düşünün.