بررسی کنتراست رنگ

کنتراست رنگ چیست و چرا مهم است؟

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

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

حداقل کنتراست طبق WCAG

سطح AA استاندارد معمول برای بیشتر سایت‌هاست و در قوانین دسترس‌پذیری بسیاری از کشورها الزامی است. سطح AAA برای متن‌های طولانی و سایت‌هایی با مخاطب خاص توصیه می‌شود.

چطور کنتراست رنگ را درست کنم؟

• رنگ متن را تیره‌تر یا روشن‌تر کن: بیشتر وقت‌ها چند درصد تغییر در روشنایی کافی است و هویت رنگ حفظ می‌شود. این ابزار نزدیک‌ترین رنگ قبول‌شده را پیشنهاد می‌دهد.
• برای رنگ برند روی دکمه: اگر رنگ برند روشن است (مثل زرد یا سبز فسفری)، متن دکمه را تیره بگذار، نه سفید.
• حالت تاریک را جدا بسنج: رنگی که در تم روشن قبول است، ممکن است در تم تاریک رد شود.
• متن روی عکس: یک لایه‌ی تیره‌ی نیمه‌شفاف یا گرادیان زیر متن بگذار و کنتراست را با تیره‌ترین و روشن‌ترین نقطه‌ی عکس بسنج.
• placeholder فیلدها را فراموش نکن: placeholder خاکستری کم‌رنگ یکی از رایج‌ترین خطاهای کنتراست در Lighthouse است.

کنتراست در فرایند طراحی تا کد

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

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