بررسی کنتراست رنگ
پیشنمایش زنده
این یک نمونه متن برای بررسی خوانایی در سایز استاندارد است. استانداردهای AA و AAA برای این سایز متفاوت هستند.
متن بزرگ (Large Text)
سرفصلها و تیترهای مهم صفحه
تحلیل تخصصی کنتراست
راهنمای جامع بررسی کنتراست رنگی (Contrast Checker)
کنتراست رنگی (Color Contrast) به تفاوت میزان روشنایی بین دو رنگ گفته میشود. این تفاوت مشخص میکند که یک رنگ روی پسزمینه دیگر چقدر خوانا است. کنتراست بالا = خوانایی بهتر، کنتراست پایین = خوانایی ضعیف.
نسبت کنتراست (Contrast Ratio) چیست؟
نسبت کنتراست یک عدد بین 1:1 تا 21:1 است که نشان میدهد دو رنگ چقدر با هم متفاوت هستند:
- • 21:1 ← بیشترین کنتراست (مثل سیاه روی سفید)
- • 7:1 ← کنتراست بسیار خوب (مناسب برای متون)
- • 4.5:1 ← حداقل کنتراست قابل قبول برای متن معمولی
- • 3:1 ← حداقل کنتراست برای متن بزرگ
- • 1:1 ← بدون کنتراست (هر دو رنگ یکسان)
L1 = روشنایی رنگ روشنتر، L2 = روشنایی رنگ تیرهتر
چرا کنتراست رنگی اهمیت دارد؟
۱. دسترسیپذیری (Accessibility)
حدود ۴.۵٪ مردان و ۰.۵٪ زنان جهان مبتلا به کوررنگی هستند (حدود ۳۰۰ میلیون نفر!). کنتراست بالا باعث میشود همه بتوانند محتوای شما را بخوانند.
۲. تجربه کاربری بهتر (UX)
خواندن متن با کنتراست پایین خستهکننده است. کاربران سریعتر از سایت شما خارج میشوند. کنتراست خوب = کاربران شادتر!
۳. الزامات قانونی و استانداردها
استاندارد WCAG (Web Content Accessibility Guidelines) الزام قانونی در بسیاری از کشورها است. وبسایتها باید حداقل سطح AA را رعایت کنند.
۴. تأثیر بر سئو (SEO)
گوگل دسترسیپذیری را در رتبهبندی سایتها در نظر میگیرد. سایتهای با accessibility خوب رتبه بهتری میگیرند.
🎨 مثال بصری: تفاوت کنتراست
❌ کنتراست بد
متن نامخوانا
نسبت: 1.5:1 (Fail)
⚠️ کنتراست متوسط
قابل خواندن اما نه ایدهآل
نسبت: 4.5:1 (AA Pass)
✅ کنتراست عالی
واضح و خوانا
نسبت: 21:1 (AAA Pass)
استفاده از ابزار بسیار ساده است! فقط رنگ متن و پسزمینه را انتخاب کنید و نتیجه کنتراست را فوراً ببینید.
انتخاب رنگ متن (Foreground)
دو روش برای انتخاب رنگ متن دارید:
- • Color Picker: روی مربع رنگی کلیک کنید و از پنجره Color Picker رنگ را انتخاب کنید
-
• کد دستی: کد رنگ (HEX) را در کادر
متنی تایپ کنید، مثل
#000000
انتخاب رنگ پسزمینه (Background)
به همان روش، رنگ پسزمینه را انتخاب کنید:
- • از Color Picker یا تایپ کد HEX استفاده کنید
- • رنگ پسزمینه معمولاً روشن است (سفید، خاکستری روشن، پاستلی)
- • میتوانید از دکمه "جابجایی رنگها" (🔄) برای swap کردن متن و پسزمینه استفاده کنید
مشاهده نتایج و پیشنمایش
ابزار بهصورت خودکار محاسبه میکند و نتایج زیر را نمایش میدهد:
- • نسبت کنتراست: عدد دقیق (مثل 21:1 یا 4.5:1)
- • رتبه کنتراست: از "ضعیف" تا "عالی"
- • Pass/Fail WCAG: آیا استانداردهای AA و AAA را رعایت میکند؟
- • پیشنمایش زنده: نمونه متن معمولی و بزرگ با رنگهای انتخابی
دریافت پیشنهادات (در صورت نیاز)
اگر کنتراست شما استانداردها را رعایت نکند، ابزار رنگهای جایگزین پیشنهاد میدهد:
- • رنگهای پیشنهادی با همان رنگ اصلی اما روشنتر یا تیرهتر
- • میتوانید روی هر پیشنهاد کلیک کنید تا بهطور خودکار اعمال شود
- • همه پیشنهادات حداقل AA را رعایت میکنند
کپی رنگها و نتایج
با دکمههای زیر میتوانید اطلاعات را کپی کنید:
- • کپی رنگها: هر دو رنگ را به فرمت HEX کپی میکند
- • کپی نسبت کنتراست: عدد نسبت کنتراست را کپی میکند
- • مناسب برای استفاده در CSS، Figma، Adobe XD و...
نکات سریع
- ✓ دکمه Reset همهچیز را به حالت پیشفرض برمیگرداند (سیاه روی سفید)
- ✓ دکمه Swap رنگ متن و پسزمینه را جابجا میکند
- ✓ محاسبات بهصورت Real-Time انجام میشود - بلافاصله نتیجه میبینید!
- ✓ ابزار بر اساس فرمول WCAG 2.1 است (آخرین استاندارد)
📝 مثال عملی
سناریو: میخواهید رنگ دکمه سایت خود را انتخاب کنید.
-
1. رنگ متن دکمه را سفید قرار دهید:
#FFFFFF -
2. رنگ پسزمینه دکمه را آبی روشن قرار دهید:
#3B82F6 - 3. نتیجه: نسبت کنتراست 4.6:1 (AA Pass ✅)
- 4. این ترکیب رنگ برای دکمه مناسب است!
WCAG (Web Content Accessibility Guidelines) مجموعهای از استانداردهای بینالمللی است که توسط W3C منتشر شده و هدف آن دسترسیپذیری وب برای همه افراد، از جمله افراد دارای معلولیت است.
سه سطح WCAG
حداقل سطح دسترسیپذیری. اگر این را رعایت نکنید، بسیاری از کاربران نمیتوانند محتوا را ببینند. کنتراستی خاصی برای سطح A تعریف نشده است.
حداقل نسبت کنتراست:
- • متن معمولی (کمتر از 18pt): 4.5:1
- • متن بزرگ (18pt+ یا 14pt bold): 3:1
⭐ این سطح در بیشتر کشورها الزام قانونی است و برای اکثر وبسایتها کافی است.
حداقل نسبت کنتراست:
- • متن معمولی (کمتر از 18pt): 7:1
- • متن بزرگ (18pt+ یا 14pt bold): 4.5:1
🏆 بالاترین سطح دسترسیپذیری. مناسب برای سایتهای دولتی، آموزشی و پزشکی.
| نوع متن | سطح AA | سطح AAA |
|---|---|---|
| متن معمولی (Normal Text) | 4.5:1 | 7:1 |
|
متن بزرگ (Large Text) 18pt+ یا 14pt bold+ |
3:1 | 4.5:1 |
متن بزرگ (Large Text) دقیقاً چیست؟
طبق تعریف WCAG، متن بزرگ شامل این موارد است:
-
• فونت معمولی با سایز 18pt یا بیشتر
(حدود
24pxدر CSS) -
• فونت Bold با سایز
14pt یا بیشتر (حدود
19px) - • هدرها (H1, H2) معمولاً در این دسته قرار میگیرند
⚠️ موارد استثنا (کنتراست الزامی نیست)
- • لوگو و برند: لوگوها نیازی به رعایت کنتراست ندارند
- • متن در تصاویر تزئینی: اگر متن صرفاً تزئینی است (محتوای مهمی ندارد)
- • متن غیرفعال: دکمههای Disabled یا محتوای غیرقابل دسترس
- • عکسها: محتوای متنی درون عکسها (اما Alt Text باید داشته باشد)
🤔 کدام سطح WCAG را باید انتخاب کنیم؟
💡 توصیه ما: حداقل AA را رعایت کنید، اما سعی کنید به AAA نزدیک شوید!
بررسی کنتراست رنگی یک ابزار ضروری برای طراحان، توسعهدهندگان و بازاریابان دیجیتال است. در صنایع مختلف کاربردهای گستردهای دارد.
طراحی UI/UX
- ✓ Design System: تست کنتراست رنگهای برند قبل از تعریف در Style Guide
- ✓ Figma/Adobe XD: اطمینان از خوانایی دکمهها، فرمها و متنها
- ✓ تم تاریک/روشن: بررسی کنتراست در هر دو حالت Dark Mode و Light Mode
- ✓ Accessibility Testing: قبل از تحویل طراح به توسعهدهنده، تست کنتراست
- ✓ رنگهای State: تست کنتراست برای Hover, Active, Disabled states
توسعه وب و فرانتاند
-
✓ CSS Variables: تست کنتراست رنگهای
متغیر در CSS
--text-color / --bg-color - ✓ Component Libraries: بررسی کنتراست برای Bootstrap, Tailwind, Material-UI
- ✓ Error Messages: اطمینان از خوانایی پیامهای خطا و موفقیت
- ✓ Theme Switching: تست خودکار کنتراست هنگام تغییر تم
- ✓ Automated Testing: استفاده از API برای تست خودکار در CI/CD
طراحی گرافیک و برندینگ
- ✓ لوگو و هویت بصری: تست خوانایی لوگو روی پسزمینههای مختلف
- ✓ بروشور و کاتالوگ: اطمینان از خوانایی متن چاپی
- ✓ پوستر و بنر: تست کنتراست برای تبلیغات چاپی و دیجیتال
- ✓ کارت ویزیت: بررسی خوانایی اطلاعات روی کارت
- ✓ Social Media: تست کنتراست برای پستهای اینستاگرام، لینکدین، توییتر
بازاریابی و تبلیغات
- ✓ لندینگ پیج: بهینهسازی CTA (دکمههای فراخوان) برای نرخ تبدیل بالاتر
- ✓ ایمیل مارکتینگ: تست خوانایی متن و دکمهها در ایمیلها
- ✓ تبلیغات Google/Facebook: اطمینان از خوانایی تبلیغات
- ✓ A/B Testing: مقایسه کنتراست برای بهبود Conversion Rate
- ✓ Instagram Stories: تست خوانایی متن روی تصاویر
فروشگاههای آنلاین (E-commerce)
- ✓ دکمه "افزودن به سبد": اطمینان از دیده شدن اصلیترین دکمه
- ✓ قیمت محصولات: کنتراست بالا برای نمایش قیمت
- ✓ پیامهای موجودی: خوانایی پیامهای "موجود"، "ناموجود"، "تخفیف"
- ✓ فرم تسویه حساب: تست کنتراست برای بهبود User Experience
- ✓ Badge ها: نشانهای "تخفیف ۵۰٪"، "ارسال رایگان" با کنتراست بالا
پلتفرمهای آموزشی
- ✓ LMS (سیستمهای آموزش): اطمینان از خوانایی محتوای دورهها
- ✓ ویدیوهای آموزشی: تست کنتراست Subtitle و Text Overlay
- ✓ اسلاید پاورپوینت: بررسی خوانایی متن روی پسزمینه
- ✓ آزمونهای آنلاین: اطمینان از خوانایی سؤالات و گزینهها
- ✓ پلتفرمهای MOOC: دسترسیپذیری برای دانشجویان با مشکلات بینایی
سایتهای دولتی و سازمانی
- ✓ الزامات قانونی: رعایت WCAG برای سایتهای دولتی الزامی است
- ✓ دسترسی عمومی: همه شهروندان باید بتوانند محتوا را بخوانند
- ✓ فرمهای آنلاین: خوانایی فرمهای ثبتنام، درخواست، شکایت
- ✓ اطلاعیهها: تست کنتراست برای اطلاعیههای مهم و اورژانسی
- ✓ سطح AAA: بسیاری از سایتهای دولتی باید AAA را رعایت کنند
🌟 مثالهای واقعی استفاده
قبل از انتشار در App Store/Google Play، بررسی کنتراست تمام صفحات
خوانایی موجودی حساب، دکمه انتقال وجه، پیامهای تراکنش
نوبتدهی آنلاین، نمایش نتایج آزمایش، هشدارهای دارویی
خوانایی قیمت، مشخصات پرواز، دکمه "رزرو نهایی"
آیا باید همه رنگهای سایت من AA یا AAA باشند؟
خیر، فقط متنهای اصلی و عناصر تعاملی (دکمهها، لینکها، فرمها) باید استانداردها را رعایت کنند. لوگو، تصاویر تزئینی و عناصر Disabled نیازی به کنتراست خاصی ندارند. اما همه متنهای قابل خواندن باید حداقل AA باشند.
چرا سیاه خالص (#000000) روی سفید خالص (#FFFFFF) بهترین است؟
چون این ترکیب بیشترین نسبت کنتراست ممکن را دارد:
21:1. این به معنای حداکثر خوانایی برای
همه کاربران، از جمله افراد مسن یا کمبینا است. با این حال،
برخی معتقدند سیاه کامل ممکن است خیلی "تند" باشد و ترجیح
میدهند از خاکستری بسیار تیره استفاده کنند (مثل
#1a1a1a).
رنگ برند من کنتراست کافی ندارد. چه کار کنم؟
چند راهحل دارید:
- • Shade تیرهتر: از نسخه تیرهتر رنگ برند برای متن استفاده کنید
- • Border یا Shadow: حاشیه یا سایه اضافه کنید
- • پسزمینه متفاوت: رنگ برند را فقط برای Accent استفاده کنید، نه متن اصلی
- • Overlay: برای متن روی رنگ برند، یک لایه شفاف اضافه کنید
آیا Dark Mode هم باید کنتراست بالایی داشته باشد؟
بله، حتماً! در Dark Mode، کنتراست معمولاً
معکوس میشود: متن روشن روی پسزمینه تیره. اما همچنان باید
حداقل 4.5:1 برای متن معمولی باشد. نکته: در Dark Mode از
سفید خالص استفاده نکنید (خیلی تند است) - بهتر است از
خاکستری روشن مثل
#E0E0E0
استفاده کنید.
آیا کنتراست برای تصاویر و ویدیوها هم مهم است؟
تصاویر خود نیازی به کنتراست ندارند، اما متن روی تصویر حتماً باید کنتراست کافی داشته باشد. برای ویدیوها، Subtitle ها باید خوانا باشند (معمولاً سفید روی پسزمینه سیاه نیمهشفاف). همچنین، تمام تصاویر باید Alt Text داشته باشند تا Screen Reader ها بتوانند آنها را بخوانند.
کنتراست 4.5:1 چقدر تفاوت با 4.4:1 دارد؟
تفاوت خیلی کم است و برای چشم معمولاً قابل تشخیص نیست! اما استاندارد WCAG یک خط قرمز دارد: 4.5:1 برای AA. پس اگر نسبت شما 4.4:1 است، رسماً Fail میشوید حتی اگر عملاً خوانا باشد. بنابراین بهتر است همیشه کمی بالاتر از حد مجاز باشید (مثلاً 5:1 به جای 4.5:1) تا حاشیه امنیت داشته باشید.
آیا میتوانم از Gradient برای متن استفاده کنم؟
میتوانید، اما باید دقت کنید! کنتراست باید در تمام نقاط Gradient کافی باشد. اگر Gradient از آبی روشن به آبی تیره میرود، کنتراست با متن سفید ممکن است در بخش روشن کافی نباشد. بهترین راه این است که از Gradient برای هدرها یا عناصر تزئینی استفاده کنید، نه برای متن معمولی. یا از Shadow/Outline کمک بگیرید.