ImageColorPicker.com

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

نسبت کنتراست بین رنگ‌های پیش‌زمینه و پس‌زمینه را برای اطمینان از دسترسی‌پذیری آزمایش کنید.

رنگ‌های خود را بررسی کنید

ترکیب‌های رنگی را آزمایش کنید تا اطمینان حاصل کنید که با استانداردهای دسترسی WCAG برای خوانایی متن مطابقت دارند.

5.72 به 1
کنتراست
AA
نتیجه متن
خوب

مقایسه شده: #FFFFFF روی #BB3344

متن

۱۶px، معمولی (400)

به‌عنوان متن معمولی حساب می‌شود.

  • AA (WCAG 1.4.3): حداقل 4.5:1

    قبول

  • AAA (WCAG 1.4.6): حداقل 7:1

    نیاز به 1.28 بیشتر است

    مردود

اجزای رابط کاربری و گرافیک

آیکون‌ها، حاشیه‌های ورودی، نشانگرهای فوکوس و سایر بخش‌هایی که برای استفاده از رابط باید دیده شوند.

  • AA (WCAG 1.4.11): حداقل 3:1

    قبول
5.72 به 1. متن: AA را می‌گذراند, AAA را رد می‌کند. اجزای رابط: قبول شد.
نحوه بررسی
رنگ‌های مقایسه‌شده (پس از ترکیب)
متن #FFFFFF روی پس‌زمینه #BB3344
روشنایی نسبی
متن 1.0000، پس‌زمینه 0.1334
فرمول
(L1 + 0.05) / (L2 + 0.05) که در آن L1 روشنایی رنگ روشن‌تر و L2 روشنایی رنگ تیره‌تر است.
نسبت دقیق
5.7221 به 1، نشان داده شده به صورت 5.72 به 1. مقدار نشان داده شده قطع شده است، گرد نمی‌شود، پس هرگز بهتر از واقعیت به نظر نمی‌رسد. مقدار دقیق چیزی است که با نیاز مقایسه می‌شود.

اندازه متن: ۱۶px, معمولی (400)

به‌عنوان متن معمولی حساب می‌شود. متن بزرگ حداقل 24px (18pt) است، یا حداقل 18.67px (14pt) وقتی پررنگ باشد (وزن 700 یا بیشتر). اندازه‌ها به‌صورت بریده نشان داده می‌شوند، گرد نمی‌شوند.

به‌عنوان متن معمولی حساب می‌شود. متن بزرگ حداقل 24px (18pt) است، یا حداقل 18.67px (14pt) وقتی پررنگ باشد (وزن 700 یا بیشتر). اندازه‌ها به‌صورت بریده نشان داده می‌شوند، گرد نمی‌شوند.

Aa
عنوان پیش‌نمایش

روباه قهوه‌ای سریع از روی سگ تنبل می‌پرد

مثال متن کوچک (۱۲px)

متن
#ffffff
پس‌زمینه
#bb3344

استانداردهای WCAG

سطح AA

حداقل نسبت کنتراست 4.5:1 برای متن معمولی و 3:1 برای متن بزرگ. برای اکثر وب‌سایت‌ها الزامی است.

سطح AAA

نسبت کنتراست بهبود یافته 7:1 برای متن معمولی و 4.5:1 برای متن بزرگ. برای دسترسی بهینه توصیه می‌شود.

بررسی‌کننده کنتراست رنگ

نسبت کنتراست رنگ متن و پس‌زمینه را محاسبه کنید.

با استفاده از انتخابگر رنگ برای متن و رنگ پس‌زمینه یک رنگ انتخاب کنید یا یک رنگ را در قالب هگزادسیمال RGB وارد کنید (مثلاً #259 یا #2596BE). می‌توانید با تنظیم اسلایدر رنگ را انتخاب کنید. دستورالعمل‌های دسترسی به محتوای وب (WCAG) یک راهنمای خاص برای کمک به تشخیص خوانایی متن برای کاربران بینا دارد. این معیار از یک الگوریتم خاص برای تبدیل ترکیب‌های رنگ به نسبت‌های قابل مقایسه استفاده می‌کند. با استفاده از این فرمول، WCAG بیان می‌کند که نسبت کنتراست رنگ 4.5:1 با متن و پس‌زمینه آن برای متن معمولی (بدنه) کافی است و متن بزرگ (18+ pt معمولی، یا 14+ pt بولد) باید حداقل نسبت کنتراست رنگ 3:1 داشته باشد.

ویژگی‌های کلیدی

  • محاسبه نسبت کنتراست به صورت لحظه‌ای
  • بررسی تطابق با WCAG AA و AAA
  • اسلایدرهای HSL برای تنظیم دقیق
  • پیش‌نمایش در قالب‌های مختلف

ابزارهای پیشرفته

  • اصلاح خودکار رنگ
  • نمونه‌های متن و پس‌زمینه
  • تشخیص نام رنگ
  • صادرات نتایج

سوالات متداول

برای انطباق با WCAG AA، متن عادی به حداقل نسبت کنتراست 4.5:1 نیاز دارد، در حالی که متن بزرگ (18pt یا 14pt بولد) به نسبت 3:1 نیاز دارد.

WCAG AAA نسبت‌های کنتراست بالاتری می‌خواهد: 7:1 برای متن عادی و 4.5:1 برای متن بزرگ، در مقابل 4.5:1 و 3:1 در AA.

از قابلیت اصلاح خودکار ما برای تنظیم رنگ متن یا پس‌زمینه استفاده کنید تا هدف طراحی‌تان حفظ شود، یا رنگ‌ها را به‌صورت دستی با اسلایدرهای HSL و نشانگرهای بصری که محدوده‌های مطلوب انطباق AA/AAA را نشان می‌دهند تنظیم کنید.

مناطق سبز و نشانگرهای AA/AAA محدوده‌های مطلوب برای رسیدن به انطباق WCAG را نشان می‌دهند. راهنماهای جهت (روشن‌تر/تیره‌تر) بر اساس ترکیب رنگ فعلی‌تان شما را به سمت کنتراست بهتر راهنمایی می‌کنند.

بله، می‌توانید هر کد هگز رنگ را وارد کنید یا با انتخابگر رنگ، رنگ دلخواه انتخاب کنید. نشانی وب (URL) به‌طور خودکار به‌روز می‌شود تا بتوانید ترکیب‌های رنگی خاص را به اشتراک بگذارید.