نحوه ایجاد پالت های رنگی در دسترس برای وب سایت خود (راهنمای ابزارهای رایگان)

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

چه چیزی یک پالت را در دسترس قرار می دهد؟

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

دستورالعمل‌های دسترسی به محتوای وب (WCAG) - استاندارد عمومی پرکاربرد برای دسترسی به وب - دو هدف اصلی را پیشنهاد می‌کند:

• 4.5:1 برای متن بدنه عمومی. این سطحی است که اکثر وب‌سایت‌ها باید برای پاراگراف‌ها، برچسب‌های فرم و متن‌های کوچک رابط کاربری در نظر بگیرند.
• 3:1 برای متن‌های بزرگ (حدود 18 یا 14 پوینت بولد و بالاتر) و عناصر گرافیکی مهم مانند حاشیه دکمه‌ها و آیکون‌ها.

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

مرحله 1: رنگ پایه خود را انتخاب کنید

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

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

مرحله 2: پالت را بسازید

یک پالت رنگی وجود ندارد. یک پالت وب سایت کاربردی باید پنج نقش را ایفا کند:

• یک رنگ اصلی — لنگر برند شما از مرحله 1. برای دکمه‌های اصلی، تیترهای کلیدی و لحظات برند استفاده می‌شود.
• دو تا سه سایه و ته رنگ از رنگ پایه — سایه‌های تیره‌تر برای حالت‌های شناور و پاورقی، رنگ‌های روشن‌تر برای پس‌زمینه‌ها و هایلایت‌ها. می‌توانید با تنظیم روشنایی HEX پایه خود به این موارد دست یابید، که می‌توانید انتخاب رنگ من می توانم به صورت بصری.
• یک رنگ تاکیدی — یک رنگ متضاد که به مقدار کم برای فراخوان‌های عمل، هشدارها یا هایلایت‌ها استفاده می‌شود. باید بدون رقابت با رنگ اصلی، توجه را جلب کند.
• یک رنگ تیره خنثی - برای متن اصلی. #1F2937 یا #111827 زیرا رنگ‌های نزدیک به مشکی ملایم‌تر و مدرن‌تر از مشکی خالص به نظر می‌رسند و به زیبایی با پس‌زمینه‌های سفید جفت می‌شوند.
• یک نور خنثی - برای پس‌زمینه‌ها و کارت‌ها. #F9FAFB یا #F3F4F6 رنگ‌هایی مانند سفید مایل به سفید و خاکستری روشن صفحات را مطبوع نگه می‌دارند و مکان‌هایی برای نگهداری محتوا در اختیار شما قرار می‌دهند.

اگر انتخاب رنگ تاکیدی دشوار است، از ایده های ساده هماهنگی رنگ استفاده کنید. یکی آنالوگ ها رنگ تأکیدی در کنار رنگ اصلی شما در چرخه رنگ قرار می‌گیرد (برای مثال، فیروزه‌ای با آبی) - آرامش‌بخش و هماهنگ. مکمل این رنگ تأکیدی در مقابل رنگ پایه شما (نارنجی در مقابل آبی) قرار می‌گیرد - جسورانه و جلب توجه‌کننده، و آن را برای دکمه‌هایی که می‌خواهید افراد روی آنها کلیک کنند، عالی می‌کند. در هر صورت جواب می‌دهد؛ این تأکید فقط باید عمدی به نظر برسد، نه تصادفی.

مرحله 3: هر جفت متن/پس‌زمینه را بررسی کنید

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

برای تمام بدنه و متن‌های کوچک 4.5:1 به دستورالعمل پایبند باشید. دستورالعمل 3:1 حداقل برای تیترهای بزرگ است - اما حتی در آنجا هم، نسبت 4.5:1 حتی بهتر است و هرگونه شکی را از بین می‌برد. به دکمه‌ها توجه ویژه داشته باشید: یک دکمه آبی زیبا با متن سفید فقط در صورتی زیبا است که افراد بتوانند برچسب آن را بخوانند. حالت‌های پیش‌فرض، حالت شناور و غیرفعال را آزمایش کنید، زیرا رنگ‌های شناور اغلب روشن‌تر هستند و می‌توانند پایین‌تر از دستورالعمل قرار گیرند.

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

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

مرحله 4: گرادیان‌ها و پوشش‌های تصویر را آزمایش کنید

بررسی رنگ های ثابت آسان است. گرادیان‌ها مشکل هستند، زیرا کنتراست بین متن و پس‌زمینه در امتداد گرادیان تغییر می‌کند - در یک طرف قوی‌تر و در طرف دیگر ضعیف‌تر. اصل ساده است: متن شما باید از بررسی کنتراست در هر دو انتهای گرادیان عبور کند، نه فقط در وسط یا در عمیق ترین قسمت.

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

