درباره ابزار کنترل کنتراست

همانطور که از اسم این ابزار پیداست، این ابزار کنتراست رنگ بین پیش زمینه و پس زمینه عناصری را که در صفحه هستند مطابق با WCAG2 بررسی می کند. رنگ جزء کلیدی در طراحی وب است و همچنین، نحوه استفاده از آن بر میزان دسترسی یک وب سایت یا برنامه تأثیر می گذارد. بنابراین، کنتراست رنگ یک جزء بسیار مهم برای ایجاد یک وب در دسترس تر برای همه کاربران است. برای اینکه متن شما خوانا باشد، کنتراست بین متن و پس زمینه باید زیاد باشد.

از این ابزار کنترل کنتراست می‌توانید برای تعیین اینکه آیا ترکیب رنگ های شما قابل دسترس هستند یا خیر و اینکه آیا ترکیب رنگی انتخابی شما نسبت کنتراست استانداردی دارد یا خیر استفاده کنید.

دسترسی به رنگ چیست؟

یک اصل اساسی طراحی در وب وجود دارد. این اصل، طراحی وب را برای همه بدون در نظر گرفتن سخت افزار، نرم افزار، زبان، مکان یا ناتوانی در دسترس قرار می دهد. هنگامی که وب به این هدف برسد، برای افرادی با طیف متنوعی از شنوایی، حرکت، بینایی و توانایی های شناختی نیز قابل دسترس خواهد بود. با این وجود، اگر وب‌سایت‌ها، برنامه‌ها، فن‌آوری‌ها یا ابزارهای طراحی ضعیف ساخته شده باشند، حتی توسط افراد بدون آسیب و ماهر یا خزنده‌های موتور جستجو (web crawler) نمی‌توان از آنها استفاده کرد.

کاربران باید بتوانند اطلاعاتِ رنگ های مختلف را در یک صفحه وب درک و دریافت کنند زیرا رنگ نقش مهمی هم در خوشایند بودن و هم در انتقال پیام دارد. دسترسی به رنگ بسیار مهم است زیرا به کاربران مبتلا به اختلالات بینایی مانند بینایی ضعیف یا کوررنگی در تشخیص صحیح عناصر محتوا و خواندن/مشاهده آنها کمک می کند. ابزار کنترل کنتراست، نسبت کنتراست رنگ‌های پس‌زمینه و متن را برای دسترسی امتحان می‌کند. رنگ بخش مهمی از طراحی وب است زیرا برای انتقال شخصیت، جلب توجه، نمادگرایی عمل و نشان دادن اهمیت استفاده می شود.

رنگ ها و ناتوانایی های مرتبط

کوررنگی یکی از مواردی است که هنگام انتخاب رنگ باید در نظر گرفته شود. کوررنگی حدود 8 درصد از مردم را تحت تأثیر قرار می دهد. پس، انتخاب رنگ های اشتباه می تواند صفحه شما را برای آنها غیرقابل خواندن کند. برای مثال قرمز و سبز دو رنگی هستند که جذابیت کمتری نسبت به بقیه دارند. به همین دلیل معمولاً از آبی و زرد استفاده می شود. چون این دو رنگ کنتراست بالا بین متن و پس زمینه را حفظ می‌کنند. همچنین، در طراحی خود فقط به رنگ به عنوان یک سیگنال بصری تکیه نکنید.

رنگ ها و متون

کنتراست برای متن بسیار حیاتی است. استفاده از رنگ های نادرست می تواند به میزان قابل توجهی خوانایی را کاهش دهد و به سرعت چشم خواننده را خسته کند. خواندنی ترین تایپوگرافی متن سیاه روی پس زمینه سفید است. آبی و سفید، و همچنین سیاه و زرد، دو ترکیب دیگر هستند که اغلب به راحتی قابل خواندن هستند. به عنوان مثال، خواندن متن سبز بر روی پس زمینه قرمز و یا برعکس، متن قرمز روی پس زمینه سبز برای هر فردی دشوار است. علاوه براین، از ترکیب قرمز و آبی احساس ارتعاش ایجاد می شود که می تواند خواندن را دشوار کند.

کنتراست رنگ چیست؟

