نمای کلی سه ابزار و تکنیک برای آزمایش و تأیید کنتراست رنگ دسترس‌پذیر در طراحی شما.
فرض کنید نوشتاری روی پس‌زمینه روشن دارید، مثل این:
اگرچه ممکن است همه مثال‌ها برای شما خوانا باشد، اما این موضوع برای همه صدق نمی‌کند.
کنتراست رنگ دسترس‌پذیر روشی است که تضمین می‌کند نوشتار برای همه خوانا باشد. گاهی‌اوقات آزمایش کنتراست آسان است و گاهی‌اوقات واقعاً دشوار است. در پایان این پست، سه ابزار و تکنیک جدید برای بررسی، اصلاح، و درستی‌سنجی کنتراست طراحی وب خود خواهید داشت تا بتوانید با سخت‌ترین سناریوها مقابله کنید.
«دستورالعمل‌های دسترس‌پذیری محتوای وب» و کنتراست رنگ
«طرح دسترس‌پذیری وب» W3C استراتژی‌ها، استانداردها، و منابعی را برای اطمینان از اینکه اینترنت برای بیشترین تعداد ممکن از افراد دسترس‌پذیر است ارائه می‌دهد. رهنمودهایی که این استانداردها را پشتیبانی می‌کنند «رهنمودهای دسترس‌پذیری محتوای وب» یا WCAG نامیده می‌شوند. جدیدترین نسخه پایدار، WCAG 2.1، یکی از الزامات مهم دسترس‌پذیری را پوشش می‌دهد: حداقل کنتراست.
رابطه بین دو رنگ در WCAG 2.1 با نسبت کنتراست آن‌ها توصیف می‌شود—یعنی عددی که هنگام مقایسه درخشندگی دو رنگ به‌دست می‌آورید. درخشندگی روشی برای توصیف میزان نزدیکی رنگ به سیاه (۰٪) یا سفید (۱۰۰٪) است. WCAG برخی قوانین و الگوریتم‌های محاسباتی را درباره اینکه نسبت کنتراست باید چقدر باشد تا وب دردسترس باشد تعریف می‌کند. بااین‌حال، مشکلات شناخته‌شده‌ای در این محاسبه وجود دارد. درنهایت روش قابل‌اعتمادتری اتخاذ خواهد شد، اما درحال‌حاضر، WCAG بهترین روشی است که داریم.
قوانین چیست؟
نسبت کنتراست بالاتر با عدد بزرگ‌تری امتیازدهی می‌شود، مثلاً ۴٫۵ یا ۷ به‌جای ۳. برای آشنایی بیشتر با جدول امتیازدهی، بررسی‌کننده کنتراست Polypane را ببینید.
آزمایش کنتراست بین رنگ‌ها
خب، حالا که می‌دانیم دنبال چه هستیم، چطور آن را آزمایش کنیم؟ در اینجا سه ابزار رایگان برای کمک به شما در بازرسی، اصلاح و اندازه‌گیری کنتراست وب‌سایتتان آورده شده است. نقاط قوت و ضعف هرکدام به‌طور خلاصه بیان می‌شود تا بتوانید با اطمینان دسترس‌پذیری رنگ‌ها و محتوای سایتتان را به روش‌های مختلف آزمایش کنید.
- Pika
برنامه‌ای برای MacOS که به‌طور منحصربه‌فردی قادر است کنتراست هر رنگی را در کل صفحه‌نمایش، رنگ‌های گرادیان، رنگ‌های شفاف، و غیره نشان دهد. هدف صریح است، کاربران پیکسل‌ها را به‌صورت دستی برای مقایسه انتخاب می‌کنند. کمی کمتر خودکارسازی‌شده با ویژگی‌های بسیار بیشتر. - VisBug
افزونه‌ای برای مرورگرهای مختلف که به‌طور منحصربه‌فردی می‌تواند بیش‌از یک هم‌پوشانی کنتراست را به‌طور هم‌زمان نشان دهد، اما مانند DevTools، گاهی اوقات نمی‌تواند هدف را تشخیص دهد. - Chrome DevTools
DevTools در Chrome تعبیه شده است و روش‌های مختلفی برای بازرسی، تصحیح، و اشکال‌زدایی مشکلات رنگ دارد، اما هنگام بازرسی گرادیان‌ها و رنگ‌های نیمه‌شفاف کاستی‌هایی دارد و گاهی‌اوقات نمی‌تواند هدف را تشخیص دهد.
Pika (برنامه macOS)
اگر DevTools یا VisBug نتوانند کنتراست را به‌درستی ارزیابی کنند، مثلاً وقتی که لازم است رنگی را خارج از مرورگر آزمایش کنید، یا وقتی که شفافیت یا گرادیان وجود دارد، Pika برای کمک به شما آماده است. Pika به همه پیکسل‌های صفحه دسترسی دارد چون ابزار سیستم است و ابزار وب نیست.
این همچنین به این معنی است که تجربه کاربری برای استفاده از Pika با DevTools یا VisBug متفاوت است. DevTools و VisBug تمام تلاش خود را می‌کنند تا رنگ‌های نوشتار و پس‌زمینه را از DOM مرورگر نشان دهند، درحالی‌که رنگ‌هایی که Pika مقایسه می‌کند به‌صورت دستی از هر نقطه‌ای روی صفحه‌نمایش انتخاب می‌شوند. این کار به Pika کنترل بیشتری می‌دهد و برخی موارد استفاده اضافی را باز می‌کند:
- مقایسه هر دو رنگ، صرف‌نظر از اینکه در مرورگر باشند یا نه—اگر بتوانید آن را در صفحه‌نمایش ببینید، می‌توانید آن را آزمایش کنید.
- درحال مقایسه کردن رنگ‌ها با شفافیت.
- درحال مقایسه کردن رنگ‌ها در گرادیان‌ها.
- مقایسه رنگ‌هایی که از حالت‌های ترکیب استفاده می‌کنند، مانند mix-blend-mode در CSS.
مقایسه کردن هر دو رنگ
مقایسه نوشتار با رنگ پس‌زمینه:
مقایسه رنگ دور خط و رنگ داخل گرافیک‌های برداری:
درحال مقایسه کردن رنگ‌ها با شفافیت
رنگ نوشتار را با انواع پیکسل‌های نمونه پس‌زمینه مقایسه کنید. در اینجا، روشن‌ترین خاکستری از جلوه شیشه مات به‌عنوان رنگ مقایسه پس‌زمینه استفاده می‌شود.
درحال مقایسه کردن رنگ‌ها با گرادیان‌ها
نوشتار را روی گرادیان یا روی تصویر مقایسه کنید. در اینجا حرف L از «Lasso» با آبی روشن تصویر مقایسه شده است:
VisBug
VisBug ابزاری الهام‌گرفته از FireBug برای طراحان و توسعه‌دهندگان است تا طراحی وب‌سایت خود را به‌صورت بصری بازرسی، اشکال‌زدایی، و با آن بازی کنند. هدف این است که با شبیه‌سازی واسط کاربر و تجربه کاربر ابزارهای طراحی که افراد با آن‌ها آشنا شده‌اند و دوست دارند از آن‌ها استفاده کنند، مانع ورود کمتری نسبت‌به Chrome DevTools داشته باشد.
VisBug را امتحان کنید یا آن را در Chrome، Firefox، Edge، Brave یا Safari نصب کنید.
یکی از ابزارهای ارائه‌شده آن ابزار «بازرسی دسترس‌پذیری» است.
بازرسی در مرورگرهای مختلف (و حتی در تلفن همراه)
پس‌از کلیک کردن روی ابزار «بازرسی دسترس‌پذیری»، اطلاعات دسترس‌پذیری هر چیزی که کاربر به آن اشاره کند یا با صفحه‌کلید به آن پیمایش کند در نکته‌ابزار گزارش خواهد شد. این نکته‌ابزار شامل مقایسه رنگ بین رنگ‌های پیش‌زمینه و پس‌زمینه کشف‌شده است.
یک یا چند مورد را بازرسی کنید
DevTools can either look at a single color pairing or get a report of all of your color pairings in the page, but VisBug offers a nice middle ground by allowing multiple color pairings. روی عنصری کلیک کنید تا نکته‌ابزار در جای خود باقی بماند. کلید تبدیل را نگه دارید و روی عناصر دیگر کلیک کنید تا همه نکته‌ابزارها در جای خود باقی بمانند:
این موضوع به‌ویژه برای طراحی مبتنی بر مؤلفه مهم است، جایی که چندین بخش از یک مؤلفه باید امتیازهای نسبت کنتراست را بگذرانند. این روش امکان دیدن همه آن بخش‌های تشکیل‌دهنده را به‌طور هم‌زمان فراهم می‌کند. همچنین برای مرور طراحی عالی است.
Chrome DevTools
اگر Chrome را نصب کرده‌اید، درحال‌حاضر به ابزارهای آزمایش کنتراست زیادی مجهز هستید:
- انتخابگر رنگ
- نکته‌ابزار بازرسی
- نمای کلی CSS
- Lighthouse
- کنسول JS
- ابزارهای شبیه‌سازی کوررنگی
- شبیه‌سازی اولویت کنتراست رنگ سیستم
- آزمایش WCAG 3.0 APCA
انتخابگر رنگ Chrome DevTools
در قاب «سبک‌های Chrome DevTools» در پانل «عناصر»، مقادیر رنگ یک نمونه رنگ مربعی بصری کوچک در کنار خود خواهند داشت. وقتی روی این نمونه رنگ کلیک شود ابزار انتخابگر رنگ را خواهید دید. درصورت امکان، وسط ابزار کنتراست رنگ را درمقابل پیش‌زمینه یا پس‌زمینه نشان می‌دهد.
در مثال زیر، انتخابگر رنگ برای مقدار رنگ ویژگی سفارشی باز شده است. امتیاز نسبت کنتراست ۱۵٫۷۹ گزارش شده است و دو علامت تیک سبز دارد که نشان می‌دهد امتیاز الزامات AA و AAA WCAG 2.1 را برآورده می‌کند:
تصحیح خودکار «انتخابگر رنگ»
دیدن امتیاز هنگام انتخاب رنگ‌ها مفید است، اما Chrome DevTools ویژگی دیگری برای تصحیح خودکار دارد. وقتی انتخابگر رنگ گزارش می‌دهد که امتیاز کنتراست رنگ دسترس‌پذیر ناموفق بوده است، می‌توان آن را ازهم باز کرد تا اهداف امتیاز AA و AAA و همچنین ابزار قطره‌چکان نمایان شود. در کنار AA و AAA، نمونه‌های رنگ و نماد بازآوری وجود دارد که با کلیک کردن روی آن، نزدیک‌ترین رنگ قابل‌قبول برای شما پیدا می‌شود:
اگر درباره رنگ‌ها سخت‌گیر نیستید، ویژگی تصحیح خودکار روشی عالی برای رعایت دستورالعمل‌های دسترس‌پذیری است و برای انجام این کار لازم نیست خیلی تلاش کنید.
نکته‌ابزار بازرسی
ابزار انتخاب عنصر ویژگی خاصی درطول نگه داشتن نشانگر روی صفحه دارد که
اطلاعات کلی قلم، رنگ، و دسترس‌پذیری را گزارش می‌کند. ابزار انتخاب عنصر
نماد سمت راست در نماگرفت زیر است. این چارگوش با مکان‌نمای پیکان
روی گوشه پایین سمت راست است. همچنین می‌توان آن را بااستفاده از کلید میان‌بر
Control+Shift+C (یا Command+Shift+C در MacOS) انتخاب کرد.
پس‌از فعال شدن، نماد آبی می‌شود و با اشاره به هر چیزی در صفحه، نکته‌ابزار بازرسی سریع زیر نشان داده می‌شود:
به‌جای ابزار انتخابگر رنگ که شما را ملزم می‌کند نمونه رنگ را در قاب «سبک‌ها» پیدا کنید، این ابزار به شما امکان می‌دهد به‌سادگی به اطراف صفحه اشاره کنید تا امتیازهای کنتراست را ببینید. مانند انتخابگر رنگ، این ابزار نیز می‌تواند تنها یک امتیاز کنتراست را در هر زمان نشان دهد.
Bump bump 'til you pass 🎶
من اغلب جفت رنگ‌ها را با این ابزار بازرسی سریع بررسی می‌کنم و متوجه می‌شوم که فقط کمی با نسبت موردنیاز فاصله دارند. به‌جای استفاده از ویژگی تصحیح خودکار انتخابگر رنگ (چون من سخت‌گیر هستم)، کانال‌های رنگ را در CSS تغییر می‌دهم و تماشا می‌کنم تا به نسبت موردنیازم برسم. من این فرایند را «bump bump til you pass» می‌نامم چون شماره‌های کانال رنگ را آن‌قدر بالا می‌برم تا از WCAG 2.1 عبور کنند.
مراحل به‌صورت زیر است و باید دقیقاً به‌همین ترتیب انجام شود:
- تمرکز صفحه‌کلید را روی رنگی در پانل «سبک‌ها» تنظیم کنید.
- ابزار بازرسی عنصر را با میان‌بر صفحه‌کلید
Control+Shift+C(یاCommand+Shift+Cدر MacOS) فعال کنید. - روی هدف اشاره کنید.
- برای تغییر دادن اعداد در مقدار رنگ، کلید بالا/پایین را در صفحه‌کلید فشار دهید.
این کار می‌کند زیرا مقدار سبک CSS هنوز تمرکز صفحه‌کلید شما را دارد، درحالی‌که موشواره به شما اجازه می‌دهد روی یک هدف اشاره کنید. مطمئن شوید روی هدفتان کلیک نکنید یا فوکوس از ناحیه مقدار رنگ جابه‌جا خواهد شد و دیگر به شما اجازه نمی‌دهد مقادیر را تغییر دهید تا زمانی که دوباره فوکوس شود.
نمای کلی CSS
تا این مرحله، Chrome DevTools روش‌هایی برای نگاه کردن به یک جفت رنگ در هر بار ارائه کرده است، اما نمای کلی CSS می‌تواند کل صفحه شما را بخزد و همه جفت‌های غیرقابل‌دسترس را به‌طور هم‌زمان ارائه دهد:
در این پست درباره این ویژگی بیشتر بخوانید: نمای کلی CSS: شناسایی بهبودهای احتمالی CSS یا ویدیو Jecelyn Yeen را در YouTube در مجموعه «نکات DevTools» تماشا کنید که به شما آموزش می‌دهد چگونه بهبودهای احتمالی CSS را با پانل «نمای کلی CSS» شناسایی کنید.
Lighthouse
Lighthouse ابزار ممیزی دیگری در Chrome DevTools است. این ابزار می‌تواند در صفحه‌تان بخزد و جفت‌های رنگی غیرقابل‌دسترس را گزارش کند. این بخش شامل نماگرفت‌های کوچکی از هر جفت رنگ برای بررسی شما است، چه آن‌هایی که قبول شده‌اند و چه آن‌هایی که رد شده‌اند. هر ترکیب ناموفقی بر امتیاز Lighthouse شما تأثیر منفی خواهد گذاشت.
این نتایج ممکن است به این شکل باشد:
کنسول جاوااسکریپت
شاید همه ابزارهایی که تاکنون فهرست شده‌اند در جایی که شما هستید وجود نداشته باشند. شاید جایی که هستید (تمام روز) جاوا اسکریپت باشد. این آزمایشی است که می‌توانید امتحان کنید. پانل «مشکلات» کنسول می‌تواند به‌طور مداوم هرگونه مشکل دسترس‌پذیری کنتراست رنگ را درحین ساخت گزارش دهد. این ویژگی را در «تنظیمات > آزمایش‌ها» فعال کنید، همان‌طور که در زیر نشان داده شده است:
سپس قاب «مشکل» را باز کنید و ببینید آیا چیزی پیدا کرده است یا نه. اگر این اتفاق بیفتد، می‌توانند این‌گونه به‌نظر برسند:
شبیه‌سازی کوررنگی
درحالی‌که موضوع کنتراست رنگ و اطمینان از جفت‌های رنگی قابل‌دسترس است، شایان ذکر است که ابزار شبیه‌سازی نقص بینایی را معرفی کنیم. این کار رنگ‌ها یا ظاهر طرحتان را تغییر می‌دهد تا نتایج انواع مختلف کوررنگی را نشان دهد و به شما فرصت می‌دهد طرحتان را اصلاح کنید تا رنگ تنها راهی نباشد که تجربه کاربری با کاربر ارتباط برقرار می‌کند.
استفاده انحصاری از رنگ برای نمایش اطلاعات، مثلاً قرمز برای بد و سبز برای خوب، روال دسترس‌پذیری ایمنی نیست. برخی افراد رنگ‌های سبز یا قرمز را یکسان نمی‌بینند و این ابزار شبیه‌سازی به شما کمک می‌کند این موضوع را تجربه کنید و به‌خاطر بسپارید.
شبیه‌سازی اولویت سیستم کنتراست رنگ
کاربران به‌طور فزاینده‌ای تنظیمات کنتراست را در سیستم‌عامل خود تغییر می‌دهند، که به آن‌ها امکان می‌دهد کنتراست کمتر یا بیشتری را در واسط کاربر خود درخواست کنند. CSS می‌تواند از این تنظیم استفاده کند، درست همان‌طور که می‌تواند از اولویت‌های زمینه روشن یا تیره استفاده کند. Chrome DevTools امکان شبیه‌سازی این اولویت را ارائه می‌دهد تا طرح‌ها بتوانند بدون تغییر دادن تنظیمات از سیستم، درخواست کاربر را آزمایش کنند و با آن سازگار شوند.
امتحان کردن WCAG 3.0 APCA
آزمایش دیگری که می‌توانید انجام دهید، آزمایش جفت‌های رنگی با سیستم امتیازدهی نسبت رنگ APCA آزمایشی است. این ویژگی که ازطریق «تنظیمات > آزمایش‌ها» فعال می‌شود، سیستم نسبت WCAG 2.1 را با الگوریتم جدیدتر و بهبودیافته‌تری برای بررسی کنتراست جایگزین می‌کند و به شما امکان می‌دهد نتایج آن را درحین پیشرفت پیشنهاد به‌سمت استاندارد پیش‌نمایش کنید.
پس‌از فعال کردن، از نکته‌ابزار بازرسی نقطه یا انتخابگر رنگ برای دیدن امتیاز جفت‌سازی رنگ استفاده کنید و ببینید آیا قبول می‌شود یا نه:
نتیجه‌گیری
کنتراست رنگ بخش مهمی از پازل دسترس‌پذیری در وب است، و رعایت آن باعث می‌شود وب برای بیشترین تعداد افراد در متنوع‌ترین شرایط قابل‌استفاده‌تر باشد. امیدواریم این سه ابزار به شما کمک کند تا بتوانید انتخاب‌های رنگی عالی داشته باشید.