رنگ لینک: چرا #0000FF شکست می‌خورد و ۸ رنگ لینک که باید به جایش استفاده کنید
آبی خالص اولین رنگ لینکی است که همه انتخاب میکنند و کنار متن اصلی و روی صفحههای تیره انتخاب اشتباهی است. زیرش خط بکشید، روی تیره روشنش کنید، لینکهای بازدیدشده را نشان بدهید و حلقه فوکوس را نگه دارید. هشت کد همراه مقاله است.
رنگ درست لینک آبیِ کمی ملایم‌تری است که زیرش هم خط می‌کشید، نه #0000FF بهتنهایی. آبی خالص اولین رنگ لینکی است که همه انتخاب میکنند و در دو جا شکست می‌خورد: کنار متن اصلی مشکی و روی صفحههای تیره. اینجا چهار راه‌حل و هشت رنگی که باید به توسعه‌دهنده‌تان بدهید را می‌بینید.
چرا #0000FF شکست می‌خورد
هیچ‌کس تصمیم نمی‌گیرد از #0000FF استفاده کند. خودش از راه می‌رسد. این همان کلیدواژه blue در CSS است و اولین آبی اشباع در هر رنگ‌چین.
خود مرورگرها پیشفرض کمی متفاوتی دارند، یعنی #0000EE برای لینک و #551A8B برای لینک بازدیدشده، و هر دو را خط‌دار میکنند. خط زیرین بخشی از قرارداد اصلی است. طراحان آن را برای تمیز دیده شدن برمی‌دارند و فقط آبی را نگه می‌دارند.
بعد آبی باید کار را تنها انجام بدهد. آبی خالص خیلی تیره است. آن را وسط پاراگرافی از متن تقریباً مشکی بگذارید؛ برای کسی که در تشخیص رنگ‌ها مشکل دارد این دو تقریباً یکسان دیده می‌شوند. روی صفحه تیره بدتر است: #0000FF در پسزمینه فرو می‌رود.
لینک سه چیز است: یک رنگ، یک خط و یک حالت.
راه‌حل ۱: زیرش خط بکشید
فقط رنگ
خط‌دار
#0F62FE ملایم‌تر چشم را کمتر از #0000FF اذیت میکند.قاعده‌ای که پشت این کار است WCAG 1.4.1 است، یعنی استفاده از رنگ.
لینکی که فقط با رنگ مشخص شده باید بهوضوح از متن اطرافش متمایز باشد. آبی خالص کنار مشکی خالص این‌طور نیست، اما #0F62FE کنار #161616، رنگ متنی که اینجا استفاده می‌کنیم، هست. خط زیرین مشکل را کاملاً از بین میبرد، چون لینک دیگر به رنگ وابسته نیست.
زیر لینکهای داخل متن روان خط بکشید. نوارهای ناوبری، دکمه‌ها و کارت‌ها فرق دارند: موقعیت و شکلشان خودش «قابل کلیک» را میگوید، پس خط زیرین آنجا اختیاری است.
فقط رنگ، مقیاس خاکستری
خط‌دار، مقیاس خاکستری
راه‌حل ۲: روی تیره روشنش کنید
#0000FF روی تیره
#78A9FF روی تیره
مقایسه‌ای نزدیک نیست. #0000FF روی #161616 برای خواندن در اندازه متن اصلی بیش از حد تیره است و #78A9FF روی همان پسزمینه راحت خوانده میشود. رنگ‌های اشباعی که روی سفید کار میکنند روی تیره روشنتر و ملایم‌تر می‌شوند، همان حرکتی که برای رنگ پیام‌های خطا هم می‌زنیم.
دو آبی نگه دارید و با تم جابه‌جایشان کنید: #0F62FE روی صفحههای روشن و #78A9FF روی تیره. هاور یک پله جلوتر می‌رود: #0043CE روی روشن و #A6C8FF روی تیره.
راه‌حل ۳: نشان بدهید مردم کجا بوده‌اند
همه لینکها تازه به نظر می‌رسند
بازدیدشده بنفش میشود
گروه Nielsen Norman از سال ۲۰۰۴ این را میگوید: وقتی لینکهای بازدیدشده و تازه یک رنگ دارند، مردم گم می‌شوند و دور خودشان می‌چرخند. بنفش قرارداد است و مرورگرها از ابتدا از آن استفاده کرده‌اند. روی صفحههای روشن از #8A3FFC و روی تیره از #BE95FF استفاده کنید. فقط یک قاعده CSS خرج دارد: a:visited.
راه‌حل ۴: حلقه فوکوس را نگه دارید
outline: none
حلقه 2px با #0F62FE
کاربران کیبورد، کاربران سوییچ و هر کسی که دست ماوسش خسته است به حلقه فوکوس وابسته‌اند.
حذف آن با outline: none و نگذاشتن چیزی به جایش، WCAG 2.4.7 یعنی فوکوس قابل مشاهده را رد میکند. اگر حلقه پیشفرض مرورگر با طراحی‌تان نمی‌خواند، جایگزینش کنید. حذفش نکنید.
حلقه 2 پیکسلی به رنگ لینک، با کمی فاصله، نسخه امن است. WCAG 2.2 قوی‌ترین شکل را محیطی دست‌کم به ضخامت 2 پیکسل CSS توصیف میکند.
۸ رنگ لینک، روشن و تیره
روی هر چیپ بزنید تا کدش کپی شود.
| نقش | روشن | تیره | کاربرد |
|---|---|---|---|
| متن | #161616 | #F4F4F4 | متن اصلی اطراف لینک |
| لینک | #0F62FE | #78A9FF | هر لینک در حالت عادی |
| هاور | #0043CE | #A6C8FF | وقتی نشانگر روی لینک است |
| بازدیدشده | #8A3FFC | #BE95FF | لینک‌هایی که قبلاً باز شده‌اند |
اینها توکن‌های لینک IBM Carbon هستند که از مقادیر منتشرشده تمش خوانده شده‌اند.
این را به توسعه‌دهنده‌تان بدهید
: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; }
ترتیب مهم است: :link، :visited، :hover، :focus، :active ترتیب کلاسیک است و قاعده هاوری که قبل از قاعده visited بیاید روی لینک بازدیدشده هرگز برنده نمی‌شود. سلکتور :focus-visible حلقه را برای کاربران کیبورد نشان می‌دهد و برای کلیک ماوس رد میشود، پس کسی دلیلی برای حذفش ندارد.
اعداد پشت «خوانا بودن»
| جفت رنگ | کنتراست |
|---|---|
| #0000FF روی سفید | 8.6 به 1، قبول است و باز هم به متن مشکی خیلی نزدیک است |
| #0000FF روی #161616 | 2.1 به 1، رد |
| #0F62FE روی سفید | 5.0 به 1 |
| #0043CE روی سفید | 7.8 به 1 |
| #8A3FFC روی سفید | 5.0 به 1 |
| #78A9FF روی #161616 | 7.7 به 1 |
| #A6C8FF روی #161616 | 10.6 به 1 |
| #BE95FF روی #161616 | 7.7 به 1 |
ردیف اول دلیل این است که ابزار بررسی کافی نیست. آبی خالص روی سفید از نظر عدد قبول میشود. اما در آزمون واقعی رد میشود، یعنی اینکه لینک با متن مشکی کنارش فرق داشته باشد یا نه.
سؤالات متداول
لینکها چه رنگی باشند؟
آبی متوسطی مثل #0F62FE روی پسزمینه روشن و آبی روشنتری مثل #78A9FF روی پسزمینه تیره، همراه با خط زیرین در متن اصلی.
آیا #0000FF رنگ خوبی برای لینک است؟
بهتنهایی نه. روی سفید خوب خوانده میشود، اما برای کسانی که آبی را نمیبینند خیلی به متن مشکی نزدیک است و روی پسزمینه تیره تقریباً ناپدید میشود.
آیا باید زیر لینکها خط کشید؟
بله، داخل پاراگرافها. WCAG 1.4.1 میگوید رنگ بهتنهایی نمیتواند لینک را مشخص کند مگر اینکه بهوضوح از متن اطرافش متمایز باشد، و خط زیرین این وابستگی را از بین میبرد.
لینکهای بازدیدشده چه رنگی باشند؟
بنفش. مرورگرها پیشفرض را #551A8B میگذارند و سیستمهای طراحی مثل IBM Carbon روی صفحههای روشن از #8A3FFC و روی تیره از #BE95FF استفاده میکنند.
کدام رنگ لینک در حالت تیره کار میکند؟
آبی روشنتر. #78A9FF روی #161616 راحت خوانده میشود، در حالی که #0000FF برای خواندن در اندازه متن اصلی بیش از حد تیره است.
آیا می‌توانم خط دور فوکوس لینکها را حذف کنم؟
فقط اگر آن را با نشانگر قابل مشاهده دیگری جایگزین کنید. حذفش بدون جایگزین، WCAG 2.4.7 یعنی فوکوس قابل مشاهده را رد میکند.
منابع
- HTML Living Standard, Rendering: شیوه‌نامه پیشفرض
:linkرا روی#0000EEو:visitedرا روی#551A8Bمی‌گذارد و لینکها را خط‌دار میکند.#0000FFرنگ نام‌دار CSS یعنیblueاست. - IBM Carbon color tokens، خوانده‌شده از @carbon/themes 11.40.0: link-primary
#0F62FE، هاور#0043CE، بازدیدشده#8A3FFCدر تم سفید؛ و#78A9FF،#A6C8FF،#BE95FFدر تم g100. - WCAG 2, 1.4.1 Use of Color و تکنیک G183.
- WCAG 2.4.7 Focus Visible و 2.4.13 Focus Appearance.
- Nielsen Norman Group، Change the Color of Visited Links (Jakob Nielsen، 2004).
- نسبت‌های کنتراست با فرمول روشنایی نسبی WCAG محاسبه شده‌اند. متن نمونه برای این صفحه ساخته شده است.
- نخستین بار به‌صورت کاروسل در UX Brainy منتشر شد.
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
