تست کنتراست رنگ
کنتراست رنگ متن و پس‌زمینه رو با استاندارد WCAG بسنج.
دربارهٔ این ابزار
متن خاکستری روشن روی زمینه سفید در مانیتور طراح قشنگ به نظر می‌رسد، اما روی موبایل زیر نور آفتاب یا برای کسی که بینایی ضعیف‌تری دارد، تقریباً ناخواناست. این ابزار رایگان نسبت کنتراست بین رنگ متن و پس‌زمینه را دقیق محاسبه می‌کند و می‌گوید استاندارد دسترس‌پذیری WCAG را رد می‌کند یا نه — و اگر نکرد، خودش نزدیک‌ترین رنگ قابل‌قبول را پیشنهاد می‌دهد.
چطور استفاده کنم؟
- کد HEX رنگ متن را وارد کن یا از انتخابگر رنگ استفاده کن.
- همین کار را برای رنگ پس‌زمینه انجام بده.
- نسبت کنتراست و نتیجه AA و AAA بلافاصله نمایش داده می‌شود.
- در کادر پیش‌نمایش، متن واقعی را با همان رنگ‌ها ببین.
- اگر ترکیب رد شد، روی رنگ پیشنهادی بزن تا خودکار جایگزین شود.
نسبت کنتراست چقدر باید باشد؟
سطحمتن معمولیمتن بزرگAA (حداقل استاندارد)۴٫۵:۱۳:۱AAA (سخت‌گیرانه)۷:۱۴٫۵:۱ منظور از متن بزرگ، اندازه ۲۴ پیکسل به بالا، یا ۱۹ پیکسل به بالا در حالت بولد است. سطح AA همان چیزی است که بیشتر سایت‌ها هدف می‌گیرند و مبنای اکثر بررسی‌های دسترس‌پذیری است. سطح AAA اختیاری است و معمولاً برای محتوای حیاتی مثل فرم‌های پزشکی یا سامانه‌های دولتی توصیه می‌شود.
چرا ترکیب رنگ من خوب به نظر می‌رسد ولی رد می‌شود؟
چشم انسان در تشخیص اختلاف روشنایی خیلی ضعیف‌تر از چیزی است که فکر می‌کنیم — مخصوصاً در خاکستری‌های میانی و رنگ‌های اشباع‌شده. مثلاً خاکستری #999999 روی زمینه سفید در نگاه اول کاملاً خوانا به نظر می‌رسد، اما نسبتش حدود ۲٫۸:۱ است و استاندارد AA را رد نمی‌کند. به همین دلیل WCAG به‌جای اتکا به قضاوت چشمی، آستانه عددی مشخص کرده است.
نسبت کنتراست چطور محاسبه می‌شود؟
فرمول WCAG بر پایه درخشندگی نسبی دو رنگ کار می‌کند: (L1 + 0.05) / (L2 + 0.05) که در آن L1 درخشندگی رنگ روشن‌تر و L2 درخشندگی رنگ تیره‌تر است. نتیجه عددی بین ۱:۱ (دو رنگ کاملاً یکسان) تا ۲۱:۱ (سیاه روی سفید) است.
این ابزار کوررنگی را هم بررسی می‌کند؟
خیر، این دو بررسی متفاوت‌اند. این ابزار کنتراست روشنایی را می‌سنجد (معیار WCAG 1.4.3) که برای کاربران کم‌بینا از جمله بسیاری از افراد دارای کوررنگی مفید است. اما اگر طراحی‌ات صرفاً با تفاوت رنگ (مثلاً قرمز و سبز) معنا را منتقل می‌کند، به شبیه‌ساز کوررنگی جداگانه نیاز داری.
برای چه کسانی مفید است؟
- طراحان UI: بررسی پالت رنگ قبل از تحویل طرح.
- برنامه‌نویسان فرانت‌اند: رفع خطاهای دسترس‌پذیری که ابزارهایی مثل Lighthouse گزارش می‌دهند.
- تولیدکنندگان محتوا: اطمینان از خوانا بودن متن روی اسلاید، بنر و کاور ویدیو.
- سایت‌های سازمانی و دولتی: جایی که رعایت استاندارد دسترس‌پذیری اغلب الزامی است.
ابزارهای مرتبط
برای انتخاب خود رنگ‌ها، ساخت پالت رنگی و استخراج کد رنگ از عکس به کارت می‌آیند.