Contrast و خوانایی متن

کنتراست و خوانایی متن؛ عددهایی که نباید نادیده گرفت

تو درس قبل دیدیم که نشانگر فوکوس باید کنتراست کافی داشته باشه. اما کنتراست فقط مال outline نیست؛ مهم‌ترین و پرکاربردترین جاش، خود متن صفحه‌ست. یه طراحی که از نظر بصری شیک به نظر می‌رسه (مثلاً متن خاکستری کم‌رنگ رو پس‌زمینه‌ی سفید) ممکنه برای بخش بزرگی از کاربرها عملاً غیرقابل‌خوندن باشه. تو این درس با معیارهای دقیق کنتراست و ابزارهایی که CSS در اختیارمون می‌ذاره آشنا می‌شیم.

نسبت کنتراست دقیقاً چیه؟

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

حداقل‌های WCAG برای متن

نکته‌ی جالب اینه که متن بزرگ‌تر، استاندارد سبک‌تری داره؛ چون حروف بزرگ‌تر، حتی با کنتراست کمتر، همچنان قابل‌تشخیصن. اکثر پروژه‌ها هدفشون سطح AA هست؛ AAA برای محتوایی که واقعاً باید برای همه (از جمله کاربرهای با کم‌بینایی شدید) در دسترس باشه به کار می‌ره.

مشکل کلاسیک: متن خاکستری روی سفید

یکی از رایج‌ترین اشتباهات طراحی مدرن، استفاده از خاکستری خیلی روشن برای متن ثانویه‌ست، چون «ظاهر مینیمال» به نظر می‌رسه:

/* مشکل‌دار: نسبت کنتراست حدود 2.5 به 1 */
.text-secondary {
  color: #aaaaaa;
  background: white;
}

/* بهتر: نسبت کنتراست حدود 4.6 به 1 */
.text-secondary {
  color: #767676;
  background: white;
}

عدد #767676 رو تصادفی ننوشتیم؛ این تقریباً روشن‌ترین خاکستریه که هنوز رو پس‌زمینه‌ی سفید، حداقل استاندارد AA رو رد می‌کنه. هر خاکستری روشن‌تر از این، احتمالاً از این آستانه پایین‌تر میاد.

چطور نسبت کنتراست رو چک کنیم؟

محاسبه‌ی دستی این فرمول عملاً کاری نیست که هر بار انجامش بدید؛ به‌جاش از ابزارهای آماده استفاده می‌کنید: DevTools مرورگر (وقتی رو یه رنگ متن hover می‌کنید، نسبت کنتراست رو مستقیم نشون می‌ده)، یا وب‌سایت‌های مخصوص چک کردن کنتراست. نکته‌ی مهم اینه که این چک باید بخشی عادی از فرآیند طراحی باشه، نه یه قدم اختیاری که فقط تو ممیزی نهایی بهش می‌رسید.

کنتراست فقط مال رنگ متن و پس‌زمینه‌ی مستقیم نیست

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

.hero-title {
  color: white;
  /* بدون هیچ کمکی، اگه پشت این متن تصویر روشن باشه، غیرقابل‌خوندن می‌شه */
}

راه‌حل رایج، اضافه کردن یه لایه‌ی نیمه‌شفاف تیره بین متن و تصویر است تا کنتراست تضمین بشه، صرف‌نظر از این‌که خود تصویر چه رنگی‌هایی داره:

.hero {
  position: relative;
  background-image: url("photo.jpg");
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.hero-title {
  position: relative;
  color: white;
}

کنتراست تو حالت‌های مختلف رنگی (dark mode)

اگه سایتتون حالت تاریک هم داره، باید کنتراست رو جداگانه برای هر دو حالت چک کنید؛ چون یه ترکیب رنگی که تو حالت روشن کنتراست خوبی داره، ممکنه تو حالت تاریک اصلاً کار نکنه:

:root {
  --text-secondary: #767676; /* AA رو پس‌زمینه‌ی سفید رد می‌کنه */
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-secondary: #a8a8a8; /* باید جدا برای پس‌زمینه‌ی تیره چک بشه */
  }
}

سایز فونت و خوانایی: فراتر از فقط کنتراست رنگ

کنتراست تنها فاکتور خوانایی نیست. سایز فونت خیلی کوچیک (مثلاً زیر ۱۶px برای متن اصلی بدنه) هم می‌تونه خوانایی رو کاملاً خراب کنه، حتی با کنتراست عالی. یه قاعده‌ی رایج (نه یه قانون سفت‌وسخت WCAG، ولی یه best practice پذیرفته‌شده) اینه که متن اصلی بدنه رو کمتر از 16px نذارید:

body {
  font-size: 16px;
  line-height: 1.5;
}

line-height هم به همون اندازه مهمه؛ متنی با فاصله‌ی خط خیلی فشرده (مثلاً line-height: 1)، حتی با فونت و رنگ خوب، خوندنش برای خیلی‌ها خسته‌کننده می‌شه.

اشتباه رایج: تست کردن کنتراست فقط رو مانیتور خود توسعه‌دهنده

یه اشتباه رایج اینه که رنگ‌ها فقط رو یه مانیتور با کالیبراسیون خوب و تو یه اتاق با نور کنترل‌شده چک بشن. نتیجه‌ی نهایی ممکنه رو مانیتورهای ارزون‌تر یا شرایط نوری متفاوت، خیلی بدتر از چیزی باشه که توسعه‌دهنده دیده. به همین دلیل، تکیه به عدد دقیق نسبت کنتراست (نه فقط «چشمی خوب به‌نظر می‌رسه») همیشه قابل‌اعتمادتره.

جمع‌بندی

نسبت کنتراست یه معیار دقیق و قابل‌اندازه‌گیریه، نه یه حس سلیقه‌ای؛ حداقل ۴.۵ به ۱ برای متن معمولی و ۳ به ۱ برای متن بزرگ (سطح AA) رو همیشه رعایت کنید. وقتی متن رو تصویر قرار می‌گیره، از یه overlay تیره برای تضمین کنتراست استفاده کنید. کنتراست رو جدا برای حالت روشن و تاریک چک کنید، و یادتون باشه سایز فونت و line-height هم به‌اندازه‌ی رنگ، تو خوانایی نهایی نقش دارن.