بررسی کنتراست رنگ WCAG رایگان
بررسی کنید آیا دو رنگ استانداردهای کنتراست AA و AAA در WCAG برای دسترس‌پذیری را برآورده میکنند. پیش‌نمایش زنده در چند اندازه متن با پیشنهادات خودکار وقتی کنتراست کافی نیست.
متن عنوان بزرگ
متن اصلی متوسط (18px) برای خواندن و محتوا.
متن اصلی عادی (16px) برای پاراگراف‌ها.
متن اصلی کوچک (14px) برای کپشن و متادیتا.
نسبت کنتراست
نیاز به 4.5:1 دارد · نسبت شما ۱۴٫۶۳:1 است
نیاز به 3.0:1 دارد · نسبت شما ۱۴٫۶۳:1 است
نیاز به 7.0:1 دارد · نسبت شما ۱۴٫۶۳:1 است
نیاز به 4.5:1 دارد · نسبت شما ۱۴٫۶۳:1 است
نیاز به 3.0:1 دارد · نسبت شما ۱۴٫۶۳:1 است
پیش‌تنظیم‌های سریع
بر اساس دستورالعمل‌های کنتراست WCAG 2.1. متن بزرگ = 18pt (24px) عادی یا 14pt (18.66px) بولد. کدهای HEX در هر دو جهت به‌روزرسانی می‌شوند: HEX تایپ کنید یا رنگ انتخاب کنید، هر دو ورودی هم‌زمان می‌مانند.
کاربردهای رایج
- صفحات وب را برای انطباق WCAG بررسی کنیدتأیید کنید که رنگ های متن وب سایت شما با استانداردهای کنتراست WCAG AA یا AAA برای دسترسی مطابقت دارند.
- ترکیب رنگ برند را تأیید کنیدترکیب های پالت رنگی برند خود را تست کنید تا اطمینان حاصل کنید برای طراحی رابط کاربری قابل دسترسی کار می کنند.
- پالت های رنگی حالت تاریک را تست کنیدمتن روشن در پس زمینه تاریک می تواند همچنان در کنتراست ناکام شود - ترکیب های پالت حالت تاریک خود را در اینجا بررسی کنید.
- ترکیب رنگ برای مواد چاپیپوسترها، علائم و مواد چاپی نیز به کنتراست قابل خواندن نیاز دارند - به خصوص برای خوانندگان بزرگتر.
- طراحی رنگ های دکمه قابل دسترسیمطمئن شوید که CTA ها، دکمه های عملی و پیوندها در برابر WCAG با پس زمینه خود عبور کنند.
نحوه کار
بررسی کنتراست کاملاً در مرورگر شما با استفاده از الگوریتم روشنایی نسبی WCAG 2.1 اجرا میشود — بدون کتابخانه، بدون سرور، فقط ریاضی دست‌نویس که دقیقاً از استاندارد پیروی میکند. هر نتیجه در زمان واقعی هنگام تایپ یا انتخاب رنگ به‌روز میشود.
- 1ورودی هگزادسیمال و نرمالسازیهم مقادیر هگز ۳رقمی (#abc) و هم ۶رقمی (#aabbcc) پذیرفته و به سه‌گانه‌های کامل RGB نرمال می‌شوند. ورودی نامعتبر فوراً رد میشود بهجای پیش‌فرض خاموش به سیاه، پس یک حاشیه قرمز بهجای نتیجه پاس گمراه‌کننده ظاهر میشود.
- 2محاسبه روشنایی WCAGهر رنگ با فرمول WCAG 2.1 به روشنایی نسبی تبدیل میشود: مقادیر کانال sRGB با یک تصحیح گاما تکه‌ای خطی می‌شوند (تقسیم بر ۱۲٫۹۲ زیر ۰٫۰۳۹۲۸، توان‌رسانی به توان ۲٫۴ بالای آن)، سپس به‌صورت ۰٫۲۱۲۶R + ۰٫۷۱۵۲G + ۰٫۰۷۲۲B وزن‌دهی می‌شوند.
- 3نسبت کنتراست و بررسی‌های انطباقنسبت کنتراست به‌صورت (روشن‌تر + ۰٫۰۵) / (تیره‌تر + ۰٫۰۵) محاسبه میشود و در برابر هر پنج آستانه WCAG بررسی میشود: متن معمولی AA (۴٫۵:۱)، متن بزرگ AA (۳:۱)، متن معمولی AAA (۷:۱)، متن بزرگ AAA (۴٫۵:۱)، و اجزای UI (۳:۱). نتایج با هر ضربه کلید به‌روز می‌شوند.
- 4پیشنهادات اصلاح حفظ-فاموقتی جفت رنگ WCAG AA را رد میکند، ابزار فضای روشنایی HSL را جست‌وجو میکند — با گام‌برداری از روشنایی اصلی به هر دو جهت — تا نزدیک‌ترین نسخه هر رنگ را که ۴٫۵:۱ را می‌گذراند پیدا کند و در همان حال همان فام و اشباع را نگه دارد. API قطره‌چکان رنگ (EyeDropper، در Chromium) نیز برای نمونه‌برداری از هر رنگ مستقیماً از صفحه شما در دسترس است.
ابزارهای مرتبط
شبیه‌ساز کوررنگی
ببینید طراحی شما برای افراد با نقص دید رنگی چگونه به نظر می‌رسد. پروتانوپی، دوترانوپی، تریتانوپی، آکروماتوپسی و ناهنجاری‌های خفیف‌تر را شبیه‌سازی میکند.
وضوح صفحه‌نمایش من چیست
وضوح صفحه‌نمایش خود را در پیکسل‌های CSS و واقعی، اندازه پنجره، نسبت پیکسل، عمق رنگ، HDR، پشتیبانی لمسی و نرخ نوسازی ببینید و همه را کپی کنید.
تست پیکسل مرده
صفحه‌نمایش خود را برای پیکسل‌های مرده یا گیرکرده با رنگ‌های تمام‌صفحه مشکی، سفید، قرمز، سبز، آبی و خاکستری، به‌همراه یک تعمیرکننده اختیاری پیکسل گیرکرده بررسی کنید.