روش‌های بهبود طراحی وب‌سایت با استفاده از ابزارهای دسترسی‌پذیری

 آیا می‌دانستید بیش از ۴ درصد مردم دنیا دارای کوررنگی هستند؟ انواع کوررنگی و دیگر اختلالات بینایی می‌تواند روی خوانایی و کاربردپذیری وب‌سایت شما تأثیر بگذارد.

پس باید طراحی سایت خود را به‌گونه‌ای انجام دهید که به‌راحتی در دسترس تمام کاربران قرار گیرد، فارغ از اینکه رنگ‌های محیط پیرامون خود را چگونه می‌بینند.

دسترسی‌پذیری (Accessibility) چیست؟

تست‌های دسترسی‌پذیری و استانداردهای بسیاری برای طراحی وب‌سایت وجود دارند که به ما کمک می‌کنند به طرزی طراحی خود را انجام دهیم که تمام کاربران به‌راحتی بتوانند آن را ببینند و درک کنند.

در دسترسی‌پذیری سایت به تمام نکات مهم از جمله موارد سمعی، جهت‌یابی و بازخورد سایت، ویژگی‌های متون و رنگ‌ها رسیدگی می‌شود.

مقاله مرتبط: راهنمای طراحان برای ایجاد قابلیت دسترسی

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

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

استانداردها و دستورالعمل‌های دسترسی‌پذیری وب‌سایت

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

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

مقاله مرتبط: برترین روش‌های استفاده از رنگ ها در طراحی وب

نکات مهم برای بهبود دسترسی‌پذیری رنگ وب‌سایت:

• کنتراست مناسبی را بین رنگ‌های پس‌زمینه و پیش‌زمینه در نظر بگیرید، این مورد روی عناصری که به یکدیگر مرتبط هستند اعمال می‌شود.
• از رنگ یا عنصر دیگری برای انتقال اطلاعات استفاده کنید.
• مطمئن شوید که عناصر تعاملی و جهت‌یابی وب‌سایت، قابل‌شناسایی هستند. تنها ایجاد تغییر رنگ جزئی در حالت hover عناصر کافی نیست.
• برای برچسب فرم‌ها رنگی را انتخاب کنید که متن آن‌ها خوانا باشد؛ این امر را به متن خطا و بازخوردها نیز اختصاص دهید.
• نسبت کنتراست متن‌ها و عناصر تعاملی باید حداقل ۴.۵ تا ۱ باشد.

۱۰ ابزار دسترسی‌پذیری رنگ

تاکنون ابزارهای بسیاری به‌منظور بررسی کنتراست و ترکیب رنگ‌ها برای ایجاد یک پالت دسترس‌پذیر، طراحی شده‌اند. در ادامه با برخی از این ابزارهای پرکاربرد آشنا می‌شویم:

WebAIM Color Contrast Checker

ابزار WebAIM Color Contrast Checker میزان کنتراست بین پس‌زمینه و پیش‌زمینه را در محدوده‌ی ۴.۵:۱ یا بیشتر بررسی می‌کند.

مقاله مرتبط: ١٢ وب سایت کاربردی برای انتخاب رنگ بندی مناسب

Colorable

Colorable کنتراست بکار رفته در میزان روشنایی به‌منظور قابل تشخیص بودن رنگ‌ها را بررسی می‌کند. این ابزار از رنگ‌هایی بیش از رنگ پایه استفاده می‌کند اما همچنان روشنایی و عناصر موجود در اطراف را مورد توجه قرار می‌دهد.

Color Safe

ابزار color safe به شما کمک می‌کند تا پالت رنگ دسترسی‌پذیری را طبق دستورالعمل‌های WCAG ایجاد کنید. با استفاده از این پالت‌های پیشنهادی، مطمئن خواهید شد که رنگ پس‌زمینه و نسبت کنتراست مناسبی را برای خوانا بودن محتوای سایت خود انتخاب کرده‌اید.

Web Accessibility Guidelines

Web Accessibility Guidelines ابزاری برای رنگ کنتراست است که رنگ‌های مختلفی را روی پس‌زمینه‌های متفاوت نشان می‌دهد و به این طریق، میزان خوانایی محتوا مشخص خواهد شد. از این ابزار برای ایجاد رنگ و کنتراست مناسب بین متن و پس‌زمینه استفاده کنید به طرزی که محتواهایتان واضح و قابل درک باشند.

Stark

stark یکی از پلاگین‌های Adobe XD و Sketch است که هم‌زمان با طراحی‌های خود می‌توانید میزان دسترسی‌پذیری آن را نیز بررسی کنید، کنتراست را تست کنید، شرایط کوررنگی را شبیه‌سازی کرده یا حتی برای انتخاب رنگ بهتر از پیشنهادهای این پلاگین استفاده نمایید.

Colors for All

این ابزار، جدول تصویری شطرنجی بزرگی است که میزان ترکیب رنگ‌ها را طبق استاندارد WCAG نشان می‌دهد.

Color Blind Web Page Filter

در ابزار آنلاین color blind web page filter می‌توانید آدرس وب‌سایت خود را وارد کرده و فیلتر مد نظر خود را انتخاب کنید. با کلیک بر روی دکمه «Fetch and Filter»، رنگ‌های اصلی سایتتان را با رنگ‌هایی از دید افراد با اختلالات بینایی مقایسه می‌کند. این ابزار در تشخیص رنگ‌های مناسب به شما کمک بسیاری خواهد کرد.

Color Review

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

Colors

ابزار colors شامل ۹۰ ترکیب از هر یک جفت رنگ برای طراحی سایتی در دسترس می‌شود. هر یک از این ترکیب‌ها دارای یک راهنما برای اندازه و نسبت رنگ‌ها می‌شود که طبق خواسته‌ی خود و میزان عملکرد بهتر، گزینه مناسب را انتخاب می‌کنید. در اینجا می‌توانید یک پالت رنگ دسترسی‌پذیر را نیز بیابید.

Contrast Grid

Contrast Grid این امکان را به شما می‌دهد تا ترکیب پیش‌زمینه و پس‌زمینه را منطبق با حداقل کنتراست استاندارد WCAG تست کنید. رنگ دلخواه خود را می‌توانید برای ایجاد جدول رنگی مختص طراحی خود نیز ایجاد کنید.

در مبحث طراحی وب‌سایت، دسترسی‌پذیری یکی از موارد بسیار مهم است. حتی اگر خود شما از بینایی قوی برخوردار باشید باید به طراحی خود از دید یک فرد با اختلالات بینایی مشاهده کنید. این موضوع مهم را باید در تمام پروژه‌های طراحی وب‌سایتتان مد نظر قرار دهید.