متن عادی · AA
معیار ۱.۴.۳ — حداقل برای پاراگراف و لیبل
آزمایشگاه دسترسی‌پذیری
کنتراست‌چکر دسترسی‌پذیری
نسبت کنتراست WCAG بین رنگ متن و پس‌زمینه را می‌سنجد تا UI برای افراد بیشتری خوانا بماند.
HEX پیش‌زمینه و پس‌زمینه را بگذارید، نسبت و وضعیت قبولی را ببینید و در صورت نیاز شبیه‌ساز کوررنگی را باز کنید.
پیشنمایش زنده
عنوان باید در یک نگاه خوانده شود
متن بدنه باید بدون فشار چشم خوانده شود. اگر خاکستری خیلی روشن است، کاربر کم‌بینا آن را از دست می‌دهد.
نسبت کنتراست
0.00:1
رنگ متن
رنگ پس‌زمینه
کد HEX معتبر نیست
نتیجه تست WCAG 2.2
متن عادی · AAA
معیار ۱.۴.۶ — سطح بالاتر برای متن طولانی
متن بزرگ · AA
تیتر ۱۸pt یا ۱۴pt ضخیم و بالاتر
متن بزرگ · AAA
سطح بالاتر برای تیتر و متن درشت
اجزای UI · AA
معیار ۱.۴.۱۱ — مرز دکمه، آیکون و فوکوس
پیشنهاد برای رسیدن به AA
نزدیکترین رنگ که نسبت ۴.۵:۱ را برای متن عادی پاس می‌کند.
این جفت رنگ متن عادی را در سطح AA پاس می‌کند.
جفت‌های آزمایشی
جفت‌های برند Nova و نمونه‌های آموزشی قبول / رد.
چطور تست را بخوانیم
متن عادی · AA
متن بدنه، لیبل فرم و لینک باید حداقل ۴.۵:۱ داشته باشند. ۷:۱ سطح AAA است و برای پاراگراف‌های طولانی امن‌تر است.
متن بزرگ · AA
متن بزرگ یعنی حداقل ۲۴px معمولی یا حدود ۱۹px ضخیم. برای این متن‌ها آستانه AA برابر ۳:۱ است.
اجزای UI · AA
آیکون بدون متن، مرز کنترل و نشان فوکوس باید حداقل ۳:۱ نسبت به پس‌زمینه مجاور داشته باشند — حتی اگر داخل‌شان متن نباشد.
بیشتر بدان
چرا این ابزار به کارت می‌آید
کنتراست چکر آنلاین Nova Lab کمک می‌کند قبل از انتشار UI بفهمید متن و پس‌زمینه واقعاً خوانا هستند یا فقط روی مانیتور شما خوب به‌نظر می‌رسند. نسبت کنتراست را با معیارهای WCAG 2.2 برای متن معمولی، متن بزرگ و اجزای رابط بسنجید.
چطور شروع کنی
-
رنگ متن و پس‌زمینه را بگذار
HEX را وارد کن یا از presetهای آماده استفاده کن.
-
نسبت و سطح WCAG را ببین
موفق/ناموفق بودن برای متن معمولی، متن بزرگ و اجزای UI را چک کن.
-
در صورت نیاز اصلاح کن
رنگ را عوض کن تا به آستانهٔ ۴.۵:۱ یا ۳:۱ برسی، بعد در پالت اصلی اعمال کن.
چی گیرت می‌آید
- معیارهای WCAG 2.2
- پیشنمایش زنده متن و UI
- presetهای سریع برای شروع
- لینک به شبیه‌ساز کوررنگی و مولد پالت
کجاها می‌درخشد
طراحی رابط دسترسی‌پذیر
دکمه، لینک و متن بدنه را قبل از handoff تست کنید.
ممیزی پالت برند
ببینید کدام جفت‌رنگ برند برای متن مناسب نیست.
تکالیف و کیس‌استادی UX
نتیجهٔ WCAG را در گزارش دسترسی‌پذیری بیاورید.
سوالات پرتکرار
حداقل کنتراست قابل‌قبول چقدر است؟
برای متن معمولی معمولاً ۴.۵:۱ (AA) و برای متن بزرگ ۳:۱؛ سطح AAA سخت‌گیرانه‌تر است.
آیا این ابزار جایگزین تست واقعی کاربر است؟
خیر؛ نقطهٔ شروع فنی است. برای محصول واقعی، تست با کاربران متنوع را هم انجام دهید.
چرا کنتراست خوب روی گوشی ضعیف دیده می‌شود؟
نور محیط، روشنایی صفحه و رندر فونت اثر دارند؛ همیشه روی دستگاه واقعی هم چک کنید.
آیا کنتراست چکر Nova Lab رایگان است؟
بله. تست کنتراست رنگ و پیشنمایش UI بدون ثبتنام در مرورگر در دسترس است.