بررسیکننده رایگان تضاد رنگ
ترکیبهای رنگ متن و پسزمینه خود را برای سازگاری دسترسپذیری WCAG 2.1 آزمایش کنید. نتایج فوری قبولی/رد برای استانداردهای AA و AAA — بدون ثبتنام.
94,217+ بررسی تضاد انجام شد
نسبت تضاد
17.06:1
پیشنمایش متن بزرگ (۲۴px)
پیشنمایش متن عادی بدنه (۱۶px). روباه قهوهای سریع از روی سگ تنبل میپرد. این نمونه نشان میدهد که ترکیب رنگ شما در اندازه معمول متن بدنه چگونه به نظر میرسد.
متن کوچک (۱۴px) — اغلب برای کپشنها، پاورقیها و متادیتا استفاده میشود.
معکوس: پسزمینه بر روی رنگ متن (17.06:۱ — همان نسبت)
متن عادی AA
نیاز به ۴.۵:۱
متن بزرگ AA
نیاز به ۳:۱
متن عادی AAA
نیاز به ۷:۱
متن بزرگ AAA
نیاز به ۴.۵:۱
آماده ساخت وبسایت دسترسپذیر با این رنگها هستید؟
با این رنگها بسازیدبررسیکننده تضاد رنگ چیست؟
بررسیکننده تضاد رنگ ابزاری است که تفاوت روشنایی بین دو رنگ — معمولاً متن پیشزمینه و پسزمینه آن — را اندازهگیری میکند و نسبت تضاد را طبق دستورالعملهای دسترسپذیری محتوای وب (WCAG) محاسبه میکند. این نسبت تعیین میکند که آیا ترکیب رنگ شما برای افراد دارای اختلالات بینایی، از جمله کوررنگی و بینایی ضعیف، قابل خواندن است.
بررسیکننده تضاد Kleap فوراً نسبت تضاد WCAG 2.1 را محاسبه کرده و آن را در برابر چهار سطح سازگاری آزمایش میکند: متن عادی AA (۴.۵:۱)، متن بزرگ AA (۳:۱)، متن عادی AAA (۷:۱) و متن بزرگ AAA (۴.۵:۱). اگر رنگهایتان رد شوند، ابزار نزدیکترین جایگزین قابل دسترس را پیشنهاد میکند تا بتوانید مشکلات دسترسپذیری را بدون طراحی مجدد کل پالت رنگی خود برطرف کنید.
توضیح سطوح تضاد WCAG
متن عادی AA
حداقل ۴.۵:۱
نیاز به حداقل نسبت تضاد ۴.۵:۱ دارد. این رایجترین هدف سازگاری است و برای متن بدنه زیر ۱۸pt (یا ۱۴pt پررنگ) اعمال میشود.
متن بزرگ AA
حداقل ۳:۱
نیاز به حداقل نسبت تضاد ۳:۱ دارد. برای متنی که حداقل ۱۸pt (۲۴px) یا ۱۴pt پررنگ (۱۸.۶۶px پررنگ) است، اعمال میشود.
متن عادی AAA
حداقل ۷:۱
بالاترین استاندارد که نیاز به نسبت تضاد ۷:۱ دارد. خوانایی را برای کاربران با بینایی نسبتاً ضعیف (تقریباً ۲۰/۸۰) تضمین میکند.
متن بزرگ AAA
حداقل ۴.۵:۱
نیاز به ۴.۵:۱ برای متن بزرگ در سطح AAA دارد. خوانایی بهبودیافته برای سرتیترها و متن نمایشی فراهم میکند.
نکاتی برای طراحی رنگ دسترسپذیر
با تضاد شروع کنید
رنگهای متن و پسزمینه خود را از ابتدا با در نظر گرفتن تضاد انتخاب کنید. اضافه کردن دسترسپذیری به صورت پسگرا بسیار سختتر از ساختن آن از ابتدا است.
فقط به رنگ متکی نباشید
از آیکونها، الگوها، خط زیر یا برچسبها در کنار رنگ برای انتقال معنا استفاده کنید. حدود ۸٪ از مردان نوعی کوررنگی دارند.
روی دستگاههای واقعی آزمایش کنید
رنگها روی مانیتورها، تلفنها و در نور آفتاب شدید متفاوت به نظر میرسند. نسبت تضاد را روی دستگاههای واقعی آزمایش کنید، نه فقط در ابزار طراحی.
حالت تاریک را هم بررسی کنید
اگر سایتتان از حالت تاریک پشتیبانی میکند، نسبتهای تضاد را برای هر دو تم تأیید کنید. یک جفت رنگ که در حالت روشن قبول میشود ممکن است در حالت تاریک رد شود.
به وزن فونت توجه کنید
وزنهای فونت نازک و سبک تضاد درکشده را کاهش میدهند. اگر از وزنهای زیر ۴۰۰ استفاده میکنید، به نسبت تضاد بالاتری از حداقل هدف بگیرید.
حالات تعاملی را بررسی کنید
حالات hover، focus و active اغلب از رنگهای متفاوتی استفاده میکنند. مطمئن شوید که تمام حالات تعاملی نیازهای تضاد را برآورده میکنند، نه فقط حالت پیشفرض.
مقایسه بررسیکننده تضاد
| ویژگی | Kleap | WebAIM | Coolors | Adobe Color |
|---|---|---|---|---|
| قیمت | رایگان | رایگان | Freemium | رایگان (با حساب Adobe) |
| پیشنمایش بلادرنگ | بله، متن زنده روی پسزمینه | بله، پایه | بله | بله |
| نزدیکترین رنگ قابل دسترس | بله، پیشنهاد خودکار | خیر | خیر | جزئی |
| سطوح WCAG آزمایششده | AA + AAA (عادی + بزرگ) | AA + AAA | فقط AA | AA + AAA |
| سازنده وبسایت داخلی | بله، با هوش مصنوعی | خیر | خیر | خیر |
| دکمه جابجایی رنگها | بله | خیر | خیر | خیر |
| جفت تصادفی قابل دسترس | بله | خیر | خیر | خیر |
سؤالات متداول
نسبت تضاد رنگ چیست؟+
به چه نسبت تضاد WCAG نیاز دارم؟+
متن بزرگ در WCAG چیست؟+
آیا WCAG برای تصاویر و آیکونها هم اعمال میشود؟+
نسبت تضاد چگونه محاسبه میشود؟+
آیا WCAG AA برای وبسایت من کافی است؟+
اگر رنگهای برند من در تضاد قبول نشوند چه کنم؟+
آیا تضاد برای حالت تاریک هم مهم است؟+
آیا کاربران کوررنگ میتوانند تضاد کافی ببینند؟+
چگونه تضاد را در وبسایت موجودم آزمایش کنم؟+
یک وبسایت دسترسپذیر با هوش مصنوعی بسازید
از ترکیبهای رنگ دسترسپذیر خود برای ساخت یک وبسایت کامل و سازگار با WCAG با سازنده وبسایت هوشمند Kleap استفاده کنید.
رایگان شروع کنید