بررسی‌کننده کنتراست رنگ

این ابزار چه کاری انجام می‌دهد

یک رنگ برای متن و یک رنگ برای پس‌زمینه انتخاب کنید تا این بررسی‌کننده نسبت دقیق کنتراست WCAG بین آن‌ها را محاسبه کند و سپس مشخص کند که این جفت‌رنگ برای متن معمولی و بزرگ، دستورالعمل‌های دسترس‌پذیری AA و AAA را رعایت می‌کند یا نه. اگر جفت‌رنگ رد شود، ابزار نزدیک‌ترین طیف از رنگ متن شما را که الزامات را رعایت می‌کند، به‌طور خودکار پیشنهاد می‌دهد.

مناسب چه کسانی است

طراحان و توسعه‌دهندگانی که رابط‌های کاربری دسترس‌پذیر می‌سازند، هر کسی که پیش از انتشار طرح یک پالت رنگی را بررسی می‌کند، یا تولیدکنندگان محتوا که می‌خواهند مطمئن شوند ترکیب متن و پس‌زمینه در یک اسلاید یا تصویر، برای افراد کم‌بینا واقعاً خواناست.

نحوه استفاده

• کد hex را وارد کنید یا برای انتخاب رنگ متن و رنگ پس‌زمینه از انتخابگر رنگ استفاده کنید.
• به‌روزرسانی کادر پیش‌نمایش زنده را با رنگ‌های واقعی خود مشاهده کنید و تغییر فوری نسبت کنتراست و نشان‌های قبولی/ردی را ببینید.
• برای جابه‌جا کردن متن و پس‌زمینه از دکمهٔ تعویض استفاده کنید، یا در یک جفت رنگ ناموفق روی «استفاده از این رنگ» کلیک کنید تا سایه‌ای موفق به‌صورت خودکار اعمال شود.

نمونه‌های واقعی

متن خاکستری روشن (#999999) روی پس‌زمینه سفید، اغلب برای متن معمولی الزامات AA را رعایت نمی‌کند، حتی اگر در نگاه اول مناسب به نظر برسد — این ابزار پیش از انتشار، آن را شناسایی می‌کند. ترکیب آبی شاخص یک برند روی زمینه سفید ممکن است الزامات AA را رعایت کند، اما در سطح سخت‌گیرانه‌تر AAA که برای محتوای با بیشترین دسترس‌پذیری استفاده می‌شود، رد شود.

سؤالات متداول

برای رعایت سطح AA در WCAG به چه نسبت کنتراستی نیاز دارم؟

4.5:1 برای متن معمولی و 3:1 برای متن بزرگ (18pt+/24px+، یا 14pt/19px+ به‌صورت پررنگ). این همان سطحی است که بیشتر ممیزی‌های دسترس‌پذیری و الزامات قانونی بر اساس آن بررسی می‌کنند.

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

AAA استانداردی سخت‌گیرانه‌تر و اختیاری است — 7:1 برای متن معمولی و 4.5:1 برای متن بزرگ. AA سطح پایه‌ای است که بیشتر سایت‌ها هدف می‌گیرند؛ AAA برای محتوای حیاتی توصیه می‌شود.

نسبت کنتراست دقیقاً چگونه محاسبه می‌شود؟

این ابزار بر اساس درخشندگی نسبی هر دو رنگ و با استفاده از فرمول WCAG کار می‌کند: (L1 + 0.05) / (L2 + 0.05)، که در آن L1 درخشندگی رنگ روشن‌تر و L2 درخشندگی رنگ تیره‌تر است.

چرا ترکیب رنگ من خوب به نظر می‌رسد، اما همچنان رد می‌شود؟

چشم انسان در تشخیص کنتراست، به‌ویژه در خاکستری‌های میانه و رنگ‌های اشباع‌شده، به‌طور شگفت‌انگیزی ضعیف است — محاسبهٔ نسبت، مواردی را آشکار می‌کند که یک نگاه سریع از دست می‌دهد؛ به همین دلیل WCAG به‌جای واگذار کردن تشخیص به قضاوت فردی، آستانه‌های عددی تعیین می‌کند.

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

نسبت کنتراست و طراحی ایمن برای افراد دچار کوررنگی، بررسی‌هایی مرتبط اما متفاوت هستند — این ابزار کنتراست درخشندگی (WCAG 1.4.3) را بررسی می‌کند که به‌طور گسترده برای کاربران کم‌بینا، از جمله افراد دارای انواع مختلف کوررنگی، مفید است؛ اما جایگزین شبیه‌ساز اختصاصی کوررنگی نمی‌شود.