طبق تحقیقات صورت گرفته در زمینه کور رنگی، 4.5٪ از مردم جهان کور رنگ هستند. اگر بیشتر مخاطبان شما مرد هستند این میزان به 8٪ افزایش می یابد. از آنجایی که اکثر طراحان بینایی طبیعی دارند، طراحی مناسب برای افراد کوررنگ فراموش می شود. در این مقاله 13 نکته برای بهبود تجربه ی افراد کور رنگ ارائه می دهیم چیزی که اغلب می تواند برای افراد دارای بینایی طبیعی نیز مفید باشد.

کوری رنگ چیست؟

کور رنگی انواع مختلفی دارد اما این امر ناشی از واضح ندیدن رنگ، اختلاط رنگ ها یا عدم تمایز بین رنگ های خاص است. این مشکلات همچنین می توانند در محیط هایی که مردم از وب سایت ها استفاده می کنند، تشدید شوند. دلیل آن می تواند مانیتورهای بی کیفیت، روشنایی نامناسب، درخشندگی زیاد صفحه نمایش، صفحه نمایش های کوچک تلفن همراه و نشستن دور از صفحه ی تلویزیون باشد. اگر یک وب سایت برای افزایش خوانایی و کارایی تنها بر رنگ متکی باشد، کاربردپذیری را دشوار می کند که در نهایت می تواند بر میزان بازدیدکنندگان و کاربران هم تأثیر بگذارد.

اگرچه نکات زیر جامع و کامل نیستند، اما اکثر مشکلات افراد کور رنگ هنگام استفاده از وب سایت را پوشش می دهند.

1.خوانایی متن

برای اطمینان از خوانا بودن متن، باید دستورالعمل های دسترسی پذیری را بر اساس ترکیب رنگ متن، رنگ پس زمینه و سایز متن به شرح زیر تصویب کنید:

"سطح WCAG 2.0 AA برای متن های عادی به نسبت، تضاد (Contrast) 4.5:1 و برای متن های بزرگ 3:1 (14 پیکسل و Boldیا بزرگتر، یا 18 پیکسل یا بزرگتر) نیاز دارد." - WebAim color contrast checker

در تصویر زیر چند نمونه از ترکیبات رنگ و سایز متن را می بینیم:

Contrast is based on color and size — این تصویر نشان می دهد که تضاد (Contrast) بر اساس ترکیب رنگ و سایز متن چگونه است.

2. هم پوشانی متن روی تصاویر پس زمینه

خوانایی متن هایی که با تصاویرهم پوشانی داشته باشند بسیار پایین است زیرا ممکن است قسمتی از تصویر یا کل تصویر در مقایسه با متن، تضاد (Contrast) کافی نداشته باشد.

Description of the image. — کافی نبودن تضاد (Contrast) متن با تصویر موجب خوانایی پایین متن شده است.

کاهش تیرگی(opacity) پس زمینه، تضاد (Contrast) و درنتیجه خوانایی متن را افزایش می دهد .

Description of the image. — تضاد (Contrast) مناسب متن با تصویر موجب خوانایی بالای متن شده است.

3. فیلترهای رنگ

تصویر سمت چپ فیلتر رنگ در وب سایت آمازون از دید یک فرد عادی است و تصویر سمت راست، فیلتر رنگ در وب سایت آمازون از فردی مبتلا به پروتونوپیا (کور رنگی قرمز-سبز) است. بدون متن توصیفی، تمایز بین بسیاری از گزینه های موجود برای افراد کوررنگ غیرممکن است.

Amazon color picker — استفاده از فیلتر رنگ بدون برچسب متنی برای شخص دارای کور رنگی پروتونوپیا غیرممکن است.

سایت Gap با اضافه کردن یک برچسب متنی در کنار هر رنگ، همانطور که در زیر نشان داده شده است، این مشکل را حل می کند:

Amazon color picker — استفاده از فیلتر رنگ دارای برچسب متنی برای شخص دارای کور رنگی پروتونوپیا آسان است.

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

4. عکس بدون توضیح مفید

تصویر زیر یک تی شرت که SuperDry برای فروش در وب سایت خود قرار داده است را نشان می دهد. این تی شرت با عنوان "Leaf Jaspe" توصیف می شود که برای کاربر مبهم است زیرا برگ ها می توانند در یک مجموعه رنگی ای قرار بگیرند (سبز، زرد، قهوه ای و غیره). بهتر این بود که برای افزایش دسترسی پذیری و کمک به افراد کوررنگ، رنگ محصول واضح تر توضیح داده میشد.

Description of the image. — برای افراد کور رنگ سخت است که بدانند این تی شرت SuperDry چه رنگی است.

5. تشخیص پیوند

تشخیص پیوندها باید بدون تکیه بر رنگ آسان باشد. تصویر زیر، وب سایت خدمات دیجیتال دولت انگلستان (GDS) را از دید یک کاربر دارای آکروماتوپسی نمایش می دهد. شخص دارای آکروماتوپسی، رنگ را نمی بیند. به سختی می توان بسیاری از پیوندها را مشاهده کرد. برای مثال، آیا شما متوجه شده اید که متن "GDS team, User research" (واقع در زیر عنوان) یک پیوند است؟

وبلاگ GDS از دید فردی که مبتلا به آکروماتوپسی است.

