بررسی‌گر کنتراست رنگ: نسبت WCAG AA و AAA – رایگان
رایگان، بدون ثبت‌نام، در مرورگرتان کار می‌کند. رنگ متن و پس‌زمینه را وارد کنید تا نسبت کنتراست WCAG و نتیجه AA و AAA را ببینید. اگر رد شد، نزدیک‌ترین رنگ قبول‌شده را با یک کلیک بگیرید.
متن بزرگ این‌گونه خوانده می‌شود
متن اصلی عادی این‌گونه دیده می‌شود. یک روباه قهوه‌ای چابک روی سگ تنبل می‌پرد، و چاپ ریز، مثل زیرنویس، زیر آن قرار دارد.
متن کوچک: زیرنویس 14px.
دکمه- متن عادی، AA: قبولمتن اصلی، حداقل 4.5:1
- متن عادی، AAA: قبولسطح بالاتر، حداقل 7:1
- متن بزرگ، AA: قبول18pt+ یا 14pt+ ضخیم، حداقل 3:1
- متن بزرگ، AAA: قبولسطح بالاتر، حداقل 4.5:1
- آیکون‌ها و کنترل‌ها، AA: قبولدکمه‌ها، حاشیه‌ها، خطوط نمودار: 3:1
از فرمول کنتراست WCAG 2 استفاده می‌کند. نسبت‌ها هرگز به بالا گرد نمی‌شوند، پس 4.49:1 به‌عنوان 4.5:1 حساب نمی‌شود. روی دستگاه شما بررسی می‌شود.
چرا از بررسی‌گر کنتراست رنگ استفاده کنیم
- 100% رایگان
- هر چند وقت که بخواهید از آن استفاده کنید. بدون ثبت‌نام، بدون واترمارک و بدون نیاز به نصب.
- حریم خصوصی از ابتدا
- آنچه تایپ می‌کنید در مرورگر شما می‌ماند و هرگز برای ما ارسال نمی‌شود.
- روی هر دستگاهی کار می‌کند
- در مرورگر روی Windows، Mac، Linux، Android و iPhone اجرا می‌شود. نیازی به برنامه نیست.
طرز استفاده از بررسی‌گر کنتراست رنگ
- رنگ «متن» و «پس‌زمینه» را به‌صورت HEX، rgb()، hsl() یا نامی مانند navy وارد کنید، یا با نمونه‌رنگ‌ها انتخاب کنید. با «جابه‌جایی» آن‌ها را عوض کنید.
- نسبت کنتراست و پنج نتیجه را بخوانید: متن معمولی AA و AAA، متن بزرگ AA و AAA، و آیکون‌ها و کنترل‌ها.
- پیش‌نمایش زنده را ببینید تا عنوان‌ها، متن اصلی، متن ریز و یک دکمه را با رنگ‌هایتان ببینید.
- اگر یک سطح رد شد، روی یکی از «نزدیک‌ترین رنگ‌های قبول‌شده» کلیک کنید. رنگ‌مایه اصلی را نگه می‌دارد و فقط روشنایی یا تیرگی متن را تغییر می‌دهد.
پرسش‌های متداول
به چه نسبت کنتراستی نیاز دارم؟
WCAG AA برای متن معمولی 4.5:1 و برای متن بزرگ و بخش‌های رابط، مانند دکمه‌ها، حاشیه‌ها و آیکون‌ها، 3:1 می‌خواهد. AAA برای متن معمولی 7:1 و برای متن بزرگ 4.5:1 می‌خواهد.
متن بزرگ چه حدی دارد؟
حداقل 18 پوینت (24px) معمولی، یا 14 پوینت (حدود 18.7px) پررنگ.
نسبت کنتراست چگونه حساب می‌شود؟
با فرمول WCAG 2: روشنایی نسبی هر رنگ محاسبه می‌شود، سپس روشن‌تر به‌علاوه 0.05 بر تیره‌تر به‌علاوه 0.05 تقسیم می‌شود. نتیجه از 1:1 (بدون کنتراست) تا 21:1 (سیاه روی سفید) است.
چرا 4.49:1 رد می‌شود؟
WCAG می‌گوید نسبت‌ها نباید گرد شوند، پس هر چیزی زیر 4.5:1 برای متن معمولی AA را برآورده نمی‌کند. این ابزار هیچ نسبتی را به بالا گرد نمی‌کند.
رنگی را که رد می‌شود چطور درست کنم؟
زیر «نزدیک‌ترین رنگ‌های قبول‌شده»، ابزار یک رنگ متن برای AA و یکی برای AAA پیشنهاد می‌کند. هر کدام رنگ‌مایه و اشباع شما را نگه می‌دارد و فقط روشنایی را تغییر می‌دهد، پس رنگ برند شما شناخته‌شده می‌ماند. روی یکی کلیک کنید تا استفاده شود.
آیا رنگ‌های متنی شفاف را پشتیبانی می‌کند؟
بله. رنگ متن شفاف، مانند rgba(26, 20, 70, 0.6)، پیش از اندازه‌گیری کنتراست با پس‌زمینه ترکیب می‌شود. شفافیت پس‌زمینه نادیده گرفته می‌شود و توپر در نظر گرفته می‌شود.
آیا دکمه‌ها و آیکون‌ها هم به کنتراست نیاز دارند؟
بله. WCAG 2.1 برای بخش‌های رابط (حاشیه دکمه‌ها، فیلدهای فرم، آیکون‌ها، خطوط نمودار) با رنگ‌های کنارشان 3:1 می‌خواهد. نتیجه «آیکون‌ها و کنترل‌ها» این را بررسی می‌کند.
قبول شدن یعنی وب‌سایتم قابل دسترس است؟
یعنی این جفت رنگ قاعده کنتراست WCAG را برآورده می‌کند. دسترس‌پذیری بسیار بیشتر را در بر می‌گیرد، مانند اندازه متن، حالت فوکوس، متن جایگزین و استفاده با صفحه‌کلید، پس این را یکی از چند بررسی بدانید.
آیا بررسی‌گر کنتراست رنگ رایگان است؟
بله. استفاده از آن رایگان است، بدون ثبت‌نام و بدون نیاز به نصب.
راهنما و آموزش‌ها (به انگلیسی)
- The 60-30-10 Color Rule for Websites and Slides (Free)The 60-30-10 rule splits a design into a dominant colour, a secondary and an accent. Use it on web pages and slides with HEX codes and a free palette generator.
- Christmas Color Palette Ideas with HEX Codes (Free)Five Christmas colour palettes with HEX codes, from classic red and green to Nordic and midnight blue, with contrast-checked text pairs. Build more free.
- Color Theory Basics: The Wheel and Color Schemes (Free)The colour wheel, hue, saturation and lightness, and complementary, analogous, triadic and monochromatic schemes, with HEX examples from a free tool.
- CSS Gradient Text: background-clip Method (Free Generator)Make CSS gradient text with background-clip: text and a transparent fill. Copy a gradient from a free generator, add a solid fallback, check contrast.
ابزارهای مرتبط
- مبدل رنگ HEX به RGBHEX را به RGB یا برعکس تبدیل کنید، با HEX، RGB، HSL، HSV و CMYK که با هم نشان داده میشوند و هر کدام دکمه کپی دارد.
- تولیدکننده پالت رنگپالت پنجرنگی بسازید، رنگها را قفل کنید یا از رنگ خودتان طرح بسازید. 11 سایه هر رنگ را ببینید و خروجی CSS، Tailwind، JSON یا HEX بگیرید.
- یابنده نام رنگکد HEX، RGB یا HSL را بچسبانید یا رنگی انتخاب کنید و نزدیک‌ترین نامهای رنگ CSS را ببینید. همه 148 نام رنگ را مرور و فیلتر کنید.