۱. نسبت کنتراست چیست؟
نسبت کنتراست (Contrast Ratio) اختلاف میزان روشنایی بین دو رنگ (معمولاً متن و پسزمینه) را نشان میدهد. این نسبت مشخص میکند که آیا کاربران میتوانند متن و عناصر رابط کاربری را بهراحتی ببینند و بخوانند یا خیر.
عدد نسبت کنتراست معمولاً بهصورت X:1 بیان میشود (مثلاً ۴.۵:۱).
- ۱:۱ یعنی هیچ تفاوتی بین دو رنگ وجود ندارد (کاملاً همرنگ هستند).
- ۲۱:۱ یعنی حداکثر تفاوت ممکن (مثل مشکی خالص روی سفید خالص).
۲. چرا کنتراست اهمیت دارد؟
- خوانایی متن: متن کمکنتراست باعث خستگی چشم و کاهش تعامل کاربر میشود.
- دسترسپذیری: رعایت کنتراست کافی، وبسایت و اپلیکیشن شما را برای کاربران با اختلال بینایی، کمبینایی یا کوررنگی قابل استفاده میکند.
- سودمندی تجاری: طراحی خوانا و قابلدسترسی باعث کاهش نرخ پرش (Bounce Rate) و افزایش نرخ تبدیل (Conversion Rate) میشود.
۳. استانداردهای WCAG برای نسبت کنتراست
کنسرسیوم W3C در دستورالعمل WCAG (Web Content Accessibility Guidelines) حداقل نسبت کنتراست را مشخص کرده است:
| نوع محتوا | سطح AA (حداقل) | سطح AAA (پیشرفته) |
|---|---|---|
| متن معمول (کمتر از 18pt یا 14pt بولد) | ۴.۵:۱ | ۷:۱ |
| متن بزرگ (18pt یا 14pt بولد و بیشتر) | ۳:۱ | ۴.۵:۱ |
| عناصر رابط و گرافیکها | ۳:۱ | — |
نکته: سطح AA برای اغلب پروژهها کافی است، ولی برای پروژههای دولتی یا حوزه سلامت، سطح AAA توصیه میشود.
۴. چگونه نسبت کنتراست را محاسبه کنیم؟
محاسبه دستی پیچیده است، چون نیاز به فرمول روشنایی نسبی (Relative Luminance) دارد، اما ابزارهای آنلاین این کار را ساده کردهاند.
فرمول کلی به شکل زیر است:
scssCopyEdit( L1 + 0.05 ) ÷ ( L2 + 0.05 )
- L1: روشنایی نسبی رنگ روشنتر
- L2: روشنایی نسبی رنگ تیرهتر
۵. ابزارهای رایگان بررسی کنتراست
- WebAIM Contrast Checker — وارد کردن کدهای HEX و مشاهده نسبت
- Contrast Ratio by Lea Verou — بررسی سریع با کشیدن و رها کردن رنگها
- Coolors Accessibility Tool — بررسی همزمان چند جفت رنگ
- پلاگین Figma: Stark — بررسی مستقیم کنتراست در طراحی UI
- Adobe Color Contrast Checker — همراه با پیشنهاد اصلاح رنگ
۶. نکات کاربردی برای طراحان UI
- پسزمینههای روشن + متن تیره: معمولاً خواناترین ترکیب هستند.
- پسزمینه تیره + متن روشن: برای تم تاریک، دقت کنید رنگ متن کمی اشباع داشته باشد تا خستهکننده نشود.
- اجتناب از تکیه بر رنگ تنها: برای عناصر مهم علاوه بر رنگ از آیکون، شکل یا زیرخط استفاده کنید.
- بررسی حالتهای Hover/Active/Disabled: ممکن است رنگ دکمه در حالت Hover کنتراست مناسب را از دست بدهد.
- تست در شرایط واقعی: کنتراست را روی نمایشگرهای مختلف و زیر نورهای متفاوت بررسی کنید.
۷. مثالهای درست و نادرست
درست:
- پسزمینه #FFFFFF (سفید) + متن #۰۰۰۰۰۰ (مشکی) — نسبت ۲۱:۱ (بسیار خوانا)
- پسزمینه #F7F8FA + متن #1E1E1E — نسبت ۱۵.۳:۱
نادرست:
- پسزمینه #F5F5F5 + متن #B3B3B3 — نسبت ۲.۲:۱ (نامناسب برای متن معمول)
- پسزمینه #۲۲۲۲۲۲ + متن #۵۵۵۵۵۵ — نسبت ۱.۵:۱ (تقریباً ناخوانا)
۸. چکلیست سریع بررسی کنتراست
- نسبت کنتراست متن معمول ≥ ۴.۵:۱
- نسبت کنتراست متن بزرگ ≥ ۳:۱
- دکمهها و لینکها حتی در حالت Hover کنتراست کافی دارند
- پسزمینهها و متنها در تم روشن و تاریک بررسی شدهاند
- برای رنگهای مشکلدار (مثلاً سبز/قرمز در کوررنگی) جایگزین بصری وجود دارد
جمعبندی
نسبت کنتراست یک اصل کلیدی در طراحی رابط کاربری است که مستقیماً روی تجربه کاربر، دسترسپذیری و حتی موفقیت تجاری پروژه اثر میگذارد. با رعایت استانداردهای WCAG، استفاده از ابزارهای بررسی و توجه به شرایط واقعی استفاده، میتوانید اطمینان پیدا کنید که طراحی شما برای همه کاربران — بدون استثنا — خوانا و کارآمد خواهد بود.