به زبان ساده، کنتراست تفاوت بین دو رنگ است. هرچه فاصله دو رنگ از یکدیگر بیشتر باشد، کنتراست بین آنها بیشتر است. بنابراین، ترکیب های مکمل قوی ترین کنتراست را دارند، در حالی که ترکیب های مشابه ضعیف ترین کنتراست را دارند.

رنگ‌های متضاد، که به عنوان رنگ‌های مکمل نیز شناخته می‌شوند، رنگ‌هایی از بخش‌های مخالف چرخه رنگ هستند. رنگ هایی که در چرخه رنگ اصلی به طور مستقیم روبروی یکدیگر قرار دارند، حداکثر کنتراست را ارائه می دهند.

رنگ ها می توانند از نظر رنگ‌فام، ارزش و اشباع متضاد باشند، اما انواع مختلفی از تضادها توسط نظریه پردازان رنگ در طول سال ها تعیین شده است. در اینجا برخی از مهمترین آنها آورده شده است:

• کنتراست رنگ‌فام ها

ترکیب چرخه رنگی که در بالا مورد بحث قرار گرفت، بیشترین ارتباط را با کنتراست رنگ دارد. گفتیم که هر چه کنتراست بین دو رنگ بیشتر باشد، فاصله آنها از هم بیشتر می شود. در نتیجه، رنگ‌های مکمل بیشترین کنتراست را دارند، در حالی که رنگ‌های مشابه کمترین. وقتی از تایپوگرافی صحبت می شود، خودِ تضاد رنگ به تنهایی کافی است تا متن را به اندازه دلخواه خوانا کند. اگر اینطور است، ممکن است بخواهید کنتراست رنگ‌فام را با نوع دیگری از کنتراست ترکیب کنید.

تضاد بین رنگ های گرم و سرد نمونه خاصی از کنتراست رنگ است. به دلیل نحوه عملکرد چشم انسان به نظر می رسد رنگ های سرد دورتر از یکدیگر به نظر می رسند، در حالی که رنگ های گرم تر نزدیک تر هستند. این نشان می دهد که استفاده از رنگ گرم برای نمادگرایی گزینه مناسبی است.

• کنتراست ته‌رنگ و سایه

وقتی نوبت به ایجاد تفاوت های عظیم می رسد، کنتراست مقدار (value) کاملاً کارآمد است. شدیدترین کنتراست، یعنی سیاه و سفید، را می توان به عنوان کنتراست مقدار توصیف کرد. تفاوت‌های زیاد در روشنایی عموماً برای چشم‌ها خوشایند است، در حالی که کنتراست‌هایی با value پایین می‌توانند برای واریانس‌های ظریف‌تر مانند پس‌زمینه موثر باشند.

• کنتراست اشباع

برای عناصر طراحی که نیاز به تمرکز زیاد ندارند، اغلب کنتراست اشباع ترجیح داده می شود. شفافیت را می توان به عنوان مجموعه ای از رنگ ها با اشباع متفاوت در پس زمینه خاکستری تعریف کرد. این تکنیکی است که می توان از آن برای ایجاد یک اثر جذاب استفاده کرد.

• ترکیب کنتراست ها

در حالی که هر یک از کنتراست‌های ذکر شده در بالا می تواند به تنهایی و به طور موثر مورد استفاده قرار گیرد، استفاده از ترکیبی از آنها، به ویژه برای متن، معمول تر است. این یک ترکیب واضح ایجاد می کند که می تواند چشم را خسته کند. با تنظیم مقدار و اشباع، می توانید ترکیبی بسازید که برای چشم بسیار جذاب تر و قابل خواندن باشد.

بطور کلی کار کردن بر خلاف ارزش های ذاتی رنگ ها می تواند عواقب منفی داشته باشد. به عنوان مثال، زرد به طور طبیعی روشن تر از رنگ مکمل آن، آبی است. داشتن یک ترکیب زرد-آبی عجیب خواهد بود.

نسبت کنتراست رنگ چیست؟

نسبت کنتراست رنگ به تفاوت بین سطوح نور در پیش زمینه و پس زمینه اشاره دارد که معیاری از کنتراست در دسترسی به وب است. با توجه به این واقعیت که رنگ ها با استفاده از کدهای منحصر به فرد در اینترنت تولید می شوند، ما می توانیم به طور دقیق آن کدها را با یکدیگر مقایسه و تجزیه و تحلیل کنیم و در نتیجه یک نسبت به دست آوریم.

