نحوه استفاده
- رنگ متن (پیش‌زمینه) و رنگ پس‌زمینه را به‌صورت HEX، rgb()، hsl() یا قالب CSS دیگری وارد کنید یا از انتخاب‌گرها استفاده کنید.
- نسبت کنتراست و نتیجه قبولی یا رد را برای هر الزام WCAG بخوانید.
- اگر الزامی رد شد، هدفی را انتخاب کنید و رنگ پیشنهادی را اعمال کنید؛ این رنگ فام را حفظ می‌کند و فقط روشنایی را تغییر می‌دهد.
- برای بررسی ترکیب معکوس، مثلاً متن روشن روی دکمه تیره، از «جابه‌جایی» استفاده کنید.
نحوه کار
نسبت کنتراست بر اساس تعریف WCAG 2.2 محاسبه می‌شود: درخشندگی نسبی هر رنگ از کانال‌های sRGB آن به دست می‌آید و نسبت برابر است با (رنگ روشن‌تر + 0.05) ÷ (رنگ تیره‌تر + 0.05). این نسبت از 1:1 (رنگ‌های یکسان) تا 21:1 (متن سیاه روی سفید) متغیر است.
شرایط بررسی‌شده: معیار موفقیت 1.4.3 (AA) برای متن عادی به نسبت 4.5:1 و برای متن بزرگ به 3:1 نیاز دارد؛ 1.4.6 (AAA) به 7:1 و 4.5:1 نیاز دارد؛ 1.4.11 برای اجزای رابط کاربری و گرافیک‌های معنادار مانند حاشیه ورودی‌ها و آیکون‌ها به 3:1 نیاز دارد. متن بزرگ یعنی حداقل 24px معمولی یا حدود 18.66px ضخیم. WCAG گرد کردن به بالا را مجاز نمی‌داند؛ بنابراین 4.49:1 با وجود نزدیکی، AA را نمی‌گذراند؛ نسبت نمایش‌داده‌شده در اینجا برش خورده است، نه گردشده.
پیشنهاد این ابزار، فام و خلوص رنگ متن را در OKLCH حفظ می‌کند و نزدیک‌ترین روشنایی (تیره‌تر یا روشن‌تر) را که هدف را برآورده کند جست‌وجو می‌کند. نسبت کنتراست تنها یکی از عوامل خوانایی است: ضخامت فونت، اندازه و تفاوت‌های دید رنگی هم اهمیت دارند و WCAG 2.2 توصیه‌نامه فعلی W3C است که بیشتر قوانین دسترس‌پذیری به آن استناد می‌کنند.
نمونه‌ها
متن خاکستری که تقریباً قبول می‌شود
#777777 روی سفید نسبت 4.48:1 می‌دهد. این مقدار برای متن بزرگ و اجزای رابط کاربری قبول است اما برای متن عادی، AA را نمی‌گذراند. نزدیک‌ترین خاکستری قبول‌شونده حدود #767676 است که به 4.54:1 می‌رسد.
متن سفید روی دکمه برند
رنگ سفید روی #ff8800 نسبت حدود 2.4:1 می‌دهد که حتی سطح 3:1 متن بزرگ را هم نمی‌گذراند. تیره‌کردن نارنجی یا استفاده از متن تیره راه‌حل‌های معمول هستند؛ پیشنهاد ابزار نشان می‌دهد رنگ متن چقدر باید تیره باشد.
بررسی حاشیه فیلد فرم
حاشیه خاکستری روشن #cccccc روی سفید حدود 1.6:1 است. بر اساس معیار 1.4.11، حاشیه‌ای که یک ورودی را مشخص می‌کند به نسبت 3:1 نیاز دارد؛ بنابراین چیزی حدود #949494 یا تیره‌تر لازم است.
پرسش‌های متداول
برای WCAG AA به چه نسبت کنتراستی نیاز دارم؟
برای متن عادی بدنه 4.5:1، برای متن بزرگ (24px یا 18.66px ضخیم) 3:1 و برای اجزای رابط کاربری و گرافیک‌های معنادار 3:1. سطح AAA متن را به 7:1 و متن بزرگ را به 4.5:1 می‌رساند.
آیا متن لوگو یا متن دکمه غیرفعال باید این معیارها را برآورده کند؟
خیر. WCAG متن موجود در لوگوها و نام‌های تجاری، متن صرفاً تزئینی و متن اجزای غیرفعال (disabled) رابط کاربری را معاف می‌کند.
چرا نتیجهٔ من کمی با ابزار بررسی دیگر متفاوت است؟
بعضی ابزارها نسبت را به یک رقم اعشار گرد می‌کنند یا به بالا گرد می‌کنند. WCAG مقدار دقیق را مقایسه می‌کند، بنابراین این ابزار نسبت را تا دو رقم اعشار برش می‌زند. تفاوت‌های جزئی ممکن است از رنگ‌های واردشده با شفافیت (alpha) هم ناشی شود.
روش کنتراست جدید APCA چطور؟
APCA روشی متفاوت است که برای نسخهٔ آیندهٔ WCAG پیشنهاد شده است. APCA بخشی از WCAG 2.2 نیست؛ این ابزار بر پایهٔ WCAG 2.2 اندازه‌گیری می‌کند و قوانین دسترس‌پذیری فعلی نیز به آن ارجاع می‌دهند.
حریم خصوصی
رنگ‌ها در مرورگر شما بررسی می‌شوند. چیزی بارگذاری یا ذخیره نمی‌شود.