Bağlantı Rengi: #0000FF Neden Başarısız Olur ve Onun Yerine Kullanılacak 8 Bağlantı Rengi
Saf mavi, herkesin seçtiği ilk bağlantı rengidir ve gövde metninin yanında ve koyu ekranlarda yanlış olandır. Altını çizin, koyuda açın, ziyaret edilmiş bağlantıları gösterin, odak halkasını koruyun. Sekiz kod dahil.
Doğru bağlantı rengi, altını da çizdiğiniz biraz daha yumuşak bir mavidir; tek başına #0000FF değil. Saf mavi herkesin seçtiği ilk bağlantı rengidir ve iki yerde başarısız olur: siyah gövde metninin yanında ve koyu ekranlarda. İşte dört çözüm ve geliştiricinize vereceğiniz sekiz renk.
#0000FF neden başarısız olur
Kimse #0000FF kullanmaya karar vermez. Kendiliğinden gelir. CSS'teki blue anahtar kelimesidir ve her renk seçicideki ilk doygun mavidir.
Tarayıcıların kendisi biraz farklı bir varsayılanla gelir: bağlantı için #0000EE, ziyaret edilmiş olan için #551A8B, ve ikisinin de altını çizerler. Alt çizgi orijinal anlaşmanın parçasıdır. Tasarımcılar temiz görünsün diye çizgiyi kaldırır, maviyi tutar.
Sonra mavi işi tek başına yapmak zorunda kalır. Saf mavi çok koyudur. Onu koyuya yakın bir metin paragrafının içine koyun; renkleri ayırt etmekte zorlanan biri için ikisi neredeyse aynı görünür. Koyu ekranda durum daha kötüdür: #0000FF arka planda kaybolur.
Bir bağlantı üç şeydir: bir renk, bir çizgi ve bir durum.
Çözüm 1: Altını çizin
Yalnızca renk
Altı çizili
Bunun arkasındaki kural WCAG 1.4.1, rengin kullanımı.
Yalnızca renkle işaretlenen bir bağlantı, çevresindeki metinden net biçimde ayrışmalıdır. Saf siyahın yanındaki saf mavi bunu yapmaz; #0F62FE ise burada kullandığımız metin rengi #161616'nın yanında yapar. Alt çizgi sorunu tamamen ortadan kaldırır, çünkü bağlantı artık renge bağlı değildir.
Akan metnin içindeki bağlantıların altını çizin. Gezinme çubukları, düğmeler ve kartlar farklıdır: konumları ve biçimleri zaten "tıklanabilir" der, bu yüzden orada alt çizgi isteğe bağlıdır.
Yalnızca renk, gri tonlama
Altı çizili, gri tonlama
Çözüm 2: Koyuda açın
Koyuda #0000FF
Koyuda #78A9FF
Fark küçük değil. #161616 üzerindeki #0000FF gövde boyutunda okunamayacak kadar koyu, aynı arka plandaki #78A9FF ise kolay okunuyor. Beyazda işe yarayan doygun renkler koyuda daha açık ve yumuşak olur; hata renkleri için de aynı hamleyi yapıyoruz.
İki mavi tutun ve temayla değiştirin: açık ekranlarda #0F62FE, koyularda #78A9FF. Hover bir adım daha ileri gider: açıkta #0043CE, koyuda #A6C8FF.
Çözüm 3: Nerelerde bulunulduğunu gösterin
Her bağlantı yeni görünüyor
Ziyaret edilen mor oluyor
Nielsen Norman Group bunu 2004'ten beri savunuyor: ziyaret edilmiş ve yeni bağlantılar tek renk paylaştığında insanlar kaybolur ve daireler çizer. Mor gelenektir ve tarayıcılar başından beri onu kullanır. Açık ekranlarda #8A3FFC, koyularda #BE95FF kullanın. Maliyeti tek bir CSS kuralı: a:visited.
Çözüm 4: Odak halkasını koruyun
outline: none
2px #0F62FE halka
Klavye kullanıcıları, anahtar kullanıcıları ve fare elinin yorulduğu herkes odak halkasına bağımlıdır.
Onu outline: none ile kaldırıp yerine hiçbir şey koymamak WCAG 2.4.7, görünür odak, ölçütünü karşılamaz. Tarayıcının varsayılan halkası tasarımınızla çatışıyorsa değiştirin. Silmeyin.
Bağlantı renginde, küçük bir ofsetli 2px halka güvenli sürümdür. WCAG 2.2 en güçlü biçimi en az 2 CSS pikselinlik bir çevre olarak tanımlar.
8 bağlantı rengi, açık ve koyu
Kodunu kopyalamak için herhangi bir çipe dokunun.
| Rol | Açık | Koyu | Ne için kullanılır |
|---|---|---|---|
| Metin | #161616 | #F4F4F4 | Bağlantının çevresindeki gövde metni |
| Bağlantı | #0F62FE | #78A9FF | Bekleme durumundaki her bağlantı |
| Hover | #0043CE | #A6C8FF | İşaretçi bağlantının üzerindeyken |
| Ziyaret edilmiş | #8A3FFC | #BE95FF | Daha önce açılmış bağlantılar |
Bunlar IBM Carbon'ın bağlantı token'larıdır, yayımlanmış tema değerlerinden okunmuştur.
Bunu geliştiricinize verin
:root {
--color-text: #161616;
--color-link: #0F62FE;
--color-link-hover: #0043CE;
--color-link-visited: #8A3FFC;
}
@media (prefers-color-scheme: dark) {
:root {
--color-text: #F4F4F4;
--color-link: #78A9FF;
--color-link-hover: #A6C8FF;
--color-link-visited: #BE95FF;
}
}
a { color: var(--color-link); text-decoration: underline; text-underline-offset: 0.15em; }
a:visited { color: var(--color-link-visited); }
a:hover { color: var(--color-link-hover); }
a:focus-visible { outline: 2px solid var(--color-link); outline-offset: 3px; }
Sıra önemlidir: :link, :visited, :hover, :focus, :active klasik dizilimdir ve visited kuralından önce yerleştirilen bir hover kuralı ziyaret edilmiş bağlantıda asla kazanmaz. :focus-visible seçicisi halkayı klavye kullanıcıları için gösterir, fare tıklamalarında atlar; yani kimsenin onu kaldırmak için bir nedeni kalmaz.
"Okunması kolay" ifadesinin arkasındaki sayılar
| Çift | Kontrast |
|---|---|
| Beyaz üzerinde #0000FF | 8,6 'ya 1, geçer ve yine de siyah metne fazla yakın |
| #161616 üzerinde #0000FF | 2,1 'e 1, başarısız |
| Beyaz üzerinde #0F62FE | 5,0 'a 1 |
| Beyaz üzerinde #0043CE | 7,8 'e 1 |
| Beyaz üzerinde #8A3FFC | 5,0 'a 1 |
| #161616 üzerinde #78A9FF | 7,7 'ye 1 |
| #161616 üzerinde #A6C8FF | 10,6 'ya 1 |
| #161616 üzerinde #BE95FF | 7,7 'ye 1 |
İlk satır, bir kontrol aracının neden yeterli olmadığını gösterir. Beyaz üzerinde saf mavi sayı olarak geçer. Gerçek testte, yani bir bağlantının yanındaki siyah metinden farklı görünüp görünmediğinde, başarısız olur.
SSS
Bağlantılar hangi renk olmalı?
Açık arka planlarda #0F62FE gibi orta bir mavi, koyularda #78A9FF gibi daha açık bir mavi; gövde metninde alt çizgiyle birlikte.
#0000FF iyi bir bağlantı rengi mi?
Tek başına değil. Beyazda gayet iyi okunur, ama maviyi göremeyen kişiler için siyah gövde metnine fazla yakındır ve koyu arka planlarda neredeyse kaybolur.
Bağlantıların altı çizili olmalı mı?
Evet, paragrafların içinde. WCAG 1.4.1, çevredeki metinden net biçimde ayrışmadıkça bir bağlantının yalnızca renkle işaretlenemeyeceğini söyler ve alt çizgi bu bağımlılığı ortadan kaldırır.
Ziyaret edilmiş bağlantılar hangi renk olmalı?
Mor. Tarayıcılar varsayılan olarak #551A8B kullanır; IBM Carbon gibi tasarım sistemleri açık ekranlarda #8A3FFC, koyularda #BE95FF kullanır.
Karanlık modda hangi bağlantı rengi işe yarar?
Daha açık bir mavi. #78A9FF, #161616 üzerinde kolay okunur; #0000FF ise gövde boyutunda okunamayacak kadar koyudur.
Bağlantılardaki odak çerçevesini kaldırabilir miyim?
Yalnızca yerine görünür başka bir gösterge koyarsanız. Yerine hiçbir şey koymadan kaldırmak WCAG 2.4.7, görünür odak, ölçütünü karşılamaz.
Kaynaklar
- HTML Living Standard, Rendering: varsayılan stil sayfası
:linkiçin #0000EE,:visitediçin #551A8B belirler ve bağlantıların altını çizer. #0000FF, CSS adlandırılmış rengiblue'dur. - IBM Carbon color tokens, @carbon/themes 11.40.0'dan okunmuştur: beyaz temada link-primary #0F62FE, hover #0043CE, visited #8A3FFC; g100 temada #78A9FF, #A6C8FF, #BE95FF.
- WCAG 2, 1.4.1 Use of Color ve teknik G183.
- WCAG 2.4.7 Focus Visible ve 2.4.13 Focus Appearance.
- Nielsen Norman Group, Change the Color of Visited Links (Jakob Nielsen, 2004).
- Kontrast oranları WCAG göreli parlaklık formülüyle hesaplanmıştır. Örnek metin bu sayfa için uydurulmuştur.
- İlk olarak UX Brainy üzerinde bir karusel olarak yayımlandı.
Want links, 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