پیوندهای بالا با آیکون ها به راحتی قابل مشاهده هستند. یک ایده خوب این است که یک خط زیر به جمله مورد نظر اضافه کنید، دقیقاً همان کاری که GDS در متن مقالات خود انجام می دهد:

GDS — پیوندهای دارای خط زیر به راحتی توسط شخص مبتلا به آکروماتوپسی قابل مشاهده هستند.

6. ترکیب رنگ ها

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

قرمز /سبز
سبز / قهوه ای
آبی / بنفش
سبز/ آبی
سبز روشن / زرد
آبی/ خاکستری
سبز / خاکستری
سبز / سیاه

Colour combinations as seen with Protanopia — ترکیب رنگی که با پروتانوپیا دیده می شود.

7. Placeholders

استفاده از Placeholders بدون برچسب متنی مشکل ساز است زیرا متن Placeholders معمولاً فاقد تضاد (Contrast) کافی است. همانطور که در زیر نشان داده شده است، اپل در فرم ثبت نام خود این مشکل را دارد:

Apple registration form — در فرم ثبت نام اپل از یک Placeholders بدون برچسب متنی استفاده شده است.

افزایش تضاد (Contrast) توصیه نمی شود، زیرا تشخیص تفاوت متن Placeholders و ورودی کاربر کار سختی خواهد بود.

بهتر است از برچسب ها با تضاد (Contrast) کافی استفاده کنید، دقیقاً همان کاری که Made.com انجام می دهد همانطور که در زیر نشان داده شده است:

Labels — Made.com از برچسب هایی با تضاد (Contrast) مناسب استفاده می کند.

8. دکمه های اصلی

اغلب، برای نمایش دکمه های اصلی تنها از رنگ استفاده می کنند، وب سایت Argos این کار را در صفحه ورود به سیستم خود انجام داده است:

Argos login screen — صفحه ورود به سیستم Argos برای تأکید بر دکمه اصلی به رنگ متکی است.

در عوض، استفاده از سایز، محل قرارگیری، تضاد (Contrast)، حاشیه ها، آیکون ها و هر چیز دیگری را که به شما کمک می کند، در محدوده ی دستورالعمل های کسب و کار خود در نظر بگیرید. برای مثال، وب سایت Kidly از سایز، رنگ و آیکون برای نمایش دکمه های اصلی خود استفاده می کند:

Kidly Basket buttons — Kidly برای تأکید بر دکمه ی اصلی از سایز، رنگ و آیکون استفاده می کند.

9. پیام هشدار

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

Messaging with icons and text — پیام های هشدار دارای متن و آیکون.

10. بخش های مورد نیاز در یک فرم

متمایز کردن Placeholder های ضروری با رنگ، مشکل ساز است زیرا ممکن است برخی افراد نتوانند تفاوت رنگ ها را تشخیص دهند.

Messaging with icons and text — مشخص کردن قسمت های مورد نیاز بر اساس رنگ.

در عوض، می توانید موارد زیر را در طراحی فرم خود لحاظ کنید:

متمایز کردن Placeholder های ضروری با ستاره
افزودن متن "پر کردن این بخش ضروری است" به زیر هر بخش
حذف بخش های اختیاری در صورت امکان

11. نمودارها

رنگ، اغلب برای نشان دادن بخش های مختلف نمودار ها استفاده می شود. تصویر زیر نشان می دهد که افراد با دید های متفاوت چگونه یک نمودار را می بینند. نمودار مناسب برای افراد کور رنگ در سمت راست قرار دارد.

Graphs as seen with normal visions — نمودارهای مشاهده شده با دید طبیعی.

Graphs as seen with Protanopia — نمودارهای مشاهده شده با پروتانوپیا.

Graphs as seen with normal visions — نمودارهای مشاهده شده توسط فرد مبتلا به آکروماتوپسی.

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

12. بزرگنمایی

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

13. سایز فونت

مشابه نکته قبلی مرورگرها به منظور بهبود خوانایی، توانایی بهبود سایز متن را دارند. با این حال، وقتی سایز فونت در واحدهایی مانند پیکسل مشخص شود، برخی از مرورگرها این قابلیت را غیرفعال می کنند. استفاده از یک واحد سایز فونت نسبی مانند ems، به ما این اطمینان را می دهد که در مرورگر های مختلف، کاربران توانایی تغییر سایز فونت را خواهند داشت.

ابزار

ابزارهای زیادی برای کمک به شما در طراحی برای افراد کور رنگ وجود دارد:

وب سایت WebAim: کد Hex دو رنگ را وارد کنید تا ببینید آیا با دستورالعمل های دسترسی پذیری مطابقت دارند.
Color Oracle: یک شبیه ساز کوررنگی برای ویندوز ، مک و لینوکس است که به شما نشان می دهد افراد دارای اختلالات بینایی معمولا چه چیزی را می بینند.

نتیجه گیری

نکات موجود در این مقاله جامع و کامل نیستند و لزوماً در هر شرایطی قابل استفاده نیستند. با این حال، آنها اکثر مشکلات افراد کور رنگ هنگام استفاده از وب سایت ها را پوشش می دهند.

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

امیدواریم که این مقاله براتون مفید بوده باشد. نظرات شما، موجب دلگرمی ما خواهد بود.

افزایش دسترسی پذیری برای کاربران کوررنگ با بهبود تجربه کاربری