کنتراست رنگ و دسترس‌پذیری: عدد درست چیست؟

کنتراست چیست؟

کنتراست، نسبت روشنایی دو رنگ است و از ۱ به ۱ (دو رنگ یکسان، کاملاً ناخوانا) تا ۲۱ به ۱ (سیاه روی سفید) تغییر می‌کند. استاندارد WCAG برای هر نوع محتوا حداقلی تعیین کرده است.

اغلب سایت‌ها هدفشان سطح AA است و برای اکثر مقررات و ممیزی‌ها همین کافی است.

چطور بسنجیم؟

1. در ابزار رنگ و گرادیانت به تب «کنتراست» بروید.
2. رنگ متن و رنگ پس‌زمینه را وارد کنید (HEX، rgb یا hsl).
3. نسبت و قبول یا رد بودن در چهار حالت را ببینید و در صورت لزوم رنگ را تیره‌تر یا روشن‌تر کنید.
4. برای یک صفحه‌ی واقعی، واکاوی سایت عنصرهای کم‌کنتراست را به‌همراه نسبت و رنگ‌ها فهرست می‌کند.

خطاهای رایج

• خاکستری کم‌رنگ روی سفید برای توضیحات و متن‌های «کم‌اهمیت». رایج‌ترین خطا است.
• متن‌های placeholder در فیلدها که خیلی روشن‌اند.
• متن روی تصویر بدون لایه‌ی تیره یا سایه‌ی پشت متن.
• دکمه‌ی رنگی با متن سفید که رنگ دکمه خیلی روشن است (مثلاً زرد یا سبز لیمویی).
• لینک‌های بدون زیرخط که فقط با رنگ از متن جدا شده‌اند و رنگشان کنتراست کافی با متن اطراف ندارد.
• حالت تیره (dark mode) که رنگ‌ها فقط وارونه شده‌اند و بررسی نشده‌اند.

فقط رنگ نباشد

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

نکته‌ی فونت فارسی

نسبت درست فقط یک شرط است. فونت‌های فارسی نازک (وزن ۱۰۰ تا ۳۰۰) در اندازه‌های کوچک حتی با کنتراست قابل‌قبول سخت خوانده می‌شوند؛ برای متن اصلی وزن متوسط (۴۰۰) و اندازه‌ی حداقل حدود ۱۶ پیکسل بهتر است.