عدم اتکا به رنگ به‌تنهایی

عدم اتکا به رنگ به‌تنهایی؛ وقتی رنگ تنها پیام‌رسان باشه

تو درس‌های قبل، چند بار از کنار این موضوع رد شدیم؛ تو فصل فرم‌ها گفتیم که خطا نباید فقط با رنگ قرمز نشون داده بشه، و تو بحث کنتراست هم دیدیم که رنگ‌ها باید خونا باشن. حالا وقتشه این اصل رو به‌عنوان یه قانون مستقل و کامل بررسی کنیم: هیچ‌وقت رنگ نباید تنها راه انتقال یه اطلاعات باشه.

چرا این موضوع اصلاً مهمه؟

حدود ۸ درصد مردها و کمتر از ۱ درصد زن‌ها، نوعی کوررنگی دارن؛ رایج‌ترین نوعش، ناتوانی تو تشخیص فرق قرمز و سبزه. یعنی اگه یه المنت با «سبز یعنی موفق، قرمز یعنی خطا» طراحی بشه و هیچ نشونه‌ی دیگه‌ای نداشته باشه، یه بخش قابل‌توجه از کاربرها اصلاً نمی‌تونن این دو حالت رو از هم تشخیص بدن. علاوه بر کوررنگی، تو شرایطی مثل نمایشگر سیاه‌وسفید، چاپ سیاه‌قلم، یا حتی نور شدید محیط هم، تفاوت‌های رنگی ممکنه کاملاً محو بشن.

مثال کلاسیک: نمودار یا گراف با رنگ‌های مشابه

فرض کنید یه نمودار خطی دارید که چند خط با رنگ‌های مختلف رو مقایسه می‌کنه:

.line-a { stroke: #e74c3c; } /* قرمز */
.line-b { stroke: #2ecc71; } /* سبز */
.line-c { stroke: #3498db; } /* آبی */

برای کاربری که قرمز-سبز رو تشخیص نمی‌ده، خط اول و دوم ممکنه عملاً یه رنگ به نظر برسن. راه‌حل، اضافه کردن یه تمایز دوم غیر از رنگه؛ مثلاً الگوی خط (خط‌چین، نقطه‌چین، توپر) یا شکل نشانگر:

.line-a { stroke: #e74c3c; stroke-dasharray: none; }
.line-b { stroke: #2ecc71; stroke-dasharray: 6 3; }
.line-c { stroke: #3498db; stroke-dasharray: 2 2; }

حالا حتی اگه کاربر اصلاً رنگ‌ها رو نبینه (مثلاً چاپ سیاه‌سفید)، همچنان می‌تونه سه خط رو از الگوشون از هم تشخیص بده.

مثال کلاسیک دیگه: وضعیت سفارش یا فرم فقط با رنگ

یه الگوی خیلی رایج تو داشبوردها، نشون دادن وضعیت (موفق/در انتظار/خطا) فقط با یه نقطه‌ی رنگی کوچیکه:

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.status-dot.success { background: green; }
.status-dot.error { background: red; }

راه‌حل بهتر، ترکیب رنگ با یه آیکون یا متن:

.status-dot.success::before { content: "✓"; }
.status-dot.error::before { content: "✕"; }

یا حتی ساده‌تر، همیشه یه برچسب متنی کنار نقطه‌ی رنگی بذارید («موفق»، «خطا»)، نه فقط تکیه به خود نقطه.

لینک‌ها: فقط رنگ کافی نیست

یه اشتباه خیلی رایج، متمایز کردن لینک از متن معمولی فقط با رنگه:

/* مشکل‌دار برای کاربر کوررنگ وسط یه پاراگراف */
a {
  color: blue;
  text-decoration: none;
}

اگه یه لینک وسط یه پاراگراف متن معمولی باشه و فقط رنگش فرق کنه، کاربر کوررنگ ممکنه اصلاً متوجه نشه این بخش قابل‌کلیکه. راه‌حل استاندارد، نگه‌داشتن underline (یا حداقل یه نشونه‌ی بصری غیررنگی دیگه) برای لینک‌های داخل متن:

a {
  color: #1d4ed8;
  text-decoration: underline;
}

البته این قانون برای لینک‌هایی که خودشون یه دکمه یا آیتم منوی مجزا هستن (نه وسط یه پاراگراف)، کمتر حیاتیه، چون موقعیت و ساختارشون خودش به‌اندازه‌ی کافی گویاست.

required فیلدها: ستاره یا رنگ؟

تو فصل فرم‌ها با یه روش CSS خالص برای نشون دادن فیلدهای اجباری آشنا شدیم:

label:has(+ input:required)::after {
  content: " *";
  color: #dc2626;
}

نکته‌ی مهم اینجا اینه که خود ستاره (*) نشونه‌ی اصلیه، نه رنگ قرمزش؛ یعنی حتی اگه رنگ رو کامل حذف کنید، همچنان یه علامت متنی باقی می‌مونه که کاربر می‌تونه تشخیصش بده. این دقیقاً همون الگوییه که باید همیشه دنبالش باشید: رنگ به‌عنوان یه لایه‌ی تقویتی اضافه بشه، نه تنها حامل پیام.

تست سریع: عکس رو سیاه‌وسفید کنید

یه روش عملی و سریع برای چک کردن این اصل، گرفتن یه اسکرین‌شات از صفحه و تبدیلش به سیاه‌وسفید (یا استفاده از فیلترهای شبیه‌ساز کوررنگی تو DevTools بعضی مرورگرها) هست. اگه بعد از این تبدیل، هنوز می‌تونید همه‌ی اطلاعات مهم صفحه (وضعیت‌ها، خطاها، لینک‌ها، نمودارها) رو تشخیص بدید، احتمالاً از این نظر مشکلی ندارید:

/* شبیه‌سازی کوررنگی برای تست، فقط برای دیباگ */
.debug-colorblind {
  filter: grayscale(100%);
}

اشتباه رایج: اضافه کردن نشونه‌ی دوم ولی نامفهوم

گاهی توسعه‌دهنده‌ها یه نشونه‌ی دوم اضافه می‌کنن، ولی خودش هم به‌اندازه‌ی کافی گویا نیست؛ مثلاً استفاده از دو شکل خیلی شبیه به هم (مثل دو تا دایره‌ی توخالی و توپر که فرقشون خیلی ریزه). نشونه‌ی دوم باید به‌اندازه‌ای واضح باشه که مستقل از رنگ، به‌تنهایی قابل تشخیص باشه؛ مثل تفاوت واقعی بین یه تیک و یه ضربدر، نه دو شکل هندسی مبهم.

جمع‌بندی

هر جا رنگ برای انتقال یه اطلاعات مهم (وضعیت، خطا، دسته‌بندی، قابل‌کلیک بودن) استفاده می‌شه، باید یه نشونه‌ی دوم و مستقل از رنگ هم وجود داشته باشه؛ چه آیکون، چه متن، چه الگو، چه underline. این اصل هم به کاربرهای کوررنگ کمک می‌کنه، هم به هر کسی که به هر دلیلی رنگ‌ها رو به‌وضوح نمی‌بینه. تست سریع سیاه‌وسفید کردن صفحه، یه راه ساده برای چک کردن سریع این اصله.