محاسبهگر کنتراست رنگ
ترکیبهای نمونه
رنگ پیشزمینه (متن)
رنگ پسزمینه
جزئیات فنی
ماشینحساب کنتراست رنگ چگونه کار میکند
این ابزار چه کاری انجام میدهد
ماشینحساب کنتراست رنگ نسبت کنتراست بین رنگهای پیشزمینه و پسزمینه را اندازهگیری میکند تا مشخص شود آیا متن با استانداردهای دستورالعملهای دسترسپذیری محتوای وب (WCAG) مطابقت دارد یا نه. این ابزار آزمون دسترسپذیری اختلاف روشنایی (luminance) بین دو رنگ را با استفاده از فرمول نسبت کنتراست WCAG محاسبه میکند که روشنایی نسبیِ رنگ روشنتر را با رنگ تیرهتر مقایسه میکند. وقتی لازم است بررسی کنید رنگهای متن شما با استانداردهای WCAG AA یا AAA سازگار هستند یا نه، این ماشینحساب فوراً بازخورد میدهد که آیا ترکیبهای رنگی شما برای کاربران دارای اختلالات بینایی دسترسپذیر است یا خیر. این ابزار هم متن معمولی (نیازمند 4.5:1 برای AA و 7:1 برای AAA) و هم متن بزرگ (نیازمند 3:1 برای AA و 4.5:1 برای AAA) را ارزیابی میکند و کمک میکند طراحیهای شما با مقررات دسترسپذیری سازگار باشد و محتوای خوانا برای همه کاربران فراهم کند.
موارد استفادهٔ رایج برای توسعهدهندگان
توسعهدهندگان هنگام ساخت برنامههای وبِ دسترسپذیر از ماشینحسابهای کنتراست رنگ استفاده میکنند تا اطمینان یابند متن برای کاربران دارای کمبینایی یا کوررنگی در برابر رنگهای پسزمینه خوانا میماند. بررسیکننده انطباق با WCAG هنگام طراحی رابطهای کاربری، ایجاد سیستمهای طراحی یا ممیزی وبسایتهای موجود بر اساس استانداردهای دسترسپذیری ضروری است. بسیاری از طراحان پیش از نهایی کردن طرحهای رنگی—بهویژه هنگام کار با رنگهای برند که ممکن است ذاتاً کنتراست کافی نداشته باشند—نیاز دارند نسبتهای کنتراست را بررسی کنند. بررسیکننده دسترسپذیری هنگام پیادهسازی تمهای حالت تیره کمک میکند تا متن هنگام جابهجایی بین طرحهای رنگی روشن و تیره خوانا بماند. توسعهدهندگان فرانتاند از این ابزار برای اعتبارسنجی انتخابهای رنگ در CSS، آزمون ترکیبهای رنگی از ماکاپهای طراحی، یا اطمینان از رعایت الزامات Section 508 و ADA استفاده میکنند. ماشینحساب نسبت کنتراست هنگام ساخت فرمهای دسترسپذیر، منوهای ناوبری یا هر عنصر رابطی که خوانایی متن در آن حیاتی است ارزشمند است.
قالبها، نوعها یا گونههای داده
ماشینحسابهای کنتراست رنگ فرمتهای مختلف ورودی رنگ را میپذیرند، از جمله کدهای هگزادسیمال (#RRGGBB)، مقادیر RGB (rgb(r, g, b))، مقادیر HSL (hsl(h, s%, l%)) و نامهای رنگ در CSS. این ابزار نسبتهای کنتراست را با استفاده از فرمول WCAG 2.1 محاسبه میکند که رنگها را به مقادیر روشنایی نسبی تبدیل کرده و بهصورت ریاضی مقایسه میکند. استانداردهای WCAG دو سطح انطباق را تعریف میکنند: سطح AA برای متن معمولی 4.5:1 و برای متن بزرگ 3:1 را میطلبد، در حالی که سطح AAA برای متن معمولی 7:1 و برای متن بزرگ 4.5:1 را نیاز دارد. متن بزرگ بهصورت 18pt (24px) با وزن معمولی یا 14pt (18.5px) با وزن بولد تعریف میشود. ماشینحساب معمولاً برای هر سطح WCAG نشانگر قبولی/ردی ارائه میدهد، نسبت کنتراست دقیق را نمایش میدهد و ممکن است رنگهای جایگزینی را پیشنهاد کند که استانداردهای دسترسپذیری را برآورده میکنند. برخی ابزارها همچنین کنتراست را برای اجزای UI، گرافیکها و محتوای غیرمتنی که به نسبت کنتراست 3:1 نیاز دارد محاسبه میکنند.
دامهای رایج و حالتهای لبهای
هنگام استفاده از ماشینحسابهای کنتراست رنگ، به یاد داشته باشید که نسبتهای کنتراست بر اساس مقادیر روشنایی (luminance) محاسبه میشوند، نه روشنایی ادراکشده؛ بنابراین رنگهایی که شبیه به نظر میرسند ممکن است نسبت کنتراست قابل قبولی داشته باشند. این ابزار کنتراست را بهصورت ریاضی اندازهگیری میکند، اما خوانایی واقعی میتواند تحت تأثیر وزن فونت، اندازه فونت، فاصله خطوط و الگوها یا تصاویر پسزمینه قرار گیرد. فرض نکنید عبور از WCAG AA بهطور خودکار یعنی متن برای همه خواناست؛ برخی کاربران ممکن است به نسبتهای کنتراست بالاتر از حداقل استانداردها نیاز داشته باشند. توجه داشته باشید که الزامات کنتراست برای متن تزئینی، لوگوها و عناصر غیرفعال UI متفاوت است و ممکن است الزامات کنتراست پایینتری داشته باشند. این ماشینحساب سایه متن، دورخط (outline) یا سایر افکتهای بصری که ممکن است خوانایی را بهبود دهند در نظر نمیگیرد. همیشه طراحیهای واقعی خود را در شرایط دنیای واقعی آزمون کنید، زیرا کالیبراسیون مانیتور، نور محیط و تواناییهای بینایی فردی میتواند بر کنتراست ادراکشده اثر بگذارد. به یاد داشته باشید کنتراست فقط یکی از جنبههای دسترسپذیری است؛ انتخاب فونت، فاصلهگذاری و ساختار محتوا نیز بر خوانایی اثر میگذارند.
چه زمانی از این ابزار استفاده کنیم در برابر کُد
از ماشینحسابهای کنتراست رنگِ مبتنی بر مرورگر برای اعتبارسنجی سریع طراحی، آزمون ترکیبهای رنگیِ منفرد، یا زمانی که در فرایند طراحی به بازخورد فوری نیاز دارید استفاده کنید. این ابزارها برای ممیزی دسترسپذیری، نمایش به ذینفعان، یا هنگام کار با ابزارهای طراحی که بررسی کنتراست داخلی ندارند ایدهآلاند. برای برنامههای تولیدی و آزمون خودکار دسترسپذیری، بررسی کنتراست را با استفاده از ابزارهایی مانند axe-core، Pa11y یا Lighthouse که میتوانند کل صفحات را بهصورت برنامهنویسیشده آزمون کنند در گردشکار توسعه خود ادغام کنید. راهکارهای مبتنی بر کد امکان پردازش دستهای ترکیبهای رنگی، آزمون خودکار سیستمهای طراحی و ادغام با پایپلاینهای CI/CD برای پایش پیوسته دسترسپذیری را فراهم میکنند. ابزارهای مرورگری در آزمون تعاملی و آموزش عالیاند، در حالی که راهکارهای برنامهنویسی اعتبارسنجی دسترسپذیریِ نظاممند و تکرارپذیر ارائه میدهند. استفاده از هر دو رویکرد را در نظر بگیرید: ابزارهای مرورگری برای کاوش طراحی و ابزارهای مبتنی بر کد برای ممیزی جامع دسترسپذیری.