بررسی‌کننده تضاد WCAG — AA/AAA آنلاین _

بررسی تضاد WCAG از چند مرحله ساده عبور می‌کند. هیچ چیز مرورگر شما را ترک نمی‌کند.

1. شما یک رنگ پیش‌زمینه و یک رنگ پس‌زمینه وارد می‌کنید. ابزار hex، rgb()، hsl() یا رنگ‌های نام‌گذاری‌شده CSS را به مقادیر کانال‌های قرمز، سبز و آبی تجزیه می‌کند.
2. هر کانال RGB با استفاده از تابع تبدیل sRGB خطی‌سازی می‌شود. این مقادیر نمایش کدگذاری‌شده با گاما را به شدت نور خطی تبدیل می‌کند.
3. مقادیر خطی بر اساس حساسیت چشم انسان به هر کانال وزن‌دهی می‌شوند — 0.2126 برای قرمز، 0.7152 برای سبز، 0.0722 برای آبی. مجموع، روشنایی نسبی رنگ است.
4. نسبت تضاد (L1 + 0.05) ÷ (L2 + 0.05) است، که در آن L1 روشنایی رنگ روشن‌تر و L2 روشنایی رنگ تیره‌تر است. 0.05 اضافی فرمول را برای سیاه خالص معتبر نگه می‌دارد.
5. نسبت با آستانه‌های WCAG مقایسه می‌شود: متن عادی AA حداقل به 4.5:1، متن بزرگ AA به 3:1، متن عادی AAA به 7:1 و متن بزرگ AAA به 4.5:1 نیاز دارد. متن بزرگ به معنای حداقل 18pt یا 14pt ضخیم است.

FAQ

سؤالات رایج درباره بررسی تضاد WCAG.

تفاوت بین AA و AAA چیست؟

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

منظور از "متن بزرگ" در WCAG چیست؟

WCAG 2.x متن بزرگ را حداقل 18 پوینت (24px) برای وزن معمولی، یا 14 پوینت (حدود 19px) برای وزن ضخیم تعریف می‌کند. نمادها و آیکون‌هایی که بخشی از یک فونت هستند از همان آستانه‌ها پیروی می‌کنند. اگر مطمئن نیستید کدام آستانه برای UI شما اعمال می‌شود، هر دو را بررسی کنید — AA Large آستانه پایین‌تری دارد (3:1)، بنابراین بیشتر جفت‌رنگ‌هایی که در AA Normal رد می‌شوند در واقع AA Large را وقتی متن به اندازه کافی بزرگ است پاس می‌کنند.

چرا جفت رنگ من AA Large را قبول می‌کند اما AA Normal را رد می‌کند؟

زیرا AA Large فقط به نسبت 3:1 نیاز دارد در حالی که AA Normal به 4.5:1 نیاز دارد. WCAG آستانه پایین‌تری برای متن بزرگ تعیین می‌کند زیرا حروف بزرگ‌تر حتی با تضاد کمتر خواندنشان آسان‌تر است. یک جفت رنگی که مثلاً 4.0:1 امتیاز می‌گیرد AA Large (آستانه 3:1) را قبول می‌کند اما AA Normal (آستانه 4.5:1) را رد می‌کند. این با رنگ‌های برند روشن که به عنوان پیش‌زمینه روی پس‌زمینه سفید استفاده می‌شوند بسیار رایج است.

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

این ابزار یک چیز را بررسی می‌کند — نسبت تضاد WCAG 2.x بین دو رنگ ثابت. دسترسی واقعی موارد بیشتری را شامل می‌شود: نشانگرهای فوکوس، اندازه و وزن فونت، رنگ به عنوان تنها راه انتقال اطلاعات، و سازگاری با صفحه‌خوان‌ها و ابزارهای بزرگ‌نمایی. از این بررسی تضاد در کنار سایر روش‌های ممیزی برای تصویر کاملی از دسترس‌پذیری برنامه خود استفاده کنید.

چه فرمت‌های رنگی را ورودی می‌پذیرد؟

می‌توانید کدهای hex 3، 4، 6 یا 8 رقمی (با یا بدون #)، مقادیر rgb() و rgba() در نحو کاما قدیمی یا نحو جداشده با فاصله مدرن، hsl() و hsla() با هر واحد hue استاندارد (deg، rad، grad، turn)، hsv()، hwb()، و هر یک از 150 رنگ نام‌گذاری‌شده CSS از مشخصات CSS Color Module Level 4 را الصاق کنید. رنگ کاملاً روی دستگاه شما تجزیه می‌شود.