این ابزار درست کار نمی‌کند؟

دربارهٔ ابزار «بررسی کنتراست WCAG آنلاین»

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

انطباق با WCAG به طور فزاینده یک الزام قانونی است: سایت‌های دولتی، پلتفرم‌های آموزشی، ابزارهای بخش عمومی، و بسیاری از سایت‌های تجاری در اروپا و آمریکای شمالی باید حداقل با WCAG 2.1 AA مطابقت داشته باشند. کنتراست ضعیف رایج‌ترین مشکل دسترسی‌پذیری گزارش‌شده است.

هنگام انتخاب رنگ‌های متن در طول طراحی، حسابرسی یک سایت موجود برای مسائل دسترسی‌پذیری، یا یافتن سایه‌های جایگزین که بدون تغییر زیاد طراحی کلی به AAA می‌رسند، استفاده کنید.

چطور از این ابزار استفاده کنم؟

چطور کنتراست رنگ WCAG را بررسی کنم؟

  1. رنگ پیش‌زمینه

    «Foreground» رنگ متن یا آیکون شما به‌صورت hex است (#RGB یا #RRGGBB). `#` ابتدا اختیاری و case-insensitive است.

  2. رنگ پس‌زمینه

    «Background» سطح پشت foreground است — پس‌زمینهٔ صفحه، پر شدن دکمه و … . همان فرمت‌های hex پذیرفته می‌شوند. هر دو فیلد به‌صورت کنار هم به‌عنوان جفت نمایش داده می‌شوند.

  3. «اجرا» را بزنید

    خروجی شامل contrastRatio (مثل 4.56) و wcagNormalText و wcagLargeText با باندهای pass/fail است. متن معمولی به ≥ 4.5 (AA) / 7 (AAA) نیاز دارد؛ متن بزرگ به ≥ 3 (AA) / 4.5 (AAA).

  4. خواندن سطوح

    AA معمول‌ترین الزام قانونی/استانداردی است؛ AAA سخت‌گیرتر و معمولاً برای body copy غیرواقعی است. متن بزرگ یعنی +۱۸pt regular یا +۱۴pt bold؛ زیر آن، نتیجه را به‌عنوان کنتراست متن معمولی در نظر بگیرید.