این اصل است. متن روی تصاویر این موضوع در مورد بنرهای تبلیغاتی نیز صدق می‌کند. روشنایی یک تصویر بسیار متفاوت است - متن سفیدی که در مقابل یک جنگل تاریک کاملاً خوانا است، ممکن است در همان تصویر در مقابل یک آسمان روشن ناپدید شود. یک راه حل قابل اعتماد، یک لایه تیره است: یک لایه تیره نیمه شفاف (اغلب سیاه با کدورت 40 تا 60 درصد) بین تصویر و متن. این کار کنتراست را در سراسر تصویر یکنواخت می‌کند تا عنوان شما صرف نظر از آنچه در پشت آن است، خوانا باقی بماند.

مرحله 5: پالت خود را تبدیل و مستند کنید

وقتی پالت شما از هر بررسی سربلند بیرون آمد، آن را یادداشت کنید - شما (و هر طراح یا توسعه‌دهنده‌ای که با او کار می‌کنید) در آینده از شما تشکر خواهید کرد. زبان رنگ بومی وب HEX است (مثلاً #2563EB) که در CSS از آن استفاده خواهید کرد. گاهی اوقات به جای آن RGB می‌خواهید - برای مثال، rgba() هنگام افزودن شفافیت با یا زمانی که یک ابزار طراحی انتظار آن را دارد. ما تبدیل HEX به RGB فوراً بین این دو ترجمه می‌کند، بنابراین هرگز مجبور نیستید دستی تبدیل کنید.

در اینجا یک نمونه کوچک از مرجع سبک وجود دارد که می‌توانید مستندات خود را بر اساس آن مدل‌سازی کنید:

• اصلی (آبی روشن): #2563EB
• تیره اصلی (هاور/فوتر): #1D4ED8
• نور اولیه (رنگ/برجسته): #DBEAFE
• تأکید (فراخوان برای اقدام): #F59E0B
• متن (خنثی تیره): #1F2937
• پس‌زمینه (نور خنثی): #F9FAFB

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

حرکت سریع زمانی که گیر می کنید

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

5 اشتباه رایج در انتخاب رنگ که باید از آنها اجتناب کنید

• متن خاکستری روشن روی زمینه سفید. جنایتکار کلاسیک در ماکت ها زیبا به نظر می رسد و در زندگی واقعی غیرقابل خواندن به نظر می رسد، به خصوص در صفحه نمایش کم نور گوشی. اگر متن بدن شما خاکستری است، آن را خاکستری تیره کنید (#374151 یا عمیق‌تر از آن).
• فقط از قرمز و سبز برای نشان دادن معنی استفاده کنید. کوررنگی قرمز/سبز رایج ترین نوع است، بنابراین «قرمز به معنای خطا، سبز به معنای موفقیت» برای بخش قابل توجهی از کاربران ناموفق است. رنگ‌ها را با نمادها، برچسب‌ها یا متن مرتبط کنید - قرمز ✕ و سبز ✓ - بنابراین معنی هرگز به رنگ بستگی ندارد.
• متن جایگزین با کنتراست پایین. متغیرهای فرم معمولاً کوچک و سبک هستند، که آنها را به مظنونین اصلی تبدیل می‌کند. آنها را مانند هر متن دیگری آزمایش کنید، یا مطمئن شوید که هر فیلد دارای یک برچسب واقعی و با کنتراست بالا نیز هست.
• نادیده گرفتن حالت تاریک اگر سایت شما تم تیره ارائه می‌دهد، پالت رنگ شما به یک تغییر دیگر نیاز دارد: رنگ‌هایی که روی سفید خوب عمل می‌کنند ممکن است روی یک پس‌زمینه تیره خوب عمل نکنند. هر دو تم بررسی کنتراست با بررسی کنید.
• رنگ‌های رقیب خیلی زیادن. رنگین‌کمانی از رنگ‌های با شدت یکسان به این معنی است که هیچ چیز برجسته نیست - و هر رنگ جدید مجموعه‌ای دیگر از جفت‌ها برای تأیید است. یک رنگ پایه، یک رنگ تأکیدی و رنگ‌های خنثی تقریباً برای هر مکانی کافی هستند.

سوالات متداول

آیا برای ایجاد یک پالت رنگی قابل دسترس، باید طراح باشم؟

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

آیا یک پالت رنگیِ قابل دسترس، خلاقیت من را محدود می‌کند؟

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

آیا نسبت کنتراست 4.5:1 یک الزام قانونی است؟

بستگی به محل کار شما و مخاطبانتان دارد. اعداد 4.5:1 و 3:1 از WCAG گرفته شده‌اند، استاندارد دسترسی عمومی که توسط بسیاری از قوانین و سیاست‌ها در سراسر جهان به آن ارجاع داده می‌شود. صرف نظر از جزئیات قانونی، رعایت آنها صرفاً یک رویه خوب است - این امر باعث می‌شود سایت شما توسط افراد بیشتری قابل استفاده باشد.

آیا می‌توانم کنتراست یک وب‌سایت موجود را بررسی کنم؟

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

همین حالا امتحان کنید: رایگان انتخاب رنگ · رایگان بررسی کنتراست · رایگان سازنده گرادیان · رایگان تبدیل HEX به RGB · رایگان پالت رنگ تصادفی