UI Renkleriniz Neden Acemi Görünüyor: Tam Kodlarla 6 Çözüm
Bir arayüzü acemi gösteren altı renk hatası ve her biri için tam kodlarla kıdemli çözümü: tek vurgu rengi, renk artı ikon artı kelime, tonlu alanlar, daha koyu vurgu metni, sarı üstünde koyu metin ve her durum için ayrı bir ton.
Acemi renk kullanımı nadiren bir çatışmadır. Altı küçük alışkanlıktır: çok fazla vurgu rengi, tek başına iş yapmaya çalışan renk, her yerde tam yoğunlukta dolgular, metin için kullanılan açık bir marka rengi, sarı üstünde beyaz ve her durum için tek bir ton. Kıdemli renk kullanımı sakin görünür, çünkü bunların her birinin bir kuralı vardır. İşte o altısı, kodlarıyla birlikte.
1. Tek vurgu, aksiyon için
Kırmızı
Yeşil
Kehribar
Mor
Nötr
Nötr
Nötr
Vurgu #6440E0
Her öğenin kendi rengi olduğunda, renk bir anlam taşımaz. Göz konacak yer bulamaz ve gerçek aksiyon süsle yarışır.
Tek bir vurgu seçin ve onu yalnızca insanların işlem yapabildiği yerlerde harcayın: ana düğme, seçili sekme, bağlantı. Geri kalan her şey nötr olsun. Renkli bir öğeyi gösterip "bu dokunulabilir değil" diyebiliyorsanız, rengini alın. 60-30-10 kuralı aynı fikrin oranlarla anlatımıdır: vurgu, küçük olan o onluktur.
2. Renk, ikon ve kelimeler
E-posta
✕ Acemi: kırmızı bir kenarlık ve başka hiçbir şey
E-posta
Tam adresi ekleyin, örneğin sam@mail.com.
✓ Kıdemli: renk, ikon ve kelimeler
E-posta
✕ Acemi: hangi alan yanlış?
E-posta
Tam adresi ekleyin, örneğin sam@mail.com.
✓ Kıdemli: hâlâ çok net
Kuzey Avrupa kökenli erkeklerin yaklaşık yüzde 8'i kırmızıyı yeşilden ayırmakta zorlanır, bilinen "12 erkekten 1'i" rakamı. Onlar için ve güneş altında telefon kullanan herkes için kırmızı kenarlık, gri bir kenarlıktır.
Bu yüzden bir durum üç sinyal ister: bir renk, öne konmuş bir ikon ve ne yapılacağını söyleyen kelimeler. Bu, renk kullanımına dair WCAG 1.4.1'dir: renk bir mesajı destekleyebilir, ama mesajın verilmesinin tek yolu olamaz. Tam hata paleti hata mesajı rengi yazımızda.
3. Büyük alanları tonlayın
4$'a Pro'ya geç
Çevrimdışı haritalar, reklamsız deneyim ve gezi paylaşımı.
Yükselt✕ Acemi: kartın tamamı tam renkte
4$'a Pro'ya geç
Çevrimdışı haritalar, reklamsız deneyim ve gezi paylaşımı.
Yükselt✓ Kıdemli: bir ton ve düğmede tam renk
Büyük bir tam yoğunluklu renk bloğu bağırır ve vurgunuzu tüketir. Sonra içindeki düğmenin öne çıkacak hiçbir şeyi kalmaz, çünkü çevresindeki her şey zaten aynı renktir.
Bunun yerine büyük alanı tonlayın, tam rengi işi yapan kısma saklayın. Burada kart, aynı morun soluk bir basamağı olan #E6DDFF üzerinde duruyor ve düğme tam #6440E0. Aynı hamleyi bannerlar, seçili satırlar ve vurgu bölümleri için kullanın. Marka renk paletleri yazımız ton basamaklarını tek bir renk tonundan nasıl kuracağınızı gösteriyor.
4. Vurgu metnini koyulaştırın
Beyaz üstünde açık mor
Beyaz üstünde koyu mor
Açık bir marka rengi dolgu olarak iyidir, metin olarak zayıftır. #9A79FC bir düğmede sıcak görünür, beyaz üstünde 14 px'lik bir bağlantı olarak dağılır. Çözüm tonu korur, açıklığı düşürür: #6440E0 aynı mordur, okunacak kadar derindir.
Seçimi savunacak kişi için: beyaz üstünde #9A79FC 3,22'ye 1'dir, WCAG'nin metinden istediği 4,5'e 1'in altındadır, #6440E0 ise 6,27'ye 1'dir. Erişilebilir renk kontrastı yazımız sayıları ve nasıl kontrol edileceğini anlatıyor.
Her marka renginin iki sürümünü tutun: dolgular ve illüstrasyon için parlak olanı, metin ve ince ikonlar için daha derin olanı.
5. Sarının üstünde koyu metin
Sarı üstünde beyaz
Sarı üstünde koyu
Sarı ve açık renkler doğaları gereği parlaktır, bu yüzden üzerlerindeki beyazın parlaklık farkı neredeyse yoktur. #FED480 üstünde beyaz 1,41'e 1'dir. Aynı sarı üstünde #161513 gibi neredeyse siyah bir renk 12,99'a 1'dir.
Kural her açık dolgu için geçerli: soluk sarı, nane, gök mavisi, şeftali. Zemin açıksa metin koyudur. Marka rengi üstünde beyaza alışmış bir tasarımcıya ters gelir, ama bir düğmeyi profesyonel göstermenin en hızlı yollarından biridir.
6. Her duruma bir ton
Varsayılan
Basılı
Devre dışı
Basılıyken beklerkenki gibi görünen bir düğme hiçbir geri bildirim vermez, aktif olanla aynı renge boyanmış devre dışı bir düğme ise bozuk görünür. Her duruma aynı tonun kendi gölgesini verin: varsayılan #6440E0, basılıyken #4422B2 ve devre dışıyken okunabilir #9A79FC etiketli #E6DDFF gibi soluk bir ton.
Devre dışı, düşük kontrastın kabul edilebildiği tek durumdur ve WCAG onu muaf tutar, ama etiket yine de düğmenin ne yapacağı anlaşılacak kadar okunur olmalı. Aynı üçlü ton seti bağlantılar, sekmeler ve anahtarlar için de işe yarar.
Altı çözüm tek tabloda
| Acemi | Kıdemli | Değer |
|---|---|---|
| Çok vurgu | Aksiyon için tek vurgu | Dokunulacak tek şeyde #6440E0 |
| Tek başına renk | Renk, ikon ve kelimeler | Asla tek sinyal değil |
| Tam renkli alanlar | Tonlu alanlar | Arkada #E6DDFF, düğmede #6440E0 |
| Metin olarak açık marka rengi | Daha koyu vurgu metni | #9A79FC değil, #6440E0 |
| Sarı üstünde beyaz | Sarı üstünde koyu metin | #FED480 üstünde #161513 |
| Tüm durumlar için tek ton | Her duruma bir ton | #6440E0, #4422B2, #9A79FC etiketli #E6DDFF |
SSS
Bir UI renk paletini amatör gösteren nedir?
Çok fazla vurgu, anlamı tek başına taşımaya çalışan renk, büyük alanlarda tam yoğunlukta dolgular ve metin için kullanılan açık marka renkleri. Bu dördünü düzeltmek, genellikle paletin kendisini değiştirmekten daha çok işe yarar.
Bir UI kaç vurgu rengine sahip olmalı?
Bir. Yalnızca insanların dokunabildiği veya işlem yapabildiği yerlerde kullanın, geri kalan her şeyi nötr tutun. Hatalar için kırmızı gibi durum renkleri ayrıdır ve her zaman bir ikon ve kelimelerle gelir.
Sarı bir zeminde hangi metin rengi kullanılır?
Koyu bir renk. #FED480 üstünde #161513 yaklaşık 13'e 1'dir, aynı sarı üstünde beyaz ise yaklaşık 1,4'e 1. Aynısı her açık zemin için geçerlidir.
Açık bir marka rengini metin olarak nasıl okunur yaparım?
Tonu koruyup açıklığı düşürün. #9A79FC beyaz üstünde yaklaşık 3,2'ye 1'dir, aynı mor olan #6440E0 ise yaklaşık 6,3'e 1.
Basılı bir düğme hangi renkte olmalı?
Varsayılanın daha koyu bir tonunda, örneğin #6440E0'a karşı #4422B2. Tonu değiştirmeden dokunuşun algılandığına dair geri bildirim verir.
Devre dışı düğmeler kontrast gereksinimlerini karşılamalı mı?
WCAG devre dışı kontrolleri minimum kontrastın dışında tutar, ama düğmenin ne yaptığı anlaşılsın diye etiketi okunur tutun.
Kaynaklar
- WCAG 2.2, 1.4.3 Contrast (Minimum) (metin için 4,5'e 1, devre dışı bileşenler muaf) ve 1.4.1 Use of Color.
- Oranlar WCAG göreli parlaklık formülüyle hesaplandı: #FFFFFF üstünde #9A79FC 3,22'ye 1, #FFFFFF üstünde #6440E0 6,27'ye 1 (ikisi de ton yaklaşık 254 derece), #FED480 üstünde #FFFFFF 1,41'e 1, #FED480 üstünde #161513 12,99'a 1.
- Kırmızı-yeşil renk görme eksikliği, National Eye Institute verilerine göre Kuzey Avrupa kökenli erkeklerin yaklaşık yüzde 8'ini etkiler.
- Durum tonları (basılı #4422B2, devre dışı #9A79FC etiketli #E6DDFF) bizim kendi paletimizdir. 1. bölümdeki filtre renkleri örnek amaçlıdır.
- İlk olarak UX Brainy üzerinde bir carousel olarak yayımlandı.
Want a palette that guides the eye across your whole product? Our team designs and builds UI and design systems with color decided once.
Get Started