چرا کنتراست مهم است؟

گاهی اوقات پس از گذراندن مدت زمان طولانی زیر نور خورشید یا خستگی ناشی از استفاده از رایانه یا موبایل، چشمان شما مشتاق یک صفحه نمایش متضاد یا وارونگی رنگ است. افراد کوررنگ اغلب ممکن است به رنگ‌ها یا سایه‌های نور خاصی حساس شوند و حتی زمانی که رنگ متن و پس‌زمینه صفحه‌ای که به آن نگاه می‌کنند، کنتراست نداشته باشد، درد فیزیکی را تجربه کنند.

کنتراست بین سفید و سیاه بالاترین و مطمئن ترین سطح کنتراست بین دو رنگ است. اما گاهی ممکن است بسته به شرایطی، تمایلی به استفاده از این دو رنگ نداشته باشید و به دو رنگ دیگر نیاز داشته باشید که بهترین کنتراست را برای راحتی چشم داشته باشند.

کنتراست رنگ برای دسترسی به وب چه معنایی دارد؟

استفاده از رنگ‌های مکمل در وب در مورد یافتن سایه‌هایی است که کنتراست کافی بین محتوا و پس‌زمینه را برای افراد دارای اختلالات بینایی کم یا کمبود رنگ ایجاد می‌کند. رنگ‌ها نه تنها باید محدود به رنگ‌های متضاد باشند، بلکه باید سطحی از کنتراست در متن بدنه، لوگوها و نمودارهای ضروری یا سایر قطعات محتوا وجود داشته باشد.

WCAG چیست؟

کنسرسیوم وب جهانی (W3C) دستورالعمل‌های دسترسی به محتوای وب (WCAG) را با همکاری افراد و سازمان‌ها از سراسر جهان، با هدف ارائه یک استاندارد مشترک واحد برای دسترسی به محتوای وب که نیازهای افراد، سازمان‌ها و دولت ها در سطح بین المللی را برآورده می‌کند، توسعه داد.

WCAG توضیح می دهد که چگونه می توان محتوای وب را برای افراد دارای معلولیت در دسترس تر کرد. «محتوای وب» به طور کلی به اطلاعات موجود در یک صفحه وب یا برنامه وب گفته میشود، از جمله:
اطلاعات طبیعی مانند متن، تصاویر و صداها.
کد یا نشانه گذاری که ساختار، ارائه و غیره را تعریف می کند.

بهترین سطح نسبت کنتراست رنگ

در WCAG2.0، استاندارد کنتراست رنگ، تنظیم الزامات سطوح انطباق AA و AAA را شرح می‌دهد. حداقل نسبت کنتراست برای متن با اندازه معمولی 4.5:1 مطابق با دستورالعمل های دسترسی به محتوای وب (WCAG) است.

کنتراست بین دو رنگ توسط یک سیستم درجه بندی که به عنوان 'سطوح انطباق' شناخته می شود اندازه گیری می شود. قوی ترین درجه ممکن AAA است و این با نسبت کنتراست 7:1 به دست می آید. W3C بیان می‌کند که اگرچه دستیابی به بالاترین سطح انطباق در کل یک وب‌سایت همیشه ممکن نیست، اما هدف باید دستیابی به بالاترین سطح انطباق در بخش‌های حیاتی در سراسر یک سایت، از جمله سرفصل‌ها و متن اصلی باشد.

So:

بخش 1.4.3 کنتراست (حداقل):

طح AA برای متن، زیرمتن یا کپی کلی، هدف نسبت کنتراست تقریباً 4.5:1 برای سرصفحه یا متن بزرگتر (اندازه قلم 18pt یا 14pt پررنگ)، هدف یک نسبت کنتراست تقریباً 3:1.

بخش 1.4.6 کنتراست (بهبود):

سطح AAA برای مخاطبان مورد انتظاری که دارای سنین بالا یا کم بینا هستند توصیه می شود. برای متن بدنه، نسبت کنتراست را می توان از 4.5:1 به 7:1 افزایش داد.