منبع: بنیاد طراحی تعامل (IxDF) · بازنویسی آزاد: سپنتا پویا · مرداد ۱۴۰۵ · زمان مطالعه: حدود ۱۱ دقیقه

کوررنگی (Color Blindness) چیست؟

💡 این متن «بازنویسی آزاد» است: ایده‌ها و مفاهیم مطلب اصلی با نگارش کاملاً مستقل فارسی و مثال‌های تازه بازگو شده‌اند و ترجمهٔ کلمه‌به‌کلمه نیست. بخش‌های افزودهٔ مترجم در جعبهٔ منبع مشخص شده‌اند.

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

و این «بخش کوچکی» نیست. حدود یک نفر از هر دوازده مرد نوعی نقص دید رنگی دارد.

کوررنگی چیست و چند نوع دارد

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

• - دوترانوپیا — دشواری در تشخیص قرمز و سبز؛ این رنگ‌ها ممکن است قهوه‌ای یا خاکستری دیده شوند.
• - پروتانوپیا — باز هم قرمز و سبز، اما با دشواری ویژه در دیدن قرمز.
• - تریتانوپیا — دشواری در تشخیص آبی و زرد؛ آبی ممکن است سبز-زرد یا صورتی دیده شود.
• - آکروماتوپسیا — کوررنگی کامل و بسیار نادر؛ همه‌چیز در طیف خاکستری دیده می‌شود.

نکتهٔ عملی در همین فهرست پنهان است: بیش از ۹۵ درصد افراد دارای نقص دید رنگی، از نوع قرمز-سبز هستند. یعنی اگر فقط بخواهید یک تصمیم بگیرید، آن تصمیم این است که قرمز و سبز را در کنار هم حامل معنا نکنید.

چقدر شایع است

• - حدود ۱۰ درصد مردان و ۱ درصد زنان
• - یعنی تقریباً یک نفر از هر ۱۲ مرد و یک نفر از هر ۲۰۰ زن
• - در مجموع حدود ۳۰۰ میلیون نفر در جهان

(منبع برای این ارقام مرجع دانشگاهی ذکر نمی‌کند، اما اعداد با آمار رایج در این حوزه هم‌خوان‌اند.) برای اینکه این عدد ملموس شود: اگر محصول شما ۱۰۰ هزار کاربر مرد دارد، حدود ۸ هزار نفرشان آن هشدار قرمز را قرمز نمی‌بینند.

راهکارهای طراحی

• - کنتراست بالا — دست‌کم نسبت ۴٫۵ به ۱ برای متن معمولی و ۳ به ۱ برای متن بزرگ.
• - هرگز فقط به رنگ تکیه نکنید — این مهم‌ترین قاعدهٔ کل بحث است.
• - ترکیب‌های رنگی را با دقت انتخاب کنید و جفت قرمز-سبز را کنار بگذارید.
• - از بافت، الگو یا شکل برای تمایز استفاده کنید.
• - برچسب متنی و آیکون را در کنار رنگ بیاورید.
• - حالت فوکوس و هاور را فراموش نکنید.
• - با ابزار شبیه‌ساز آزمایش کنید — Color Oracle، Stark (افزونهٔ فیگما و اسکچ)، Coblis، و WebAIM Contrast Checker برای کنتراست.

چرا نسبت کنتراست اصلاً کار می‌کند

این بخش افزودهٔ مترجم است، چون معمولاً این دو توصیه — «کنتراست بالا» و «به رنگ تکیه نکن» — کنار هم گفته می‌شوند بی‌آنکه ربطشان توضیح داده شود. ربطشان دقیقاً همین است:

نسبت کنتراست، تفاوت روشنایی را می‌سنجد، نه تفاوت رنگ را. و روشنایی تنها کانالی است که نقص دید رنگی آن را دست‌نخورده باقی می‌گذارد. کسی که قرمز و سبز را از هم تشخیص نمی‌دهد، همچنان تیره و روشن را کاملاً تشخیص می‌دهد.

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

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

چرا در رابط فارسی گران‌تر تمام می‌شود

این بخش هم افزودهٔ مترجم است و ادامهٔ مستقیم بحث طراحی تخت. آنجا دیدیم که سلسله‌مراتب در طراحی تخت روی سه اهرم سوار است — وزن قلم، حروف بزرگ و رنگ — و در فارسی اهرم اول ضعیف و اهرم دوم اصلاً غایب است. یعنی رنگ در رابط فارسی بیشتر از رابط انگلیسی بار می‌برد.

و هرچه رنگ بار بیشتری ببرد، از دست‌رفتنش گران‌تر تمام می‌شود. این یک پیوند مستقیم است، نه یک تشبیه: همان تصمیمی که سلسله‌مراتب رابط فارسی را روی رنگ متمرکز می‌کند، آن رابط را برای کاربر کوررنگ شکننده‌تر هم می‌کند.

جاهایی که در محصولات فارسی این مسئله بیشتر از همه دیده می‌شود:

• - موجود / ناموجود در فهرست کالا، وقتی تفاوت فقط رنگ برچسب است.
• - وضعیت سفارش در پنل کاربر — در حال پردازش، ارسال‌شده، لغوشده — که اغلب فقط با نقطهٔ رنگی از هم جدا می‌شوند.
• - اعتبارسنجی فرم، وقتی تنها نشانهٔ خطا قرمزشدن قاب فیلد است بدون هیچ متنی.
• - نمودار رشد و افت در داشبوردها و اپلیکیشن‌های مالی.
• - وضعیت سرویس در پنل‌های مدیریتی، با همان چراغ‌های سبز و قرمز کوچک.

