راهنمای جامع سنجش کنتراست رنگ بر اساس استاندارد WCAG
دسترسیپذیری وب یکی از ارکان اصلی توسعه و طراحی مدرن است که امکان استفاده از محتوای دیجیتال را برای همه کاربران فراهم میسازد. ابزار بررسیکننده کنتراست به طراحان، توسعهدهندگان و تیمهای تولید محتوا کمک میکند تا میزان خوانایی ترکیبهای رنگی خود را بر اساس استانداردهای بینالمللی بسنجند. این ابزار با محاسبه دقیق نسبت کنتراست بین رنگ متن و رنگ پسزمینه، مشخص میکند که آیا ترکیب انتخابی شما معیارهای پذیرش نسخههای WCAG 2.1 / 2.2 را برآورده میسازد یا خیر.
در این ابزار، مقدار اولیه رنگ متن برابر با #4f46e5 و رنگ پسزمینه برابر با #ffffff تنظیم شده است که نسبت کنتراست ۶.۲۹ را ارائه میدهد. شما میتوانید با تغییر این مقادیر، وضعیت انطباق رنگهای خود را در سطوح مختلف دسترسیپذیری ارزیابی کنید.
فرمتهای ورودی و نحوه پردازش اطلاعات
برای استفاده از این ابزار، کافی است دو مقدار رنگی را به عنوان ورودی مشخص کنید:
- رنگ متن: مقدار رنگی مورد نظر برای نوشتهها.
- رنگ پسزمینه: مقدار رنگی صفحهای که متن روی آن قرار میگیرد.
این ابزار از فرمتهای استاندارد رنگی زیر پشتیبانی میکند:
- کدهای هگزادسیمال (مانند
#1a1a1a) - مقادیر RGB (مانند
rgb(26, 26, 26)) - مقادیر HSL
در صورتی که فرمت وارد شده نامعتبر باشد، ابزار با نمایش پیامهای خطا به شما هشدار میدهد. اگر رنگ متن نامعتبر باشد، پیام «یک رنگ متن معتبر مانند #1a1a1a یا rgb(26, 26, 26) وارد کنید.» نمایش داده میشود. در صورت نامعتبر بودن رنگ پسزمینه نیز پیام «یک رنگ پسزمینه معتبر مانند #ffffff یا rgb(255, 255, 255) وارد کنید.» به نمایش در میآید.
همچنین دکمه جابهجایی به شما امکان میدهد تا با کلیک بر روی آن، جای رنگ متن و پسزمینه را با یکدیگر عوض کنید. از نظر حریم خصوصی، تمام بررسیها در مرورگر شما انجام میشوند. هیچیک از اطلاعات وارد شده در BroBroGo آپلود نخواهد شد.
درک نسبت کنتراست و بازه محاسباتی
نسبت کنتراست عددی است که تفاوت درخشندگی بین دو رنگ را نشان میدهد. این نسبت در یک بازه مشخص تعریف میشود:
- حداقل کنتراست (1:1): زمانی رخ میدهد که دو رنگ کاملاً همسان باشند (مثلاً متن سفید روی پسزمینه سفید) که در این حالت هیچ خوانایی وجود ندارد.
- حداکثر کنتراست (21:1): بالاترین حد تباین که مربوط به قرارگیری رنگ مشکی خالص روی پسزمینه سفید خالص است.
محاسبات این ابزار بر پایه فرمول استاندارد WCAG 2.1 / 2.2 انجام میشود که مبنای قانونی ارزیابیهای دسترسیپذیری وب در سراسر جهان است.
معیارهای قبولی در سطوح AA و AAA
استاندارد دسترسیپذیری محتوای وب (WCAG) سطوح مختلفی از انطباق را برای انواع محتوای متنی تعریف کرده است. این ابزار وضعیت قبولی یا رد شدن ترکیب رنگی شما را در سه بخش مجزا بررسی میکند:
۱. متن معمولی
این بخش مربوط به متنهای استاندارد و بدنه اصلی صفحات است.
- سطح AA: به حداقل نسبت کنتراست ۴.۵:۱ نیاز دارد.
- سطح AAA: به حداقل نسبت کنتراست ۷:۱ نیاز دارد.
۲. متن بزرگ
متنهای بزرگتر به دلیل ضخامت و ابعاد بیشتر، در نسبتهای کنتراست پایینتر نیز خوانایی خود را حفظ میکنند. متن بزرگ طبق استاندارد به صورت زیر تعریف میشود:
- متنهای با اندازه ۱۸ پوینت (حدود ۲۴ پیکسل) به بالا.
- متنهای با اندازه ۱۴ پوینت (حدود ۱۸.۵ پیکسل) به بالا در صورتی که ضخیم (bold) باشند.
معیارهای پذیرش برای این دسته عبارتند از:
- سطح AA: به حداقل نسبت کنتراست ۳:۱ نیاز دارد.
- سطح AAA: به حداقل نسبت کنتراست ۴.۵:۱ نیاز دارد.
۳. رابط کاربری و گرافیک
این بخش وضعیت دسترسیپذیری عناصر غیرمتنی مانند مرز کادرها، دکمهها، آیکونها و نمودارها را میسنجد. برخلاف بخشهای متنی، این ردیف فاقد تفکیک بین سطوح AA و AAA است و تنها با یک آستانه سنجیده میشود:
- قبولی در این بخش مستلزم کسب حداقل نسبت کنتراست ۳:۱ است.
خلاصه وضعیت و نتایج نهایی (Verdict)
پس از تحلیل رنگهای ورودی، ابزار یکی از پیامهای خلاصه زیر را بر اساس بالاترین سطح انطباق کسبشده نمایش میدهد:
| وضعیت کنتراست رنگها | پیام خلاصه خروجی ابزار |
|---|---|
| کسب حداقل نسبت ۷:۱ برای متن معمولی | «سطوح AA و AAA را برای متن معمولی پاس میکند.» |
| کسب حداقل نسبت ۴.۵:۱ برای متن معمولی | «سطح AA را برای متن معمولی پاس میکند.» |
| کسب حداقل نسبت ۳:۱ (فقط برای متنهای بزرگ) | «فقط سطح AA را برای متن بزرگ پاس میکند.» |
| عدم کسب حداقل نسبتهای استاندارد | «کمتر از حداقل سطح AA — کنتراست را افزایش دهید.» |
پرسشهای متداول
نتایج AA و AAA به چه معنا هستند؟
سطح AA هدفی است که اکثر سایتها برای آن تلاش میکنند: این سطح به حداقل نسبت ۴.۵:۱ برای متن معمولی و ۳:۱ برای متن بزرگ نیاز دارد. سطح AAA سختگیرانهتر است — نسبت ۷:۱ برای متن معمولی و ۴.۵:۱ برای متن بزرگ. این نسبت از ۱:۱ (بدون کنتراست) تا ۲۱:۱ (سیاه روی سفید) متغیر است.
چه چیزی به عنوان متن بزرگ محسوب میشود؟
متنهای با اندازه ۱۸ پوینت (حدود ۲۴ پیکسل) به بالا، یا ۱۴ پوینت (حدود ۱۸.۵ پیکسل) در صورتی که ضخیم (bold) باشند. متنهای بزرگتر در کنتراستهای پایینتر نیز خوانا میمانند، بنابراین به جای آستانههای سختگیرانه متن معمولی، در نسبت ۳:۱ استاندارد AA و در نسبت ۴.۵:1 استاندارد AAA را پاس میکنند.
چه فرمتهای رنگی را میتوانم وارد کنم؟
میتوانید یک مقدار هگز مانند #1a1a1a، یک مقدار rgb() مانند rgb(26, 26, 26) یا یک مقدار hsl() وارد کنید — یا روی پالت کلیک کنید تا رنگ مورد نظر را انتخاب نمایید. دکمه جابهجایی (swap) به شما امکان میدهد رنگ متن و پسزمینه را با هم عوض کنید.
آیا این ابزار از WCAG 2 استفاده میکند یا متد جدیدتر APCA؟
این ابزار از فرمول WCAG 2.1 / 2.2 استفاده میکند که در حال حاضر مبنای قوانین و ارزیابیهای دسترسیپذیری وب است. روش APCA متد جدیدتری مبتنی بر درک بصری است که برای WCAG 3 در حال تدوین است — این روش آیندهدار است اما هنوز به عنوان استاندارد رسمی انطباق پذیرفته نشده است، به همین دلیل نتایج قبولی در اینجا بر اساس آن محاسبه نمیشوند.