Color Choice

[Boltgreywing]

I built this new color pallete for my website using the Level 3 RGB pattern. The pallete I had to work with consist of only 27 color options of which there is only 5 dark colors and 12 light ones which are usual by users with color deficiencies. The two darks I used are first red(800000) and first blue(000080). The two lights I used are second green first blue(00ff80), first red mixed with cyan (80ffff). I don't know how good these color combinations are for a petsite but the other colors I had to choose from were too shiny. I wanted to create sort of a calming interface.

View attachment 679

I don't know if this is the correct style to use but my color choices are kind of limited to just greens and blues with exceptions of 2 yellows and 1 red as well as white.

I'd like the communities advice on this before deciding on a particular color pattern to use for my websites default. I may give users the option latter to change the color pattern to something else if they so desire as long as the color pattern is see able by users with poor color sight.

Any advice?

 

[Pepper-Head]

@Boltgreywing I know you've posted about this challenge with palettes before, but I don't remember why you're only working from 27 colors? Is it specifically for people with colorblindness?

I did some googling to try and understand it better. This article seemed to imply it was more about shades, or values, that helped to differentiate a website for folks with color deficiencies. Contrast and different visual cues help to distinguish things, and I think you've definitely got contrast going on but the red+cyan is just really really strong and a little harsh on the eyes. I like the colors you picked for the "Welcome to Duelingpets" and the sidebar! The dark blue background looks a little dated to me, but otherwise isn't bad. I'd definitely say this is a big improvement from the other ones I remember! 

I found some other websites that helped me understand better, and they have some really good tips for designing websites that are friendly to the color impaired!

[ Colorblind Website Filter (test any website by URL) ]
[ Tips for Designing Colorblind Friendly Website ]
I also found some other palettes with some more earth tones and other less vibrant colors!

I think something that can also really help is tweaking the layout a little to rely less on color, and more on defined content areas. Maybe your site could benefit from having white or something where all the main text and content goes, and leave the color to the headers, sidebar, and background?

Please forgive me if I'm ignorant and listed any wrong information, I'm really interested in learning and helping, if I can!

 

[Boltgreywing]

@Boltgreywing I know you've posted about this challenge with palettes before, but I don't remember why you're only working from 27 colors? Is it specifically for people with colorblindness?

I did some googling to try and understand it better. This article seemed to imply it was more about shades, or values, that helped to differentiate a website for folks with color deficiencies. Contrast and different visual cues help to distinguish things, and I think you've definitely got contrast going on but the red+cyan is just really really strong and a little harsh on the eyes. I like the colors you picked for the "Welcome to Duelingpets" and the sidebar! The dark blue background looks a little dated to me, but otherwise isn't bad. I'd definitely say this is a big improvement from the other ones I remember! 

I found some other websites that helped me understand better, and they have some really good tips for designing websites that are friendly to the color impaired!

[ Colorblind Website Filter (test any website by URL) ]
[ Tips for Designing Colorblind Friendly Website ]
I also found some other palettes with some more earth tones and other less vibrant colors!

I think something that can also really help is tweaking the layout a little to rely less on color, and more on defined content areas. Maybe your site could benefit from having white or something where all the main text and content goes, and leave the color to the headers, sidebar, and background?

Please forgive me if I'm ignorant and listed any wrong information, I'm really interested in learning and helping, if I can!

@Pepper-Head: Its for color blind users. I am starting with the most restrictive color patterns so I kind of leaned to throwing red as a difference otherwise the whole color scheme would have been mixes of just green, and cyan or blue.

 

[Pepper-Head]

Thank you for that! Hmm, I still think there should be more white or light gray or something, and less of a reliance on color. Do you have an example of how this layout would look like on a content page? (explore page, my pets page, etc)

 

[Anoua]

I agree more white would be a great place to start.

I know you are just trying to learn things with the color palette limitations, and make your site with color blind users, which is great, but I really feel like you are approaching this wrong. 

Instead you might be better off developing a site without any colors (no saturation on the HSB scale) and so black, white, and any range of gray. Use that brightness variation to make sure things are visible. Then add in colors with the same brightness level for all the grays you used. The idea would be USE the grays, and not stick to black and white. 

Here is a color picker to reference,
https://www.webpagefx.com/web-design/color-picker/

It'll list a hex code for you at the top, and it also has the color in HSB (Hue, Saturation, and Brightness) and RGB (Red, Green, Blue) which are two different color formats or modes. When you move the circle all the way to the left the B under the HSB will go to zero. You can slide it up or down, but it'll always be zero, and you can see all the pure grays along with white and black. 

But say you have the gray range you want and decide to add a color, well move it over to the right a bit and you'll notice the S under HSB going up. That's the saturation. Right now you are using way high saturated colors, but that isn't really necessary and most of the time not really a good idea for your whole page, instead you probably want some variety. Just remember if you move it up or down you are changing the brightness level. The final thing to change is the Hue. That is the bar on the right with the black arrows. And that is what gives you the 'color' such as blue, and red etc.. 

Hues can be a key element with color blind users as well, and so should be considered, but the reality is, there are many kinds of color blindness, not just one. And some, though a small amount, are completely colorblind and so will only see the difference in brightness anyway. Which is why I think you start by focusing on the brightness more and less on the hue and saturation.

Anyway if you are still set to sticking with your color palette, definitely add in some more white or at least a lighter less saturated color for the main content area.

 

[Digital]

I would agree with @Anoua on the tactic, using a greyscale base, you can add colors as needed to then make a scheme that feels more adjusted to your sites purpose or theme.

Keep at it!

 

[Boltgreywing]

I would agree with @Anoua on the tactic, using a greyscale base, you can add colors as needed to then make a scheme that feels more adjusted to your sites purpose or theme.

Keep at it!

@Digital: I don't know how to create a grayscale base.

Thank you for that! Hmm, I still think there should be more white or light gray or something, and less of a reliance on color. Do you have an example of how this layout would look like on a content page? (explore page, my pets page, etc)

@Pepper-Head: I don't really have a content page available as I haven't applied these settings yet. I'd like to avoid grey on grey as I heard from some older people that they can't distinguish between two closely related gray colors. I could add white for the text portions. I want something that doesn't shine too much.

I agree more white would be a great place to start.

I know you are just trying to learn things with the color palette limitations, and make your site with color blind users, which is great, but I really feel like you are approaching this wrong. 

Instead you might be better off developing a site without any colors (no saturation on the HSB scale) and so black, white, and any range of gray. Use that brightness variation to make sure things are visible. Then add in colors with the same brightness level for all the grays you used. The idea would be USE the grays, and not stick to black and white. 

Here is a color picker to reference,
https://www.webpagefx.com/web-design/color-picker/

It'll list a hex code for you at the top, and it also has the color in HSB (Hue, Saturation, and Brightness) and RGB (Red, Green, Blue) which are two different color formats or modes. When you move the circle all the way to the left the B under the HSB will go to zero. You can slide it up or down, but it'll always be zero, and you can see all the pure grays along with white and black. 

But say you have the gray range you want and decide to add a color, well move it over to the right a bit and you'll notice the S under HSB going up. That's the saturation. Right now you are using way high saturated colors, but that isn't really necessary and most of the time not really a good idea for your whole page, instead you probably want some variety. Just remember if you move it up or down you are changing the brightness level. The final thing to change is the Hue. That is the bar on the right with the black arrows. And that is what gives you the 'color' such as blue, and red etc.. 

Hues can be a key element with color blind users as well, and so should be considered, but the reality is, there are many kinds of color blindness, not just one. And some, though a small amount, are completely colorblind and so will only see the difference in brightness anyway. Which is why I think you start by focusing on the brightness more and less on the hue and saturation.

Anyway if you are still set to sticking with your color palette, definitely add in some more white or at least a lighter less saturated color for the main content area.

@Anoua: I don't really know how to operate in this environment or how to colorize grayscale colors on the fly.

 

[Anoua]

If an older person person is not able to distinguish between the gray colors you pick, then they should be farther apart in brightness (the B on the HSB scale) as other people likely have trouble too. 

