این ابزار چه کاری می‌کند؟
رنگ را بین HEX، RGB و HSL تبدیل کنید، کنتراست رنگ متن و پس‌زمینه را طبق استاندارد WCAG بسنجید، از یک رنگ پایه پالت و طیف روشن تا تیره بسازید و کد گرادیانت CSS را کپی کنید. همه‌چیز در مرورگر شما انجام می‌شود.
چطور استفاده کنم؟
- ۱رنگ را به هر قالبی بنویسید (
#3b82f6،rgb(59, 130, 246)یاhsl(217, 91%, 60%)) یا از انتخاب‌گر رنگ استفاده کنید. - ۲در تب «تبدیل رنگ» معادل آن را در قالب‌های دیگر ببینید و کپی کنید.
- ۳در تب «کنتراست» رنگ متن و پس‌زمینه را وارد کنید و ببینید به سطح AA یا AAA می‌رسد یا نه.
- ۴در تب «پالت» نوع هماهنگی (مکمل، مجاور، سه‌گانه، ...) را انتخاب و متغیرهای CSS را بگیرید.
- ۵در تب «گرادیانت» رنگ‌ها و زاویه را تنظیم و کد CSS را کپی کنید.
کجا به کار می‌آید؟
- اطمینان از اینکه متن روی دکمه یا بنر خوانا است
- ساختن طیف رنگ برند (۵۰ تا ۹۰۰) برای طراحی
- گرفتن کد گرادیانت بدون نوشتن دستی
- تبدیل رنگ طراحی (Figma) به قالب مورد نیاز CSS
سؤالات متداول
نسبت کنتراست درست چقدر است؟
طبق WCAG، متن معمولی حداقل ۴٫۵ به ۱ و متن بزرگ حداقل ۳ به ۱ برای سطح AA؛ برای سطح AAA به ترتیب ۷ به ۱ و ۴٫۵ به ۱. توضیح بیشتر در راهنمای کنتراست.
چرا ۴٫۴۹ «رد» است؟
چون نسبت واقعی با دقت کامل سنجیده می‌شود و گرد نمی‌شود؛ ۴٫۴۹ کمتر از ۴٫۵ است و به‌درستی رد می‌شود.
رنگ من به سرور فرستاده می‌شود؟
نه. تبدیل و محاسبه در مرورگر انجام می‌شود.
شفافیت (alpha) پشتیبانی می‌شود؟
ورودی‌هایی مثل rgb(10 20 30 / 50%) خوانده می‌شوند ولی شفافیت در محاسبه‌ی کنتراست و خروجی در نظر گرفته نمی‌شود؛ رنگ کامل (مات) مبنا است.
نکته‌ها و محدودیت‌ها
- کنتراست قابل‌قبول فقط یکی از شرط‌های دسترس‌پذیری است؛ اندازه‌ی متن و فاصله‌ها هم مهم‌اند.
- نام رنگ‌ها (مثل red) پشتیبانی نمی‌شود؛ فقط HEX، rgb() و hsl().
راهنماهای مرتبط
ابزارهای مرتبط
ابزار تصویرتبدیل فرمت، حذف پس‌زمینه با هوش مصنوعی، برش، تغییر اندازه و بهینه‌سازی — همه در یک فضای کاری سریع.باز کردن ابزارسازنده QRساخت QR برای لینک، متن، Wi-Fi، مخاطب و رویداد با لوگو، استایل سفارشی و خروجی مناسب وب و چاپ.باز کردن ابزارواکاوی سایتعملکرد، Core Web Vitals، منابع، واترفال و فرصت‌های بهبود سایت را با Lighthouse محلی و گزارش کامل بررسی کنید.باز کردن ابزار
واژه‌های این صفحه
همه‌ی ابزارها را در فهرست ابزارها ببینید.