Web Siteniz İçin Erişilebilir Renk Paletleri Nasıl Oluşturulur (Ücretsiz Araçlar Rehberi)

Renk, webdeki en güçlü tasarım araçlarından biridir — ruh halini belirler, göze yön verir ve bir markayı akılda kalıcı kılar. Ama renk aynı zamanda bir engel de olabilir. Metniniz arka planına göre okunması zorsa bazı ziyaretçiler sitenizi hiç kullanamayacaktır: görme gücü zayıf kişiler, yaşlı kullanıcılar ve parlak güneşte telefonundan okuyan herkes. İyi haber şu ki renklerinizi erişilebilir kılmak onları sıkıcı kılmak anlamına gelmez. Erişilebilir bir palet aslında düşünülmüş bir palettir — ve onu oluşturmak, herkesin ücretsiz araçlarla öğrenebileceği bir beceridir. Bu rehber, ilk rengi seçmekten her kombinasyonu kontrol etmeye kadar tüm süreçte size adım adım yol gösteriyor ve yalnızca tarayıcınızda çalışan ücretsiz araçlarla.

Bir paleti erişilebilir kılan nedir?

Renk erişilebilirliğinin merkezinde basit bir fikir vardır: Kontrast oranı. Bu, bir metnin arkasındaki arka plana göre ne kadar öne çıktığını söyleyen bir sayıdır. 1:1 (beyaz arka plan üzerinde beyaz metin — görünmez) ile 21:1 (beyaz arka plan üzerinde siyah metin — en yüksek kontrast) arasında değişir. Sayı ne kadar yüksekse metni okumak o kadar kolay olur.

Web İçeriği Erişilebilirlik Yönergeleri (WCAG) — web erişilebilirliği için yaygın olarak kullanılan kamusal standart — iki önemli hedef önerir:

• 4.5:1 normal gövde metni için. Çoğu web sitesinin paragraflar, form etiketleri ve küçük arayüz metinleri için hedeflemesi gereken düzey budur.
• 3:1 büyük metin (yaklaşık 18pt veya 14pt kalın ve üzeri) ve düğme kenarlıkları ile simgeler gibi önemli grafik öğeler için.

Bu sayıları ezberlemenize veya elle hesaplamanıza gerek yok. Bir Kontrast Denetleyici hesabı sizin için yapar — iki renginizi girin, size oranı ve yönergelere uyup uymadığını söyler. Bu araçla erişilebilir bir palet oluşturmak pratik, tekrarlanabilir bir süreç haline gelir. Şimdi bu süreçten geçelim.

Adım 1: Ana renginizi seçin

Her palet bir çıpayla başlar: ana renginiz. Bu genellikle marka renginizdir — insanların sitenizi tanıyacağı renk. Onu trende göre değil, ruh haline göre seçin. Koyu mavi ve turkuaz tonları güvenilir ve profesyonel hissettirir; bu yüzden bankalar ve teknoloji siteleri onları sever. Sıcak turuncu ve sarı enerji ve dostluk hissi verir. Yeşil, doğayı, sağlığı ve büyümeyi çağrıştırır. Yanlış cevap yoktur ama bir kural vardır: etrafında bütün bir renk ailesi kurabileceğiniz bir renk seçin.

