Designing websites can be fun, challenging and exciting. Even if you are just managing the process behind the website design, it is important to be aware of best practices of color use in web design.
Color is one of the most powerful tools when designing. Color can introduce personality into your web page, it can bring across your brand and your message, it can make the user feel more at ease. But it can also alienate and confuse people - imagine being color blind and navigating a site that hasn’t thought about this intricacy.
Have you considered your end user in your color choice for your web design? Other factors that you should take into consideration are how our brains see color, the way color affects usability, and the cultural connotations of color. Color plays a role in the readability and user experience. For instance, overlaying colors on opposite ends of the color wheel can make reading easier.
Designing with accessibility in mind is not a barrier to innovation, guidelines to help you design for a diverse set of end users will challenge you to find the best solution to your design problem.
Some tips for designing with color accessibility in mind
Don’t use color as the only visual means of conveying information
Find and use alternative visual means to convey information - Use both colors and symbols. For instance, a required field left blank could be conveyed with a red border. However, if you are finding color difficult to visualise, then this wouldn’t be too useful. Another method would be to include a hazard triangle in the empty field to visualise and convey that the field has been left blank. This will help users who are unable to, or have difficulty with, distinguishing colors.
Always ensure sufficient contrast between text and background
Ideally it is said that the contrast ratio between text and its’ background should be at least 4.5 to 1. If your font is at least 24px or 19px bold, the minimum drops to 3 to1.
But why you ask? Imagine if you are color blind, if the contrast is not there, the text and the background will just fade into each other.
Quick rule of thumb - don’t overlay light-on-light or dark-on-dark and do overlay colors with varying values to help with readability.
Keep it minimal
Limit the color palette you use for your website - allow for fewer instances of confusion. Stick to a core group or core set of colors to best represent your design or brand. Minimalistic design is timeless and a current trend - it also is very useful if you are designing for color accessibility.
Avoid these color combinations
Here are a few combinations to avoid - depending on the type and severity of a user’s color blindness - these combo’s may be a potential nightmare
-
Green and red;
-
Blue and purple;
-
Green and brown;
-
Green and blue;
-
Light Green and yellow;
-
Blue and grey;
-
Green and grey;
-
Green and black;
Once the database has been created, bake models and controllers as normal using:
