CakeDC Blog

TIPS, INSIGHTS AND THE LATEST FROM THE EXPERTS BEHIND CAKEPHP

Color Accessibility – UX Best Practices for Using Color in Design

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;

Latest articles

Simplicity is important - here’s why

When it comes to web design, simplicity is not valued enough. Simplicity is important - but why? Simplicity reduces navigation confusion, makes the website look more sophisticated and can help in increasing site conversions (sign ups, contacts). All too often, web designers tend to miss the point of simplicity and over do the amount of information given on a single page - the need to get everything across at once can seriously hinder how much a website visitor is able take in. Over complicated pages can lead to higher than average bounce rates or lower on-page conversions. We thought we’d share with you some top tips to simplify your website.

  • Keep things along the 80-20 rule
    • Use the Pareto principle which is that 80% of the effects come from 20% of the causes. This means taking away as much as you can from your design that will not lead to any type of conversion. Take things back to the bare essentials and make those work properly
  • Embrace few colors in your theme
    • Does a monochrome color scheme work for you? If not, try out as few colors as possible. Work towards a design that requires less effort for your website visitor to process. Fewer colors will also give your site a sleek, classic look
  • Keep copy short and sweet
    • Embrace compelling copy but keep things shorter and to the point. Make your point quickly and keep things easy-to-read by sticking to a few key points. Use shorter sentences, and keep paragraphs to a maximum of 3-4 sentences for easy reading.
  • Fix your navigation
    • Often many sites have over complicated and lengthy navigation options. Remember to include navigation to your list of things to simplify today. Keep important and key pages in your navigation bar. Remove excess clutter and keep all navigation menus visible. Other key things to keep in mind is the use of universal icons as well as ensuring a sitemap in your footer - these are all standard items that visitors look for.

How Much Does it Cost to Design a Site?

If you are in the market for a website or application, it can sometimes be daunting. Being unsure of where to start, which development firm to use or how much the whole process is going to cost you can be truly overwhelming. And then there are those horror stories of others, who selected a developer based solely on cost (the cheapest quote perhaps) and ended up majorly down the hole with their budgets, while owning a unfinished website. Whether you are in the market for a website application with a specific outline and goal, or have a rough idea of what you need your application to do, how do you go about finding the best selection for you? And then how do you know that whoever you select is going to deliver what you want and in the time frame that you need it? And then, not knowing how to code yourself, you can land up frustrated at not understanding the process - especially if your development team gives you the runaround. At CakeDC, we are committed to a transparent workflow - we've created our own git workflow (MIT license) and we've used it successfully with our clients for 3+ years and dozens of projects. We use it to accelerate growth and innovation providing the highest quality application development. What sets CakeDC apart from others is that our experts listen closely to your needs. Second, we formulate a roadmap of milestones based on your specifications. Third, we offer guidance while delivering the highest quality results in a fraction of other developer’s time, by doing things The Right Way™ So how much is it going to cost you? Well this is of course dependent on what you project scope includes, however, we will work with you in determining the best package to suit your requirements. You can check out all of our rates and packages here. Ready to get your project started? Reach out to our experts today to see how easy it can be to get your application up and running.

What your website users are trying to tell you

Every visitor to your website has a goal in mind - this may not be a conscious goal, but they are visiting your site for a reason. So listening to your users feedback is key to meeting their expectations! As a business owner, be sure to keep these in consideration and as a developer, be sure to pass these recommendations through to your clients. What are some things that users are trying to tell you and how do you find out? What and why is it Often people forget about the basics and fail to include what their product, service or business is. By excluding this vital information there will be users who will not know what the purpose of the page that they have stumbled upon is, but what to do next - and therefor bounce quickly off of your site. Where is your pricing information? If you are trying to sell something - a product or a service - be sure to include the price information as this is used by your visitor to determine their next action. Even if you are providing resources in return for their details, it is important to be clear. Where are those testimonials or reviews? Have others tried it People like to know that whatever they are investing money into is worth it - reviews or customer testimonials help to show your visitors what you can do. Be sure to add this information in a way that is easy for you visitors to find. Where can I sign up or contact you Another vital piece of information that many often forget is to let your visitors know how to signup and contact you. Perhaps you have chosen to hide your contact information due to spam bots or other issues faced, however, if you are in the business of recruiting clients, then be sure to have some form of contact information easily available to your visitors.
Not sure if you are missing anything? CakeDC, the experts behind CakePHP, offer a range of services including consulting, guiding you through the best practices with your CakePHP application.

We Bake with CakePHP