بررسیکننده کنتراست، نسبت کنتراست WCAG 2.1 بین دو رنگ را محاسبه کرده و آنها را در برابر آستانههای AA/AAA برای متن معمولی و بزرگ رتبهبندی میکند. پیشنمایش زنده، متن را در رنگهای انتخابی نمایش میدهد و دکمه «انتخاب پسزمینه صفحه» رنگ پسزمینه صفحه فعلی را نمونهبرداری میکند.
دسترسپذیری روزبهروز الزامیتر میشود — انطباق با WCAG در بسیاری از حوزههای قضایی یک الزام قانونی است، و حتی جایی که نیست، کنتراست ضعیف کاربران را پس میزند. بررسیکننده کنتراست فوراً به شما میگوید آیا هر دو رنگ استانداردهای WCAG را برآورده میکنند یا نه. یک رنگ پیشزمینه و پسزمینه را از طریق color picker انتخاب کنید یا مقادیر hex را بچسبانید؛ ابزار نسبت کنتراست را با استفاده از فرمول رسمی luminance در WCAG محاسبه میکند و آن را در برابر چهار آستانه رتبهبندی میکند: AA معمولی (≥۴.۵:۱)، AA بزرگ (≥۳:۱)، AAA معمولی (≥۷:۱) و AAA بزرگ (≥۴.۵:۱). هر آستانه یک نشان واضح Pass/Fail نمایش میدهد. یک پیشنمایش زنده متن بزرگ و معمولی را در رنگهای انتخابی رندر میکند تا تأثیر بصری واقعی را ببینید. یک دکمه کاربردی رنگ پسزمینه بدنه صفحه فعلی را نمونهبرداری میکند — مفید برای بررسی اینکه آیا ترکیب رنگی یک سایت واقعی موفق میشود یا نه. همه چیز بهصورت محلی در مرورگر شما اجرا میشود، بدون آپلود.
از فرمول رسمی luminance در WCAG برای محاسبه نسبت کنتراست استفاده میکند. نتیجه دقیق است و با هر بررسیکننده دسترسپذیری معتبر مطابقت دارد.
Pass/fail برای AA معمولی (≥۴.۵:۱)، AA بزرگ (≥۳:۱)، AAA معمولی (≥۷:۱)، AAA بزرگ (≥۴.۵:۱) — همگی بهصورت جدولی نمایش داده میشوند.
متن بزرگ و معمولی واقعی را در رنگهای انتخابی شما رندر میکند تا در کنار نسبت عددی، تأثیر بصری را نیز ببینید.
با یک کلیک رنگ پسزمینه محاسبهشده بدنه صفحه فعلی را نمونهبرداری میکند — مفید برای تست ترکیبهای دنیای واقعی.
یک مقدار hex تایپ کنید یا از color picker بومی استفاده کنید. مقادیر با ویرایش هر کدام، دوطرفه هماهنگ میشوند.
تعویض با یک کلیک، پیشزمینه و پسزمینه را جابهجا میکند — مفید هنگام بررسی تمهای معکوس یا حالتهای hover.
پیش از نهایی کردن یک پالت رنگی، هر رنگ متن را در برابر پسزمینهاش بررسی کنید تا از انطباق با WCAG AA مطمئن شوید — از بازکاری بعدی جلوگیری میکند.
از «انتخاب پسزمینه صفحه» روی یک سایت زنده استفاده کنید، سپس رنگ متن واقعی را بچسبانید — تخلفات دسترسپذیری را در چند دقیقه بدون باز کردن Lighthouse پیدا کنید.
وقتی یک برند رنگی را انتخاب میکند که ممکن است دسترسپذیری را نقض کند، از این بررسیکننده برای یافتن نزدیکترین نسخه منطبق (سایه تیرهتر/روشنتر) استفاده کنید.
بررسی کنید رنگهای حالت hover/active/disabled همچنان الزامات کنتراست را برآورده میکنند، نه فقط حالت پیشفرض.
تمهای تیره اغلب برای متن خاکستری روی خاکستری در کنتراست شکست میخورند. خاکستریهای تیرهتان را در برابر تیرهترین پسزمینههایتان بررسی کنید تا این موارد را پیدا کنید.
روی آیکون Contrast در داک DevSuite Pro کلیک کنید. پنلی با فیلدهای رنگ پیشزمینه و پسزمینه باز میشود.
برای هر کدام از color picker استفاده کنید یا یک مقدار hex بچسبانید. پیشنمایش زنده با تغییر رنگها بهروزرسانی میشود.
عدد بزرگ (مثلاً ۴.۸:۱) نسبت کنتراست است. هرچه بالاتر بهتر. ۳ حداقل مطلق است؛ ۴.۵ هدف برای متن معمولی است.
نشانهای pass/fail برای AA و AAA، اندازههای متن معمولی و بزرگ، بهسرعت نشان میدهند ترکیب شما واجد شرایط چه چیزی است.
اگر موفق نشد، رنگها را تغییر دهید. پیشزمینه را تیرهتر یا پسزمینه را روشنتر کنید (یا برعکس) تا سطح موردنظر Pass نشان دهد.
DevSuite Pro را به صورت رایگان نصب کنید و بیش از ۶۴ ابزار توسعه را برای مرورگر خود باز کنید.
