Hata Mesajı Rengi: #FF0000 Neden Yetersiz Kalır ve Onun Yerine Kullanılacak 8 Kırmızı
Saf kırmızı, herkesin ilk seçtiği hata rengi ve metin için yanlış olanı. Dört çözüm, sekiz açık ve koyu hata rengi ve geliştiricine verilecek kod.
Metin için doğru hata rengi daha koyu bir kırmızıdır, #FF0000 değil. Saf kırmızı gürültülü görünür ama hata mesajlarının kullandığı küçük boyutlarda yine de kötü okunur, koyu ekranlarda ise gözü titretir. İşte dört çözüm, açık ve koyu modda kullanılacak sekiz renk ve geliştiricine verilecek kod.
Saf kırmızı neden yetersiz kalır
Kimse hata metni için #FF0000'ı seçmez. O kendiliğinden gelir. Her renk seçicinin üst sırasındaki kırmızıdır, CSS'teki red anahtar kelimesidir, yeni bir tasarım dosyasındaki ilk renk örneğidir. Sonunda ekranda ilk seferde doğru okunması gereken tek satırın üzerine oturur.
Saf kırmızı parlak ve doygundur, bu yüzden güçlü görünür ama koyu değildir. Açıklığı orta gri tonuna yakındır. Beyaz üzerinde küçük yazarsan harflerin kenarları kaybolur.
Çözüm başka bir ton değil. Aynı kırmızıyı, metin ağırlık kazanana kadar koyulaştırmak.
Çözüm 1: Metin için kırmızıyı koyulaştır
E-posta
Geçerli bir e-posta adresi gir.
✕ Beyaz üzerinde #FF0000: zor okunur
E-posta
Geçerli bir e-posta adresi gir.
✓ Beyaz üzerinde #B3261E: kolay okunur
Aynı alan, aynı mesaj, iki kırmızı. Doğru olan Material 3 açık temasının hata rengidir ve soldaki daha "kırmızı" kırmızı olmasına rağmen gözün gittiği yer burasıdır.
Hata metninin her parçasında koyu kırmızıyı kullan: alanın altındaki mesaj, kırmızıya dönen etiket, satır içi "Zorunlu" etiketi. #FF0000'ı metinden tamamen uzak tut. Marka kırmızın saf kırmızıya yakınsa, onu illüstrasyonlara ve büyük başlık yazılarına sakla; orada küçük metinde koyuluğun yaptığı işi boyut yapar.
Çözüm 2: Banner'ı boyama, tonla
✕ #FF0000 üzerinde beyaz: bağırır, yine de zor okunur
✓ #F6CBC8 üzerinde #410E0B: kolay okunur
Beyaz metinli düz kırmızı bir şerit sayfadaki en gürültülü şeydir ve yine de zor okunur, çünkü #FF0000 üzerinde beyaz, beyaz üzerinde #FF0000 ile aynı zayıf kontrasta sahiptir. Renkler yer değiştirdi, sorun değişmedi.
Koyu kırmızı metinli yumuşak bir kırmızı kapsayıcı, "hata" der ve kelimelerin okunmasına izin verir. Aciliyet ikondan ve mesajdan gelir. Material'ın kendi kapsayıcısı daha soluk bir #F9DEDC'dir; biz bir kademe daha koyu olan #F6CBC8'i kullanıyoruz, çünkü daha soluk pembe koyu arayüz öğelerinin yanında silikleşiyor.
Çözüm 3: Koyu ekranlarda yumuşat
E-posta
Geçerli bir e-posta adresi gir.
✕ Koyuda #FF0000: titrer
E-posta
Geçerli bir e-posta adresi gir.
✓ Koyuda #F2B8B5: sakin ve net
Koyu mod tavsiyeyi tersine çevirir. Neredeyse siyah üzerinde saf kırmızı kontrast alt sınırını geçer, yani bir denetleyici onu işaretlemez, ama koyu gri üzerindeki doygun kırmızı kenarlarında titreşir. Material'ın koyu teması açık ve yumuşak bir hata kırmızısı olan #F2B8B5'i kullanır; bu, #B3261E'nin beyazla kurduğu ilişkinin aynısını koyu arka planla kurar.
Koyu temalar için genel kural şudur: beyazda işe yarayan doygun renkler koyuda daha açık ve yumuşak olur. Koyu mod tasarımı yazımız paletin geri kalanını ele alıyor.
Çözüm 4: Gri tonlamada kontrol et
E-posta
✕ Yalnızca kenarlık: hangi alan hatalı?
E-posta
Geçerli bir e-posta adresi gir.
✓ İkon ve kelimeler: hâlâ çok net
Saf kırmızı ile orta gri neredeyse aynı açıklığa sahiptir, bu yüzden tek hata sinyali kırmızı kenarlık olan bir alan gri tonlamada diğer her alan gibi görünür. Bir formu yayınlamadan önce ekranını bir kez gri tonlamaya al (Mac'te Sistem Ayarları, Erişilebilirlik, Ekran, Renk Filtreleri; aynı filtre iOS ve Android'de erişilebilirlik ekran ayarlarında durur).
Her hata durumunun üç şeye ihtiyacı var:
- Bir renk: açıkta koyu kırmızı, koyuda yumuşak kırmızı.
- Bir şekil: mesajın önünde, renksiz de görünen bir ikon.
- Kelimeler: neyin yanlış gittiği ve ne yapılacağı. "Geçerli bir e-posta adresi gir", "Geçersiz girdi"den iyidir.
Bu WCAG 1.4.1, renk kullanımı kuralıdır: renk bir mesajı destekleyebilir, ama mesajın verilmesinin tek yolu olamaz.
8 hata rengi, açık ve koyu
Kodunu kopyalamak için herhangi bir çipe dokun.
| Rol | Açık | Koyu | Ne için kullanılır |
|---|---|---|---|
| Hata | #B3261E | #F2B8B5 | Hata metni, hata kenarlıkları, hata ikonu |
| Hata üstü | #FFFFFF | #601410 | Sil düğmesi gibi düz hata dolgusu üzerindeki metin |
| Hata kapsayıcı | #F6CBC8 | #8C1D18 | Banner'lar, toast'lar ve satır içi uyarı kutuları |
| Hata kapsayıcı üstü | #410E0B | #F9DEDC | Bu kapsayıcıların içindeki metin ve ikonlar |
Bunu geliştiricine ver
Aynı sekiz renk, CSS özel özellikleri olarak; koyu değerler sistem temasına göre devreye giriyor:
:root {
--color-error: #B3261E;
--color-on-error: #FFFFFF;
--color-error-container: #F6CBC8;
--color-on-error-container: #410E0B;
}
@media (prefers-color-scheme: dark) {
:root {
--color-error: #F2B8B5;
--color-on-error: #601410;
--color-error-container: #8C1D18;
--color-on-error-container: #F9DEDC;
}
}
.field--invalid { border-color: var(--color-error); }
.field__error { color: var(--color-error); }
.alert--error {
background: var(--color-error-container);
color: var(--color-on-error-container);
}
Material'da bu roller zaten colorScheme.error, onError, errorContainer ve onErrorContainer olarak var; varsayılandan tek fark daha koyu açık kapsayıcı. Başka her yerde bu dört isim çalmaya değer: bir sonraki kişinin #FF0000'a uzanmasını engellerler.
Kontrast değerleri
WCAG 2, gövde metni için en az 4,5'e 1 ister.
| Çift | Kontrast |
|---|---|
| Beyaz üzerinde #FF0000 metin | 4,0'a 1, alt sınırın altında |
| Beyaz üzerinde #B3261E metin | 6,5'e 1 |
| #FF0000 üzerinde beyaz metin | 4,0'a 1, alt sınırın altında |
| #F6CBC8 üzerinde #410E0B metin | 11,1'e 1 |
| Koyu #141218 üzerinde #F2B8B5 metin | 10,9'a 1 |
| Koyu #141218 üzerinde #FF0000 metin | 4,7'ye 1, geçer ve yine de titreşir |
Son satır, bir denetleyicinin neden yetmediğinin sebebi. Koyuda saf kırmızı teknik olarak geçer ve yine de yanlış seçimdir.
SSS
Hata mesajları hangi renkte olmalı?
Beyaz arka planda #B3261E gibi, küçük boyutlarda kolay okunan koyu bir kırmızı. Yanına bir ikon ve sorunun nasıl çözüleceğini söyleyen bir mesaj ekle.
#FF0000 hata metni için erişilebilir mi?
Hayır. Beyaz üzerinde saf kırmızının kontrastı yaklaşık 4,0'a 1'dir; bu, WCAG'in gövde metni için istediği 4,5'e 1'in altındadır ve hata mesajları genellikle küçüktür.
Material Design 3'te hata rengi nedir?
Açık tema hata rolü #B3261E'dir ve üstünde #FFFFFF kullanılır; hata kapsayıcısı #F9DEDC, metni #410E0B'dir. Koyu temada hata rolü #F2B8B5, kapsayıcı #8C1D18'dir.
Koyu modda hatalar hangi renkte olmalı?
#F2B8B5 gibi daha açık, daha yumuşak bir kırmızı. Saf kırmızı koyu arka planlarda kontrast kontrolünü geçer ama titreşir ve okumak rahatsız eder.
Hata yalnızca renkle gösterilebilir mi?
Hayır. Erkeklerin yaklaşık on ikide birinde bir tür renk körlüğü vardır ve WCAG 1.4.1 rengin asla tek sinyal olmamasını şart koşar. Bir ikon ve kelimeler ekle.
Kaynaklar
- Material Design 3 temel hata rolleri, açık ve koyu, Material renk rolleri ve androidx Compose renk token'larından.
- WCAG 2.2, 1.4.3 Kontrast (Asgari) ve 1.4.1 Renk Kullanımı.
- Kontrast oranları WCAG göreli parlaklık formülüyle hesaplandı. Saf kırmızı ve #808080 grinin göreli parlaklığı 0,213 ve 0,216'dır.
- Renk körlüğü yaygınlığı National Eye Institute verisinden.
- İlk olarak UX Brainy üzerinde bir carousel olarak yayımlandı.
Want error states, forms and every other state designed as one system? Our team designs and builds product UI that holds up in light and dark.
Get Started