Zaten bir logonuz varsa tahmin etmek yerine tam marka renginizi çıkarın. Ücretsiz Renk Seçici aracımızı açın, logonuzu veya marka görselinizi yükleyin ve tam HEX değerini almak için renge tıklayın (örneğin, güçlü bir marka mavisi #2563EB olabilir). Ezberden tahmin etmek genellikle “neredeyse ama tam değil” bir ton verir ve bu küçük fark, logonuz düğmelerinizin yanında durduğunda görünür hale gelir. Doğru değeri almak on saniye sürer ve her şeyi tutarlı tutar.

Adım 2: Paleti oluşturun

Bir renk palet değildir. Pratik bir web sitesi paletinin beş rolü yerine getirmesi gerekir:

• Bir ana renk — Adım 1'deki marka çıpanız. Birincil düğmeler, önemli başlıklar ve marka anları için kullanılır.
• Ana rengin iki ila üç tonu ve açık tonu — vurgu (hover) durumları ve altbilgiler için koyu tonlar, arka planlar ve vurgular için açık tonlar. Bunları ana HEX'inizin parlaklığını ayarlayarak elde edebilirsiniz; bunu Renk Seçici içinde görsel olarak yapabilirsiniz.
• Bir vurgu rengi — harekete geçirici mesajlar, uyarılar veya vurgular için az miktarda kullanılan zıt bir renk. Ana renkle yarışmadan dikkati çekmelidir.
• Bir nötr koyu — gövde metni için. #1F2937 veya #111827 gibi neredeyse siyah renkler saf siyahtan daha yumuşak ve daha modern görünür ve beyaz arka planla güzel bir şekilde bütünleşir.
• Bir nötr açık — arka planlar ve kartlar için. #F9FAFB veya #F3F4F6 gibi kırık beyazlar ve açık griler sayfaları ferah tutar ve size içerik yerleştireceğiniz alanlar verir.

Vurgu rengi seçmek zor geliyorsa basit renk uyumu fikirlerini kullanın. Bir analog vurgu, renk çarkında ana renginizin yanında oturur (örneğin, mavinin yanında turkuaz) — sakin ve uyumlu. Bir tamamlayıcı vurgu, ana renginizin karşısında oturur (maviye karşı turuncu) — cesur ve dikkat çekici; bu da onu, tıklanmasını istediğiniz düğmeler için en iyisi yapar. Her iki yöntem de işe yarar; önemli olan vurgunun bilinçli seçilmiş hissettirmesidir, rastgele değil.

Adım 3: Her metin/arka plan çiftini kontrol edin

Bu en önemli adımdır ve çoğu web sitesinin başarısız olduğu yer burasıdır. Kontrast Denetleyici aracını açın ve sitenizin kullandığı her metin ve arka plan kombinasyonunu test edin: sayfa arka planı üzerindeki gövde metni, bölümlerinizdeki başlıklar, düğme arka planı üzerindeki düğme metni, altbilgi rengi üzerindeki altbilgi metni ve giriş arka planları üzerindeki form etiketleri.

Tüm gövde ve küçük metinler için 4.5:1 yönergesini hedefleyin. Büyük başlıklar için 3:1 yönergesi asgari düzeydir — ama orada da 4.5:1'e ulaşmak daha da iyidir ve tüm şüpheleri ortadan kaldırır. Düğmelere özel dikkat gösterin: beyaz metinli güzel bir mavi düğme, ancak insanlar etiketi okuyabiliyorsa güzeldir. Varsayılan, vurgu ve devre dışı durumları test edin; çünkü vurgu renkleri genellikle daha açıktır ve yönergenin altına düşebilir.

Bağlantı renkleri ni unutmayın. Gövde metni içinde oturan bağlantıların hem çevresindeki metinden ayırt edilebilir hem de okunabilir olması gerekir. Beyaz üzerinde orta mavi, kontrastı kolayca geçtiği için klasik seçimdir. Bağlantıları marka renginize uyacak şekilde yeniden biçimlendirirseniz o rengi de denetleyiciden geçirin — büyük logo şekilleri olarak harika görünen marka renkleri bazen küçük altı çizili metinler için çok açık olabilir.

Bir çift başarısız olduğunda nadiren tamamen yeni bir renge ihtiyacınız olur — genellikle metni biraz koyulaştırmak veya arka planı biraz açmak yeterlidir. Küçük ayarlamalar tasarımınızı korurken okunabilirliği düzeltir ve erişilebilir yaklaşımın tüm amacı da budur.

Adım 4: Degradeleri ve görsel katmanlarını test edin

Düz renkleri kontrol etmek kolaydır. Degradeler zordur; çünkü metniniz ile arka planınız arasındaki kontrast degrade boyunca değişir — bir uçta güçlü, diğer uçta zayıftır. Kural basittir: Metniniz, degradenin her iki ucunda da kontrast kontrolünden geçmelidir, yalnızca ortasında veya en koyu kısmında değil.

Degradenizi oluşturmak ve canlı önizlemeyi görmek için ücretsiz Degrade Oluşturucu aracımızı kullanın. Her ucun HEX değerlerini alın ve ikisini de metin renginize karşı Kontrast Denetleyici ile test edin. Bir uç başarısız olursa o ucu geçene kadar koyulaştırın. Yaygın bir çözüm, degradeyi, metnin oturduğu uçta düz koyu bir durakla sabitlemektir.

Aynı kural görseller üzerindeki metin için de geçerlidir, örneğin ana (hero) bannerlar. Bir görselin parlaklığı çok değişir — koyu bir orman üzerinde mükemmel okunan beyaz metin, aynı görselde parlak bir gökyüzü üzerinde kaybolabilir. Güvenilir çözüm koyu katmandır: görsel ile metin arasına yarı saydam koyu bir katman (genellikle %40–60 opaklıkta siyah). Bu, görselin tamamında kontrastı eşitler; böylece başlığınız, arkada ne olursa olsun okunabilir kalır.

Adım 5: Paletinizi dönüştürün ve belgeleyin

Paletiniz her kontrolden geçtiğinde onu yazın — gelecekteki siz (ve birlikte çalıştığınız herhangi bir tasarımcı veya geliştirici) size minnettar olacaktır. Webin yerel renk dili HEX'tir (örneğin #2563EB) ve bunu CSS'te kullanacaksınız. Bazen bunun yerine RGB'ye ihtiyacınız olur — örneğin, rgba() ile saydamlık eklerken veya bir tasarım aracı bunu beklediğinde. Bizim HEX'ten RGB'ye Dönüştürücü aracımız ikisi arasında anında çeviri yapar; böylece asla elle dönüştürmeniz gerekmez.

İşte belgelerinize model alabileceğiniz küçük bir örnek stil referansı:

• Birincil (marka mavisi): #2563EB
• Birincil koyu (vurgu/altbilgi): #1D4ED8
• Birincil açık (açık ton/vurgu): #DBEAFE
• Vurgu (harekete geçirici mesaj): #F59E0B
• Metin (nötr koyu): #1F2937
• Arka plan (nötr açık): #F9FAFB

Bu listeyi proje notlarınızda veya stil rehberinizde tutun; her gelecekteki düğme, banner ve sayfa tutarlı kalacaktır — ve sürekli okunabilir.

Tıkandığınızda hızlı ilham

Boş bir tuvale bakmak renk tasarımının en zor kısmıdır. Fikirleriniz tükendiğinde başlangıç noktaları için Rastgele Renk Üreteci aracımızı çalıştırın. Birkaç renk üretin, gözünüze hoş gelenleri not edin ve Adım 1'de birini ana renginiz olarak kullanın. Rastgele, nihai anlamına gelmez — onu bir beyin fırtınası ortağı olarak düşünün. Üretilen bir renk bir şeyler çağrıştırdığında yukarıdaki adımlarla etrafında tam bir palet oluşturun ve nihai çiftleri her zaman kontrast denetleyicisinden geçirin. İlham ücretsizdir; doğrulama onu erişilebilir kılar.

Kaçınılması gereken 5 yaygın renk hatası

• Beyaz arka plan üzerinde açık gri metin. Klasik suçlu. Taslakta güzel görünür ve gerçek hayatta okunamaz, özellikle soluk telefon ekranlarında. Gövde metniniz griyse onu koyu gri yapın (#374151 veya daha koyu).
• Anlamı göstermek için yalnızca kırmızı ve yeşil kullanmak. Kırmızı/yeşil renk körlüğü en yaygın türdür; bu yüzden “kırmızı hata, yeşil başarı demektir” kullanıcıların önemli bir kısmı için başarısız olur. Renkleri simgeler, etiketler veya metinle eşleştirin — kırmızı bir ✕ ve yeşil bir ✓ — böylece anlam asla yalnızca renge bağlı olmaz.
• Düşük kontrastlı yer tutucu metin. Form yer tutucuları geleneksel olarak zaten küçük ve açıktır; bu da onları başlıca şüpheli yapar. Onları diğer metinler gibi test edin veya her alanın gerçek, yüksek kontrastlı bir etiketi de olduğundan emin olun.
• Koyu modu göz ardı etmek. Siteniz koyu bir tema sunuyorsa paletiniz ikinci bir geçişe ihtiyaç duyar: beyaz üzerinde geçen renkler koyu arka plan üzerinde başarısız olabilir. Her iki temayı da Kontrast Denetleyici ile kontrol edin.
• Birbiriyle yarışan çok fazla renk. Eşit derecede parlak renklerden oluşan bir gökkuşağı, hiçbir şeyin öne çıkmadığı anlamına gelir — ve doğrulanacak çiftlerden oluşan bir set daha demektir her yeni renk. Bir ana renk, bir vurgu ve nötrler hemen hemen her site için yeterlidir.

Sık sorulan sorular

Erişilebilir bir palet oluşturmak için tasarımcı olmam gerekir mi?

Hayır. Erişilebilirlik daha çok kontrastla ilgilidir, zevkle değil. Yukarıdaki adımları izlerseniz — bir ana renk seçin, küçük bir renk ailesi oluşturun ve her metin/arka plan çiftini kontrol edin — sıfır tasarım eğitimiyle bile kullanılabilir bir palet oluşturursunuz.

Erişilebilir bir palet yaratıcılığımı sınırlar mı?

Tam tersi. Kısıtlar yaratıcılık doğurur: en güçlü görsel kimliğe sahip markalar genellikle yalnızca iki veya üç disiplinli renk kullanır. Erişilebilirlik kuralları sizi soluk renkler yerine cesur, net seçimlere iter.

4.5:1 kontrast oranı yasal bir gereklilik mi?

Nerede çalıştığınıza ve kitlenizin kim olduğuna bağlıdır. 4.5:1 ve 3:1 sayıları, dünya çapında birçok yasa ve politikanın atıfta bulunduğu kamusal erişilebilirlik standardı WCAG'den gelir. Yasal ayrıntılardan bağımsız olarak bunları karşılamak yalnızca iyi bir uygulamadır — sitenizi daha fazla insan için kullanılabilir kılar.

Mevcut bir web sitesi için kontrastı kontrol edebilir miyim?

Evet. Sitenizin metin ve arka plan renklerinin HEX değerlerini Renk Seçici ile alın (bunları bir ekran görüntüsünden örnekleyebilirsiniz), ardından her çifti Kontrast Denetleyici ile test edin. Başarısızlıkları teker teker düzeltin, gövde metniyle başlayın.

Şimdi deneyin: Ücretsiz Renk Seçici · Ücretsiz Kontrast Denetleyici · Ücretsiz Degrade Oluşturucu · Ücretsiz HEX'ten RGB'ye Dönüştürücü · Ücretsiz Rastgele Renk Üreteci