Renk Kodu Dönüştürücü ve Kontrast Kontrolü
HEX, RGB, HSL ve yaklaşık CMYK değerleri arasında dönüşüm yapın, renginizin tonlarını görün ve yazı-arka plan kontrastını WCAG'ye göre test edin.
Açık ve koyu tonlar
Beyaz ve siyahla %20 adımlarla karıştırılmış dokuz ton. Birine dokunduğunuzda o renk seçilir.
————CMYK değeri yaklaşıktır: renk profili kullanmayan basit bir dönüşümdür. Baskıdan önce matbaanızın profiliyle doğrulayın.
Kontrast kontrolü (WCAG)
Yazı ve arka plan rengini girin; okunabilirlik oranı ve erişilebilirlik seviyeleri anında hesaplanır.
Aynı renk farklı ortamlarda farklı kodlarla yazılır: CSS'te çoğunlukla HEX ya da rgb(), tasarım araçlarında HSL, matbaada CMYK. Bu araç girdiğiniz kodu diğer biçimlere çevirir, renginizin açık ve koyu tonlarını çıkarır ve iki rengin birlikte okunabilir olup olmadığını WCAG ölçütüne göre hesaplar.
Kontrast oranı nasıl hesaplanır?
Her rengin göreli parlaklığı (L) hesaplanır: kanallar 0–1 aralığına çevrilip gama düzeltmesinden geçirilir ve 0,2126 × R + 0,7152 × G + 0,0722 × B formülüyle birleştirilir. Oran, (açık rengin L'si + 0,05) ÷ (koyu rengin L'si + 0,05) olarak bulunur; 1:1 ile 21:1 arasında değişir. WCAG AA seviyesi normal metin için en az 4,5:1, büyük metin (yaklaşık 24 piksel ya da 19 piksel kalın) için 3:1 ister; AAA seviyesi sırasıyla 7:1 ve 4,5:1'dir.
Örnek: beyaz zemin üzerinde #777777 gri yazı 4,47:1 verir; ilk bakışta okunur görünse de AA eşiğinin hemen altında kalır. Tonu #767676'ya koyulaştırmak oranı 4,54:1'e çıkarır ve sınırı geçer. Araç, eşiği geçemeyen renkler için bu tür en yakın düzeltmeyi kendisi önerir. Saydamlık içeren renklerde (ör. #00000080) oran, rengin arka planla birleşmiş hali üzerinden hesaplanır; saydam arka planlar beyaz sayfa üzerinde varsayılır.
Sık yapılan hata: Marka rengini (örneğin sarı ya da açık turuncu) beyaz zemin üzerinde yazı rengi olarak kullanmak. Bu renkler buton zemini ya da vurgu olarak çok iyi çalışır ama metin için koyu bir eş renge ihtiyaç duyar. Renk paletinizi baştan bu kurala göre kurmak için kurumsal kimlik ve UI/UX tasarım hizmetlerimize, paletin sitenize uygulanması için web tasarım hizmetimize göz atabilirsiniz.
Renk Kodu Dönüştürücü ve Kontrast Kontrolü hakkında merak edilenler
HEX ile RGB arasındaki fark nedir?
İkisi de aynı rengi anlatır: RGB kırmızı, yeşil ve mavi kanalları 0–255 arasında ondalık sayıyla, HEX ise aynı değerleri on altılık sistemde yazar. #FFC20E ile rgb(255, 194, 14) birebir aynı renktir.
CMYK değeri neden yaklaşık olarak gösteriliyor?
Ekrandaki RGB renginin baskıdaki karşılığı kâğıda, mürekkebe ve matbaanın kullandığı renk profiline göre değişir. Araç profil kullanmayan standart formülle hesaplar; kurumsal baskılarda matbaanızdan prova isteyin.
WCAG AA ve AAA ne anlama geliyor?
Web içeriği erişilebilirlik yönergelerinin seviyeleridir. AA, normal metin için en az 4,5:1, büyük metin için 3:1 kontrast ister ve çoğu kurum için hedeflenen seviyedir. AAA daha sıkıdır: 7:1 ve 4,5:1.
Hangi metin büyük metin sayılır?
WCAG'ye göre yaklaşık 24 piksel (18 punto) ve üzeri normal kalınlıktaki metin ya da yaklaşık 19 piksel (14 punto) ve üzeri kalın metin büyük metin kabul edilir. Başlıklar çoğunlukla bu gruba girer, gövde metni girmez.
Kontrastı geçemeyen rengimi nasıl düzeltirim?
Araç, rengin tonunu koruyup yalnızca açıklığını değiştirerek AA seviyesini geçen en yakın rengi önerir. "Öneriyi uygula" ile sonucu hemen görebilirsiniz; marka renginiz değişmeden okunabilir bir eş renk elde edersiniz.
Bu aracı kendi sitenize ücretsiz ekleyin
Aşağıdaki kodu kopyalayıp sayfanıza yapıştırmanız yeterli — araç sitenizde çalışır, yükseklik içeriğe göre kendiliğinden ayarlanır, güncellemeleri biz yaparız. Tek ricamız koddaki kaynak bağlantısını korumanız.
Diğer ücretsiz araçlarımız: tümünü görün · site analizi · QR menü oluşturucu · WhatsApp linki · mail imzası · görsel küçültücü