ابزارهای رنگ

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

کنتراست رنگ متن روی پس‌زمینه را بسنجید و مطابقتش با استاندارد WCAG را ببینید.

نمونه متن بزرگ (تیتر)

این یک متن نمونه با اندازه‌ی معمول است، برای دیدن خوانایی رنگ متن روی رنگ پس‌زمینه.

این ابزار کاملاً داخل مرورگر شما اجرا می‌شود. هیچ فایل یا متنی به سرور ارسال نمی‌شود.

راهنمای استفاده

  1. رنگ متن و رنگ پس‌زمینه را مشخص کنید — یا از انتخاب‌گر رنگ استفاده کنید یا کد HEX را مستقیم بنویسید.
  2. نسبت کنتراست و پیش‌نمایش متن روی همان پس‌زمینه بلافاصله به‌روز می‌شود.
  3. زیر پیش‌نمایش می‌بینید این ترکیب برای هر چهار سطح استاندارد WCAG (AA و AAA، برای متن معمولی و متن بزرگ) قبول می‌شود یا رد.

نکته‌های این ابزار

«متن بزرگ» در استاندارد WCAG یعنی دست‌کم ۲۴ پیکسل (حدود ۱۸ پوینت) با وزن معمولی، یا دست‌کم ۱۹ پیکسل (حدود ۱۴ پوینت) با وزن بولد. تیترهای درشت معمولاً در این رده‌اند، ولی پاراگراف‌های معمولی نه.

نسبت کنتراست از ۱ به ۱ (بدون هیچ کنتراستی) تا ۲۱ به ۱ (سیاه کامل روی سفید کامل) در نوسان است و از روشنایی نسبی هر دو رنگ، طبق فرمول رسمی WCAG 2، حساب می‌شود.

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

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

کوررنگی مسئله‌ای جدا از کنتراست روشنایی است و این ابزار آن را بررسی نمی‌کند؛ دو رنگ می‌توانند کنتراست بالایی داشته باشند ولی برای فرد کوررنگ همچنان به‌سختی از هم تشخیص داده شوند.

پرسش‌های متداول

فرق سطح AA و AAA چیست؟
AA حداقل استانداردی است که اکثر قوانین و راهنماهای دسترس‌پذیری وب (از جمله محتوای دولتی و بیشتر شرکت‌ها) رعایتش را لازم می‌دانند. AAA یک پله بالاتر و سخت‌گیرانه‌تر است، برای وقتی‌که می‌خواهید متن برای طیف گسترده‌تری از کاربران کم‌بینا هم به‌راحتی خوانده شود.
«متن بزرگ» دقیقاً یعنی چه اندازه‌ای؟
طبق WCAG، متن بزرگ یعنی دست‌کم ۲۴ پیکسل با وزن معمولی (تقریباً ۱۸ پوینت)، یا دست‌کم ۱۹ پیکسل با وزن بولد (تقریباً ۱۴ پوینت بولد). تیترهای بزرگ معمولاً در این رده قرار می‌گیرند و آستانه‌ی کنتراست پایین‌تری برایشان کافی است، چون خواندن حروف درشت‌تر آسان‌تر است.
اگر پس‌زمینه‌ام یک عکس یا گرادیان است، چطور کنتراست را بسنجم؟
این ابزار فقط یک رنگ یک‌دست را می‌پذیرد. برای عکس یا گرادیان، رنگ همان نقطه‌ای از پس‌زمینه را که متن رویش قرار می‌گیرد و کم‌کنتراست‌ترین بخش آن است انتخاب کنید (مثلاً با ابزار قطره‌چکان مرورگر یا یک برنامه‌ی طراحی) و همان رنگ را در این ابزار بسنجید.
آیا این ابزار کوررنگی را هم بررسی می‌کند؟
نه. این ابزار فقط کنتراست روشنایی دو رنگ را طبق فرمول WCAG می‌سنجد. کوررنگی مسئله‌ای جداست — دو رنگ می‌توانند کنتراست بالایی داشته باشند ولی هنوز برای بعضی از انواع کوررنگی به‌سختی از هم تشخیص داده شوند، پس بهتر است علاوه بر رنگ، برای رساندن معنا به شکل و آیکون هم تکیه کنید.