کنتراست رنگ تفاوت روشنایی متن و پس‌زمینه است. اگر این تفاوت کم باشد، نوشته در نور زیاد یا برای چشم خسته ناخوانا می‌شود. آزمایشگاه کنتراست قلموم نسبت دو رنگ را با معیار WCAG نشان می‌دهد تا قبل از تحویل طرح، خوانایی را با عدد بسنجی نه با حدس.
متن معمولی
برای بدنه و برچسب‌های کوچک، نسبت حداقل ۴٫۵ به ۱ معیار رایج WCAG برای سطح AA است.
متن درشت
تیتر درشت و متن بولد بزرگ با نسبت ۳ به ۱ هم اغلب قابل قبول است، چون شکل حرف از دور خوانده می‌شود.
جزء رابط
آیکون، مرز اینپوت و حالت فوکوس هم باید از پس‌زمینه جدا دیده شوند؛ رنگ برند به‌تنهایی این را تضمین نمی‌کند.
حداقل‌های کاربردی کنتراست
| عنصر | حداقل نسبت پیشنهادی | مثال |
|---|---|---|
| متن بدنه | ۴٫۵ به ۱ | پاراگراف روی کارت |
| تیتر درشت | ۳ به ۱ | عنوان بالای هیرو |
| متن روی دکمه | ۴٫۵ به ۱ | برچسب دکمه اصلی |
| جزء غیرفرمی | ۳ به ۱ | آیکون و مرز فیلد |
روش کار با آزمایشگاه کنتراست قلموم
- رنگ نوشته و رنگ سطح را همان‌طور که در طرح هستند وارد کن.
- نتیجه را برای اندازه واقعی متن بخوان، نه برای یک کلمه خیلی درشت.
- اگر نسبت کم بود، روشنایی را عوض کن؛ بالا بردن اشباع معمولاً خوانایی را حل نمی‌کند.
- جفت قبول‌شده را در پالت رنگی پروژه نگه دار تا در صفحه بعدی فراموش نشود.
- سنجش جفت رنگ متن و پس‌زمینه
- دیدن نسبت در کنار معیار خوانایی
- آزمایش جداگانه حالت روشن و تیره
- تصمیم بر اساس عدد، نه سلیقه لحظه‌ای
رنگی که روی سفید در قلموم خوب است، روی پس‌زمینه تیره ممکن است ضعیف شود. هر دو حالت را جدا چک کن.
کنتراست رنگ یک سلیقه تزئینی نیست؛ شرط خوانده شدن متن است.
قلموم
پرسش‌های متداول
کنتراست رنگ قلموم دقیقاً چه چیزی را حساب می‌کند؟
تفاوت روشنایی نسبی دو رنگ را. خروجی به تو می‌گوید آن جفت برای متن معمولی یا متن درشت به حد خوانایی می‌رسد یا نه.
چرا رنگ شلوغ و اشباع هنوز ناخواناست؟
چون چشم تفاوت روشنایی را می‌خواند، نه شدت رنگ را. آبی روشن روی سفید اشباع است ولی کنتراست کمی دارد.
بعد از قبول شدن نسبت چه کنم؟
همان جفت را در پالت رنگی و کیت برند ثبت کن تا در فایل‌های بعدی با یک خاکستری نزدیک عوض نشود.