Başarı Mesajı Rengi: #00FF00 Neden Işık Vermez ve Yerine Kullanılacak 8 Yeşil
Saf yeşil, herkesin ilk seçtiği başarı rengi ve metin için yanlış olanı. Dört çözüm, IBM Carbon'dan sekiz açık ve koyu başarı rengi ve geliştiricine vereceğin kod.
Metin için doğru başarı rengi #00FF00 değil, daha koyu bir yeşildir. Saf yeşil ferah görünür ama beyaz zeminde kötü okunur, koyu ekranda ise göz alır. İşte dört çözüm, açık ve koyu modda kullanacağın sekiz başarı rengi ve geliştiricine vereceğin kod.
Saf yeşil neden çuvallar
#00FF00'ı başarı metni için kimse seçmez. Kendiliğinden gelir. Her renk seçicinin üst sırasındaki yeşildir, eski CSS'in lime rengidir, yeni bir tasarım dosyasındaki ilk yeşildir. Sonunda da birine ödemesinin geçtiğini söyleyen satıra yerleşir.
Saf yeşil parlak ve doygundur, bu yüzden "geç" gibi görünür. Ama sorun tam da parlaklıktır. Bir ekranın üretebildiği en açık renklerden biridir ve açık sayfadaki açık metnin tutunacak bir şeyi yoktur. Beyaz üzerinde #00FF00 metin de #00FF00 üzerinde beyaz metin de küçük metin için WCAG asgarisini ezici farkla kaçırır.
Çözüm farklı bir ton değil. Aynı yeşili, metin ağırlık kazanana kadar koyulaştırmak ve en gürültülü yüzeylerden uzak tutmaktır.
Aşağıdaki yeşiller, eksiksiz bir yeşil skala yayımlayan ve her iş için belirli basamaklar kullanan IBM Carbon tasarım sisteminden geliyor.
Çözüm 1: Metin için yeşili koyulaştır
Yeni parola
✓ Parola güçlü.
✕ Beyazda #00FF00: zor okunur
Yeni parola
✓ Parola güçlü.
✓ Beyazda #198038: kolay okunur
Aynı alan, aynı mesaj, iki yeşil. Doğru olan Carbon'ın green 60'ı. Hâlâ net biçimde yeşil ve gözünün okuduğu o, soldaki "daha yeşil" yeşil değil.
Koyu yeşili her başarı metninde kullan: alanın altındaki satır, yeşile dönen etiket, satır içi "Doğrulandı" etiketi, onay ikonunun kendisi. #00FF00'ı metinden tamamen uzak tut. Marka yeşilin saf yeşile yakınsa onu illüstrasyonlara ve büyük başlık yazılarına sakla; orada küçük metindeki koyuluğun işini boyut yapar.
Çözüm 2: Banner'ı tonla, sonra koyu metin kullan
✕ #00FF00 üzerinde beyaz: bağırır, yine de zor okunur
✓ #A7F0BA üzerinde #044317: kolay okunur
Beyaz metinli düz neon bir çubuk sayfadaki en gürültülü şeydir ve hâlâ zor okunur, çünkü #00FF00 üzerinde beyazın kontrastı, beyaz üzerinde #00FF00 kadar zayıftır. Renkler yer değiştirdi. Sorun değişmedi.
Koyu yeşil metinli yumuşak yeşil bir kutu, "başarı"yı rengiyle söyler ve kelimelerin okunmasına izin verir. Başarı iyi haberdir, bağırmamalı. Shopify'ın Polaris sistemi de aynı yere varıyor: başarı yüzeyi #CDFED4, koyu yeşil #014B40 metin taşıyor.
Tonlu kutuyu banner'lar, toast'lar ve satır içi uyarı kutuları için kullan. Düz yeşil dolguyu tek bir şeye sakla: eylemi onaylayan tek düğme. Üzerine de #198038 gibi taşıyacak kadar derin bir yeşilde koyu ya da beyaz etiket koy.
Çözüm 3: Koyu ekranlarda yumuşat
Site durumu
✓ Dağıtım hazır.
✕ Koyuda #00FF00: göz alır
Site durumu
✓ Dağıtım hazır.
✓ Koyuda #42BE65: sakin ve net
Koyu mod öğüdü tersine çevirir. Neredeyse siyah üzerinde saf yeşil kontrast asgarisini fersah fersah geçer, yani bir denetleyici onu işaretlemez. Yine de yanlış seçimdir. Koyu griye karşı tam doygun bir yeşil parlar ve gözü yorar; on tanesinin alt alta durduğu bir listeye bakmak zordur.
Carbon'ın koyu teması daha yumuşak, daha açık bir yeşil kullanır: green 40, #42BE65. #161616 üzerinde parlamadan kolayca okunur. Koyu temalar için genel kural budur: beyazda işleyen doygun renkler koyuda daha açık ve yumuşak olur. Koyu mod renk sistemleri yazımız paletin kalanını anlatıyor, hatalar için kardeş kural ise hata mesajı rengi yazısında.
Çözüm 4: Asla yalnızca renk kullanma
Ödeme 1
✕ Yalnızca bir nokta: hangisi geçti?
Ödeme 1
✓ Başarılı
✓ Onay ve kelime: hâlâ açık
"Başarılı" için yeşil, "Başarısız" için kırmızı bir nokta düşün. Bunları olağan parlaklık ağırlıklarıyla (0,299 kırmızı, 0,587 yeşil, 0,114 mavi) gri tonlamaya çevir; neredeyse aynı çıkarlar:
Gri tonda yeşil nokta #198038
Gri tonda kırmızı nokta #DA1E28
Kırmızı-yeşil renk körlüğü olan biri için, kabaca da güneşte solmuş bir ekrana bakan herkes için durum sütunu böyle görünür. Her başarı durumunun üç şeye ihtiyacı var:
- Bir renk: açıkta koyu yeşil, koyuda yumuşak yeşil.
- Bir şekil: mesajın önünde, renksiz de görünen bir onay işareti.
- Kelimeler: ne olduğu. "Ödeme alındı", yeşil bir noktadan iyidir.
Bu, WCAG 1.4.1, rengin kullanımı: renk bir mesajı destekleyebilir ama onu vermenin tek yolu olamaz. Bir durum listesini yayına almadan önce ekranını bir kez gri tonlamaya çevir (Mac'te Sistem Ayarları, Erişilebilirlik, Ekran, Renk Filtreleri; aynı filtre iOS ve Android'de erişilebilirlik ekran ayarlarında bulunur).
8 başarı rengi, açık ve koyu
Kodunu kopyalamak için herhangi bir çipe dokun.
| Rol | Açık | Koyu | Ne için kullanılır |
|---|---|---|---|
| Başarı | #198038 | #42BE65 | Başarı metni, onay ikonları, başarı kenarlıkları |
| Başarı üstü | #FFFFFF | #161616 | Onayla düğmesi gibi düz başarı dolgusu üzerindeki metin |
| Başarı kutusu | #A7F0BA | #044317 | Banner'lar, toast'lar ve satır içi uyarı kutuları |
| Başarı kutusu üstü | #044317 | #A7F0BA | Bu kutuların içindeki metin ve ikonlar |
Koyu tema yeni bir palet değil. Yeşil skalanın aynı dört basamağı, rolleri yer değiştirmiş hâlde: kutu rengi metin rengi olur, metin rengi de kutu rengi.
Bunu geliştiricine ver
Aynı sekiz renk CSS özel özellikleri olarak, koyu değerler sistem temasına göre devreye giriyor:
:root {
--color-success: #198038;
--color-on-success: #FFFFFF;
--color-success-container: #A7F0BA;
--color-on-success-container: #044317;
}
@media (prefers-color-scheme: dark) {
:root {
--color-success: #42BE65;
--color-on-success: #161616;
--color-success-container: #044317;
--color-on-success-container: #A7F0BA;
}
}
.field--valid { border-color: var(--color-success); }
.field__hint--valid { color: var(--color-success); }
.alert--success {
background: var(--color-success-container);
color: var(--color-on-success-container);
}
.alert--success::before { content: "✓ "; }
Carbon bunları yeşil skalasında green 60, green 40, green 20 ve green 80 olarak adlandırır. Hangi sistemi kullanırsan kullan, dört rol adı çalınmaya değer: bir sonraki kişinin #00FF00'a uzanmasını engellerler.
İlgili bir tuzak: iOS systemGreen, #34C759, beyaz üzerinde metin için fazla açıktır. Apple onu anlamı şeklin taşıdığı anahtarlar ve dolgular için kullanır. Gövde metnine kopyalama.
SSS
Başarı mesajları hangi renkte olmalı?
Küçük boyutlarda kolay okunan koyu bir yeşil, örneğin beyaz zeminde #198038. Yanına bir onay işareti ve ne olduğunu söyleyen bir kelime ekle.
#00FF00 başarı metni için erişilebilir mi?
Hayır. Beyaz üzerinde saf yeşil, gövde metni için WCAG kontrast asgarisini ezici farkla kaçırır. #198038 gibi daha koyu bir yeşil kullan.
Başarı banner'ı için iyi bir yeşil hangisi?
Dolguyu #A7F0BA gibi soluk bir yeşille tonla ve üstüne koyu yeşil #044317 metin koy. Bu çift kolay okunur ve bağırmaz.
Koyu modda başarı hangi renk olmalı?
#161616 üzerinde #42BE65 gibi daha yumuşak, daha açık bir yeşil. Saf yeşil koyu zeminlerde kontrast kontrolünü geçer ama göz alır ve gözü yorar.
Başarı yalnızca renkle gösterilebilir mi?
Hayır. Yeşil bir nokta ile kırmızı bir nokta gri tonlamada aynı görünür ve WCAG 1.4.1 rengin asla tek sinyal olmamasını şart koşar. Bir onay işareti ve Başarılı ya da Başarısız gibi bir kelime ekle.
Kaynaklar
- IBM Carbon tasarım sistemi, renk genel bakış: green 60 #198038, green 40 #42BE65, green 20 #A7F0BA, green 80 #044317 ve gray 100 #161616.
- WCAG 2.2, 1.4.3 Contrast (Minimum) ve 1.4.1 Use of Color.
- Kontrast, WCAG göreli parlaklık formülüyle kontrol edildi (#00FF00 üzerinde beyaz ve beyaz üzerinde #00FF00 1,37:1; beyaz üzerinde #198038 5,02:1; #A7F0BA üzerinde #044317 8,69:1; #161616 üzerinde #42BE65 7,57:1; #161616 üzerinde #00FF00 13,19:1). Gri tonlama değerleri 0,299, 0,587, 0,114 parlaklık ağırlıklarını kullanır.
- Shopify Polaris başarı yüzeyi #CDFED4 ve metin #014B40,
@shopify/polaris-tokens9.4.2'den. - iOS systemGreen #34C759 beyaza karşı ölçüldü (2,22:1); bkz. Apple'ın renk üzerine Human Interface Guidelines belgesi.
- Parola formu, mia@brainy.ink adresine giden makbuz, brainy-site dağıtımı ve ödemeler listesi bu sayfa için uydurulmuş örneklerdir.
- İlk olarak UX Brainy üzerinde carousel olarak yayımlandı.
Want success, error and every other state designed as one system? Our team designs and builds product UI that holds up in light and dark.
Get Started
