طراحی در دسترس؛ کنتراست و خوانایی برای همهٔ مخاطبان

طراحی در دسترس یعنی چه

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

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

کنتراست چطور سنجیده می‌شود

کنتراست، نسبتِ روشناییِ متن و پس‌زمینه است و عددِ استانداردِ جهانی برای آن تعریف شده؛ قاعدهٔ عملی که باید حفظ کنید:

• متنِ اصلی: حداقل نسبتِ ۴.۵ به یک؛ برای متن‌های ریز و بلند.

• متنِ بزرگ (تیتر و اعدادِ بزرگ): حداقل ۳ به یک.

• اجزای تعاملی (دکمه، آیکون): حداقل ۳ به یک با پس‌زمینه؛ اجزایی که کاربر باید ببیند و بفهمد قابلِ کلیک است.

• ابزارهای رایگانِ سنجشِ کنتراست، عدد را با یک کلیک می‌دهند؛ عدد را ببینید، حدس نزنید.

قواعد عملی کنتراست

• خاکستریِ کم‌رنگ روی سفید، شایع‌ترین خطای خوانایی است؛ متنِ بدنه را هرگز به قیمتِ «حسِ مینیمال» کم‌رنگ نکنید.

• رنگِ پس‌زمینه را در حالتِ واقعی بسنجید: نورِ آفتاب و مانیتورِ ضعیف، کنتراستِ صفحه را پایین می‌آورد؛ طراحی باید در بدترین حالتِ دیدن، خوب کار کند نه بهترین.

• برای رنگ‌آمیزیِ متمایز، از انتخاب پالت رنگ برای پروژه‌های دیجیتال کمک بگیرید اما اجازه ندهید زیباییِ پالت، بر خوانایی غلبه کند.

• به رنگِ تنها اکتفا نکنید: پیام‌ها و حالت‌ها را با آیکون و متن هم بگویید؛ برای کسی که رنگ‌ها را نمی‌بیند، «دکمهٔ قرمز» معنایی ندارد.

فراتر از رنگ

دسترس‌پذیری فقط رنگ نیست:

• اندازهٔ متن: متنِ بدنه را از حدی کوچک‌تر نکنید؛ خوانندهٔ شما در شرایطِ خستگی، نه در شرایطِ آزمایشگاه است.

• طول خط: خطوطِ خیلی بلند، چشم را خسته می‌کند؛ در تایپوگرافی فارسی برای وب حدودِ درستِ طولِ خط و ارتفاعِ خط آمده است.

• فاصلهٔ هدف‌های لمسی: دکمه‌های چسبیده به هم، در موبایل خطای کاربر را چند برابر می‌کند.

بررسی پیش از انتشار

• چک‌لیستِ ساده: متنِ بدنه با کنتراستِ کافی، تیترها خوانا، پیام‌ها فقط با رنگ نمی‌گویند، دکمه‌ها فاصلهٔ دارند.

• صفحه را از فاصلهٔ یک متری ببینید؛ اگر پیامِ اصلی در یک ثانیه خوانده نمی‌شود، جای چیزی اشتباه است.

• برای محتوای تصویری، همین قواعد را روی کاورها اعمال کنید؛ در طراحی کاور مقاله و پست با ابزارهای رایگان کنتراستِ متن روی تصویر، نقطهٔ شُکافِ رایج است.

طراحی در دسترس، مهربانیِ اختیاری نیست؛ انضباطِ حرفه‌ای است. مخاطبی که متن شما را می‌خواند، از فیلترِ کنتراستِ شما عبور کرده است؛ ساده‌ترین احترام، خوانا بودن همان متن است.