What specifically are you have trouble understanding and I can try and clarify if you want. As a quick example, you might use a white for the base (#FFFFFF), then you can use a light gray (#D1D1D1) for the headers maybe where the green is now. Then use colors around this range for the text (#242424) either black or dark grays. Then you can decide well I want my headers to be blue for instance. So go back to the color picker and put in your base color you picked (#D1D1D1), and then move the little circle to the right and move the bar to one of the blues and you can get something like this (#4D94D1) or this (#1771D1) which both have the same brightness as the initial gray, but a different hue and saturation value giving them their color. Hope that helps give you an idea of how you might do this on your own.

 

[Boltgreywing]

If an older person person is not able to distinguish between the gray colors you pick, then they should be farther apart in brightness (the B on the HSB scale) as other people likely have trouble too. 

What specifically are you have trouble understanding and I can try and clarify if you want. As a quick example, you might use a white for the base (#FFFFFF), then you can use a light gray (#D1D1D1) for the headers maybe where the green is now. Then use colors around this range for the text (#242424) either black or dark grays. Then you can decide well I want my headers to be blue for instance. So go back to the color picker and put in your base color you picked (#D1D1D1), and then move the little circle to the right and move the bar to one of the blues and you can get something like this (#4D94D1) or this (#1771D1) which both have the same brightness as the initial gray, but a different hue and saturation value giving them their color. Hope that helps give you an idea of how you might do this on your own.

@Anoua: My big problem is how do I say take for example gray color aaaaaa and replace it with 0000ff? I am developing a color scheme that kind of obosoletes everything here.

What is it does is css color: <%= getColorAtribute("Header") %>

What this does is take the rubyfied version of this color and apply it to css on the fly.

 

[Anoua]

@Anoua: My big problem is how do I say take for example gray color aaaaaa and replace it with 0000ff? I am developing a color scheme that kind of obosoletes everything here.

What is it does is css color: <%= getColorAtribute("Header") %>

What this does is take the rubyfied version of this color and apply it to css on the fly.

Well you wouldn't take aaaaaa and turn it into 0000ff exactly, but if you want it to be a red then you would insert the aaaaaa into the color picker, any will do, but this one is the one I am referencing,

https://www.webpagefx.com/web-design/color-picker/

Once  you do that in the above color picker the hue will already be red and you won't have to change it. So you can skip that step. But you will still have to change the saturation.

View attachment 755

You can do that in one of two ways. One way like I mentioned is to move the little white cirlce to the right, the farther you move it, the more saturated it'll be. The second way is to just put a value into the S field on the color picker, it starts at 0. But if you put 100 in, then you can get this color out #AA0000  it will be in the spot you put the aaaaaa in at the beginning.

View attachment 754

 

[Hare]

There's no universal color scheme for people with color blindness or other impairment, there will always be someone who can't see it well because there's so many different ways eyesight can be impaired. If you have different color themes, that's the best way to go! I would just make ones that are varied, have the default be one that looks best for your site.

 

[Nova]

I agree with @Hare; I think different color options would be the best way to go. Most of your users will probably not be colorblind, so when they log in and see a color pallet that is specifically designed for colorblind people, they may be turned off.

@Boltgreywing Is there a reason you are making the color scheme specifically for colorblind users? Have you considered making the  colors something easy on the eyes, but then having a button where the users can pick their own color schemes? I only suggest that because if you were to have such loud contrasting colors as your default, it may deter users from playing your game. That's why sites like Facebook use calming colors such as light blue; the psychology of colors makes it so that the user feels the need to stick around longer. But if you have the contrasting blues that you had, the user might think you just didn't know a lot about design (i.e. I didn't realize you were designing for colorblindness until I read more of the thread).

 

[Boltgreywing]

I agree with @Hare; I think different color options would be the best way to go. Most of your users will probably not be colorblind, so when they log in and see a color pallet that is specifically designed for colorblind people, they may be turned off.

@Boltgreywing Is there a reason you are making the color scheme specifically for colorblind users? Have you considered making the  colors something easy on the eyes, but then having a button where the users can pick their own color schemes? I only suggest that because if you were to have such loud contrasting colors as your default, it may deter users from playing your game. That's why sites like Facebook use calming colors such as light blue; the psychology of colors makes it so that the user feels the need to stick around longer. But if you have the contrasting blues that you had, the user might think you just didn't know a lot about design (i.e. I didn't realize you were designing for colorblindness until I read more of the thread).

@Nova: The main problem is if I don't have it by default then the color blind people will not be see anything on the site at all. I am trying to plan for color blind people first and if a normal user would like to change it later than can as well. One of the big reasons I am not a fan of white against blue is its a bit too grating. Its too bright.

There's no universal color scheme for people with color blindness or other impairment, there will always be someone who can't see it well because there's so many different ways eyesight can be impaired. If you have different color themes, that's the best way to go! I would just make ones that are varied, have the default be one that looks best for your site.

@Hare: how do the color blind use the site if it is not designed for them by default if they can't see the buttons or links?

Well you wouldn't take aaaaaa and turn it into 0000ff exactly, but if you want it to be a red then you would insert the aaaaaa into the color picker, any will do, but this one is the one I am referencing,

https://www.webpagefx.com/web-design/color-picker/

Once  you do that in the above color picker the hue will already be red and you won't have to change it. So you can skip that step. But you will still have to change the saturation.

View attachment 755

You can do that in one of two ways. One way like I mentioned is to move the little white cirlce to the right, the farther you move it, the more saturated it'll be. The second way is to just put a value into the S field on the color picker, it starts at 0. But if you put 100 in, then you can get this color out #AA0000  it will be in the spot you put the aaaaaa in at the beginning.

View attachment 754

 

[Hare]

Most people who have severe enough visual impairments (as in enough that they can't see certain things on basic websites) use assisitive technology like screen readers and other accessibility features that come with most devices (Apple especially). 

One of the neat features you can use is color modes. You can access them through Voiceover and other accessibility software. I've used them on my phone, computer, and CCTV (a device that helps visually impaired people read books etc.). From my experience, the color modes are pretty universal, they have the same ones accross different software and hardware (the basic grayscale, inverted, black background with yellow text, etc.). If you want to see examples, you can check out the accessibility features on any iPhone or Apple computer, Google them, or check out the color change options on this site: http://www.afb.org/myafbcolors.aspx

Here's a pic of my phone with inversion on. That's my favorite, personally. They have some other stuff like increase contrast, switch contrast, grayscale, etc. 

I can't speak for color blind people, I have a different visual impairment. Have you spoken to anyone with color blindness about it?

View attachment 756

 

[Nova]

@Boltgreywing Oh I see. I'm just afraid that unimpaired users might not stick around long enough to find out that there even is an option for different colors. You could potentially make a button that visually impaired player COULD see in order to change their color options? I know that you first and foremost want to design for a specific group of people and I think that's brilliant, but again I'm just afraid that most people would be turned off by the high-contrasting colors (psychology of colors and all that).

 

[Boltgreywing]

Most people who have severe enough visual impairments (as in enough that they can't see certain things on basic websites) use assisitive technology like screen readers and other accessibility features that come with most devices (Apple especially). 

One of the neat features you can use is color modes. You can access them through Voiceover and other accessibility software. I've used them on my phone, computer, and CCTV (a device that helps visually impaired people read books etc.). From my experience, the color modes are pretty universal, they have the same ones accross different software and hardware (the basic grayscale, inverted, black background with yellow text, etc.). If you want to see examples, you can check out the accessibility features on any iPhone or Apple computer, Google them, or check out the color change options on this site: http://www.afb.org/myafbcolors.aspx

Here's a pic of my phone with inversion on. That's my favorite, personally. They have some other stuff like increase contrast, switch contrast, grayscale, etc. 

I can't speak for color blind people, I have a different visual impairment. Have you spoken to anyone with color blindness about it?

View attachment 756

@Hare: I think this might be pretty helpful.

@Boltgreywing Oh I see. I'm just afraid that unimpaired users might not stick around long enough to find out that there even is an option for different colors. You could potentially make a button that visually impaired player COULD see in order to change their color options? I know that you first and foremost want to design for a specific group of people and I think that's brilliant, but again I'm just afraid that most people would be turned off by the high-contrasting colors (psychology of colors and all that).

@Nova: That is something I am going to have to figure out. I now have accessibility to a 64 color pallete that has fifteen dark colors and 32 light colors. So that will give a bit more versatility. I am working on a new one of 125 pallete with 58 light colors. Each time I make new discoveries the default color will change to the next one up. I have css now hooked up to a mysql database which I am currently testing.

 

[Nova]

@Boltgreywing Oh good! Definitely keep us posted; I'd love to check out the other color options when you have them available

 

[Boltgreywing]

@Boltgreywing Oh good! Definitely keep us posted; I'd love to check out the other color options when you have them available

@Nova: I have the high-contrast option right now almost officially working on my local computer. It still has a few bugs that need ironning out.

 

[Zrcalo]

imo, for me.. I have a lot of eye issues and usually stay away from sites that use colors in general. If the site's not really muted or in greytones with white being the predominant one, I cant use it. because the eyestrain is just too bad. 

typically when designing a site, you choose one accent color, and the rest are shades of white/grey or muted accent color. but its important to not use over-saturated colors.

just think about it this way..... look at the top most popular websites.... wikipedia, google, etc. and notice how they format their website... also look at even flightrising and on here... I say, to help color blind people and other people, just stick with simplicity.

with the colors in your screenshot as they are right now, I would not physically be able to use your site.

edit: 

evidently its called "color burn". where if you're staring at a color too long and move your eyes, the opposite of that color burns into your retina. thats why sites use white or greys as it doesnt do that. eyeburn can also affect how things on your site are viewed as well, and color bleed can really wreck things.

colorblind people can also see all ranges of greys and whites. and there are many many MANY different types of colorblind. If you want to cater to the colorblind, dont use colors.

actually what would probably be the most helpful is simply googling "bad web design" and looking at it under images, then googling "good web design" and looking at that to under images.