و جایگزین‌هایی که واقعاً کار می‌کنند:

• - برچسب متنی را اضافه کنید، نه فقط آیکون. و اینجا فارسی یک مزیت دارد: چون ابزار «حروف بزرگ» را نداریم، تیم‌ها معمولاً به‌جای برچسب کوتاه انگلیسی، کلمهٔ کامل فارسی می‌نویسند — و کلمهٔ کامل، خودش صریح‌تر است.
• - در نمودارها از برچسب مستقیم روی خط استفاده کنید نه راهنمای رنگی گوشهٔ نمودار. راهنمای رنگی بدترین حالت ممکن است، چون کل معنا را به تطبیق رنگ گره می‌زند.
• - در نمودار، سبک خط و نشانگر را هم تغییر دهید — خط‌چین در برابر خط ممتد، دایره در برابر مربع.
• - برای رشد و افت، علامت را هم بیاورید — یک پیکان بالا و پایین در کنار عدد. اما این را حتماً با ارقام فارسی آزمایش کنید: قرارگرفتن علامت مثبت و منفی کنار عدد در یک متن راست‌به‌چپ، از نقاط کلاسیک شکست دوجهته است و باید دیده شود، نه فرض.
• - در فرم، متن خطا را زیر فیلد بنویسید. قاب قرمز نشانهٔ کمکی خوبی است، اما به‌تنهایی نه — و متن خطا برای همهٔ کاربران هم مفیدتر است، چون می‌گوید چه چیزی اشتباه است.

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

پالت امن: از کجا شروع کنیم

این بخش هم افزودهٔ مترجم است. «قرمز و سبز را کنار بگذارید» می‌گوید چه نکنید؛ سؤال بعدی این است که پس چه بکنید. چهار قاعده که در عمل جواب می‌دهند:

• - جفت آبی و نارنجی را جایگزین قرمز و سبز کنید. چون بیش از ۹۵ درصد موارد از نوع قرمز-سبز است، محور آبی-زرد برای اکثریت قاطع کاربران سالم می‌ماند. این ساده‌ترین تعویضی است که می‌توانید انجام دهید و تقریباً همیشه کار می‌کند.
• - در پالت، فقط فام را تغییر ندهید؛ روشنایی را هم تغییر دهید. پالتی که همهٔ رنگ‌هایش روشنایی یکسانی دارند، در حالت خاکستری به یک لکهٔ یکدست تبدیل می‌شود. اگر رنگ‌ها از تیره به روشن مرتب شوند، حتی بدون رنگ هم ترتیبشان خوانده می‌شود.
• - برای مجموعه‌های دسته‌ای، ترتیب روشنایی را عمدی بسازید. در نمودار ستونی با پنج دسته، پنج فام مختلف با روشنایی تصادفی انتخاب نکنید؛ یک طیف روشنایی بسازید و فام را روی آن بنشانید.
• - «حالت کوررنگی» جداگانه نسازید. این وسوسه‌انگیز است اما تقریباً همیشه شکست می‌خورد: یک نسخهٔ دوم از رابط می‌سازید که کسی آزمایشش نمی‌کند، به‌مرور از نسخهٔ اصلی عقب می‌ماند، و کاربر هم باید اول بداند که وجود دارد و بعد پیدایش کند. پالت پیش‌فرض را درست کنید.

جمع‌بندی

• - کوررنگی دشواری در تشخیص برخی رنگ‌هاست و از مشکل رنگدانهٔ سلول‌های مخروطی می‌آید؛ چهار شکل اصلی دارد: دوترانوپیا، پروتانوپیا، تریتانوپیا و آکروماتوپسیا.
• - بیش از ۹۵ درصد موارد از نوع قرمز-سبز است — پس اگر فقط یک تصمیم بگیرید، همین جفت را از حامل‌های معنا کنار بگذارید.
• - شیوعش حدود ۱۰ درصد مردان و ۱ درصد زنان است؛ تقریباً یک از هر ۱۲ مرد و در مجموع حدود ۳۰۰ میلیون نفر.
• - راهکارها: کنتراست دست‌کم ۴٫۵ به ۱، اتکانکردن به رنگ تنها، پرهیز از جفت قرمز-سبز، افزودن بافت و شکل و برچسب و آیکون، و آزمون با ابزارهایی مثل Color Oracle و Stark.
• - دلیل کارکردن نسبت کنتراست این است که روشنایی را می‌سنجد، و روشنایی تنها کانالی است که کوررنگی دست‌نخورده می‌گذارد — پس قاعدهٔ کلی این است که هر دو رنگ با روشنایی نزدیک، برای بخشی از کاربران یک رنگ‌اند.
• - ساده‌ترین آزمون: رابط را سیاه‌وسفید کنید و ببینید چه چیزی از بین می‌رود.
• - برای پالت: آبی و نارنجی به‌جای قرمز و سبز، تغییر روشنایی در کنار تغییر فام، ترتیب روشنایی عمدی در مجموعه‌های دسته‌ای — و نساختن «حالت کوررنگی» جداگانه.
• - در فارسی هزینه بیشتر است، چون رنگ از ابتدا بار سلسله‌مراتب بیشتری می‌برد؛ و متن ثانویهٔ خاکستری کم‌رنگ روی سفید، رایج‌ترین و پرهزینه‌ترین نمود همین وضعیت است.