‏رنگ به‌تنهایی «قابل‌دسترس» نیست

نویسنده این پست می‌گه وقتی حرف از «رنگ قابل‌دسترس» می‌زنیم، معمولا منظورمون تطابق با استاندارد WCAG هست، و اون‌جا هم بحث اصلی روی کنتراسته. طبق این استاندارد، متن معمولی باید حداقل کنتراست ۴.۵ به ۱ با پس‌زمینه‌ش داشته باشه؛ برای متن بزرگ (۲۴ پیکسل به بالا، یا ۱۹ پیکسل بولد) و کامپوننت‌های رابط کاربری هم این عدد به ۳ به ۱ کاهش پیدا می‌کنه. برای اندازه‌گیریش هم ابزار کم نیست: افزونه‌های فیگما، ابزار توسعه‌دهنده‌ی مرورگر، افزونه‌های VS Code و ده‌ها سایت آنلاین.

نکته‌ی اصلی اینه که کنتراست یه ویژگی متعلق به یه رنگ تنها نیست، بلکه رابطه‌ی بین دو رنگه. برای مثال زرد لوگوی مک‌دونالد روی پس‌زمینه‌ی سفید فقط حدود ۱.۵ به ۱ کنتراست داره؛ خیلی پایین‌تر از حد استاندارد. ولی همین زرد روی یه پس‌زمینه‌ی تیره می‌تونه کاملا قابل‌قبول باشه. یعنی نمی‌شه گفت اون زرد ذاتا «بد» یا «غیرقابل‌دسترسه»، فقط یه ترکیب خاصش مشکل داره.

نویسنده پیشنهاد می‌ده به‌جای دنبال کردن یه رنگ ایده‌آل، تیمای برندینگ و طراحی یه پالت از ترکیب‌های رنگی از پیش تایید شده بسازن: اگه کنتراست یه ترکیب کمتر از ۳ به ۱ هست، استفاده‌ش رو خیلی محدود کنن؛ بین ۳ و ۴.۵ به ۱ فقط برای متن بزرگ و کامپوننت‌های UI مناسبه؛ و اگه یه ترکیب نزدیک به حد نصابه (مثلا ۲.۹)، بهتره یکی از دو رنگ رو کمی تغییر بدن تا برسه به یه عدد امن‌تر مثل ۳.۸.

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

نکات کلیدی:

• کنتراست رابطه‌ی بین دو رنگه، نه ویژگی یه رنگ تنها
• متن معمولی تو WCAG به کنتراست حداقل ۴.۵ به ۱ نیاز داره
• متن بزرگ (۲۴px+) و کامپوننتای UI با ۳ به ۱ هم قبول می‌شن
• زرد لوگوی مک‌دونالد روی سفید فقط حدود ۱.۵ به ۱ کنتراست داره
• راه‌حل پیشنهادی: ساخت یه پالت از پیش تایید شده از ترکیبای رنگی، نه دنبال کردن یه «رنگ درست»