سؤال

أنا أرسم زر اختيار اللون وأنا أبحث عن صيغة لطيفة وبسيطة للحصول على لون نص جيد (مقدمة) لون خلفية معينة في RGB.

حاول بسيطة أن تأخذ لون التكمل ولكن هذا سيؤدي إلى إنتاج زر غريبة للألوان مثل اللون الأزرق النقي أو الأحمر النقي.
هل هناك شيء معروف جيدا بهذا يفعل ذلك؟

إذا كان يهم على الإطلاق، فأنا أستخدم QT.

هل كانت مفيدة؟

المحلول

للحصول على أقصى قدر من الوضوح، تريد تباين سطوع أقصى دون الدخول إلى الأشكال التي لا تعمل معا. الطريقة الأكثر اتساقا للقيام بذلك هي الالتزام أسود أو أبيض للحصول على لون النص. قد تكون قادرا على التوصل إلى مخططات إرضاء جماليا، ولكن لن يكون أي منهم أكثر قضايا.

لاختيار بين الأسود أو الأبيض، تحتاج إلى معرفة سطوع الخلفية. هذا يحصل على أكثر تعقيدا قليلا، بسبب عاملين:

  • السطوع المتصور للانتخابات التمهيدية الفردية الأحمر والأخضر والأزرق ليست متطابقة. أسرع نصيحة يمكنني تقديمها هي استخدام الصيغة التقليدية لتحويل RGB إلى Gray - R * 0.299 + G * 0.587 + B * 0.114. هناك الكثير من الصيغ الأخرى.

  • إن منحنى Gamma المطبق على الشاشات يجعل القيمة الرمادية الوسطى أعلى مما تتوقعه. يتم حل هذا بسهولة باستخدام 186 كقيمة الوسطية بدلا من 128. أي شيء أقل من 186 يجب أن يستخدم النص الأبيض، أي شيء أكبر من 186 يجب أن يستخدم النص الأسود.

نصائح أخرى

أنا لا خبير في أشياء البرمجة المتعلقة RGB، ولكن من منظور المصمم، في كثير من الأحيان يكون اللون الأكثر قراءة سيكون مجرد أخف وزنا (إذا كان لون الخلفية مظلمة) أو أغمق (إذا كان لون الخلفية فاتح) إصدار نفس الظل.

في الأساس، كنت تأخذ قيم RGB الخاصة بك وإذا كانت أقرب إلى 0 (مظلمة)، فأنت تدفعها مبلغا متساويين اللون الأمامي الخاص بك، أو العكس بالعكس إذا كان ضوء BG.

يمكن أن تكون الألوان التكملة بالفعل مؤلمة حقا على عيون قابلية القراءة.

الاستفادة من الخطوط العريضة للضواحي

إذا بقلم "لون نص جيد (مقدمة)" أنت تنوي ذلك وضوح أغراض عندما يختار المستخدم any background colour, ، يمكنك دائما إنتاج نص أبيض وجود مخطط أسود. سيكون من المقروء على أي خلفية صلبة أو منقوشة أو متدرجة، من الأسود عبر أبيض وأي شيء بينهما.

enter image description here

حتى لو كان هذا لا يصل إلى علامة نيتك، أعتقد أنه من المفيد نشر هنا لأنني جئت تبحث عن حلول مماثلة.

بناء على رأس رد مارك، إليك بعض رمز الروبي الذي سيعمل العمل

rgbval = "8A23C0".hex
r = rgbval >> 16
g = (rgbval & 65280) >> 8
b = rgbval & 255
brightness = r*0.299 + g*0.587 + b*0.114
return (brightness > 160) ? "#000" : "#fff"

أنت أفضل حالا مع الفرق السامي في اللمعان. بشكل عام، الخلفيات الملونة مع نص ملون تمتص قابلية القراءة، وإيذار العينين بمرور الوقت. الألوان الملونة خفيفة (على سبيل المثال في HSB، S ~ 10٪، B> 90٪) مع النص الأسود يعمل بشكل جيد، أو نص ملون خفيف فوق خلفية سوداء. سأظل بعيدا عن التلوين على حد سواء. النص الداكن (ب ~ 30٪، S> 50٪) مع تلوين خفية على خلفية بيضاء يمكن أن يكون أيضا على ما يرام. النص الأصفر (العنبر) على خلفية زرقاء عميقة له قابلية قراءة ممتازة، وكذلك العنبر أو الأخضر على الأسود. هذا هو السبب في أن dumbterms القديم (VT100، VT52، إلخ) ذهب لهذه الألوان.

إذا كنت بحاجة حقا إلى القيام بالألوان على اللون ل "نظرة"، فيمكنك عكس كل من H و B، أثناء تثبيت التشبع عند مستوى معتدل إلى مستوى منخفض.

ملاحظة أخيرة: إذا كان لديك خلفية رمادية بنسبة 50٪، فقم بإعادة النظر في واجهتك. أنت تسرق نفسك من نصف نطاقك الديناميكي! كنت تنقل المستخدمين المنخفضين الرؤية، بما في ذلك أي شخص أكثر من 35 ...

غالبا ما تبدو مجموعات الألوان فظيعة عند عدم اختيارها بعناية. لماذا لا تستخدم إما أبيض أو أسود للنص، اعتمادا على سطوع اللون. (سوف تحتاج إلى تحويل إلى HSB أولا.)

أو اسمح للمستخدم باختيار نص أسود أو أبيض.

أو استخدام مجموعات محددة مسبقا. هذا هو ما تفعله Google في منتجها التقويم.

لقد كنت أبحث عن إجابة Simailr وتوصلت عبر هذا المنشور وبعض الآخرين الذين اعتقدت أنني أشاركهم. وفق http://juicystudio.com/services/luminoussontrastratio.php#specify. يتطلب "معيار النجاح 1.4.3 من WCAG 2.0 أن يقدم العرض المرئي للنصوص والصور النصية نسبة تباين لا تقل عن 4.5: 1" مع بعض الاستثناءات. يتيح لك هذا الموقع وضع ألوان في المقدمة والخلفية لحساب تناقضها، على الرغم من أنه سيكون من المفيد أن يقترح البدائل أو النطاقات.

واحدة من أفضل المواقع التي وجدتها لتصور التباين http://colorizer.org/ يتيح لك ضبط جميع أنواع الموازين الملونة تقريبا (RGB، CMYK، إلخ) في نفس الوقت، ثم يوضح لك النتيجة على الشاشة، مثل النص الأبيض على خلفية صفراء.

أنا عادة ننظر إلى ملكمات اللون، لديهم أيضا عجلات مكملة الألوان للمساعدة

http://www.makart.com/resources/artclass/cwheel.html.

إذا كان لونك هو HSL، ففي Hue بنسبة 180 درجة للحساب اللائق

أشعر أن التحويل إلى HSV قد يكون السبيل، لكن IMO تغيير هوى ستبدو غريبا. سأحاول الحفاظ على HUE و LUDDLING ذات القيمة وربما تشبع (أزرار حمراء خفيفة مع نص أحمر داكن ... HM يبدو مخيفا :-)).

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top