A high bounce rate is frequently caused by the poor visual accessibility of a website. When fonts are too small, or they are hardly legible, when there are too many distractions or not enough whitespace, many people just leave the site without a second thought.
One of the most frequent reasons for early abandonment is the poorly selected colour schemes that decrease the readability of the content.
According to the statistics of WHO, there are about 285 million visually impaired people around the world, many of whom are partially or fully colour blind.
Visual disabled people see colours differently, so avoiding low colour contrast in our designs is inevitable if we want to provide our customers with an accessible and user-friendly website.
Web Standards For Colour Contrast
Colour contrast ratio measures the difference in contrast between two colours. The higher the value is, the easier it is to distinguish the object (text, image, graphic) in the foreground from the background.
Colours can contrast in many different ways, such as in hue, value and saturation. Colour contrast ratio is calculated by a formula provided by W3C, the main international standards organization for the World Wide Web.
It can take a value between 1:1 (no contrast at all, the foreground and the background have the same colour) and 21:1 (the maximum contrast that only exists between black and white).
W3C’s lastest Web Content Accessibility Guidelines (WCAG) 2.0 provides web developers and content creators with benchmarks for the minimum (Level AA) and the enhanced (Level AAA) value of acceptable colour contrast ratio.
Level AA requires at least 4.5:1 ratio for regular text, and 3:1 for large text. It’s much easier to read large text like subtitles, that’s why it needs a lower colour contrast.
If you want to reach Level AAA which is the enhanced level, you need to design your colour scheme with a greater care, as it requires at least 7:1 contrast ratio for normal text, and 4.5:1 for large. If a text is part of a logo or a brand name, there’s no minimum colour contrast requirement at either WCAG level.
We can only call a website visually accessible if the colour contrast ratio between every foreground object and its background reaches at least Level AA.
Benefits of High Colour Contrast Ratio
By ensuring better readability you don’t only engage visually impaired users, but also people who read your content on small screens such as on a smartphone or a smartwatch, among bad lighting conditions, and on lower quality monitors.
People also read faster when there’s higher contrast between the text and the background, so it will most likely take more time for them to get bored with the content of the site.
If you worry that applying higher contrast ratio will have a negative impact on the aesthetics of your design, you need to check out the Contrast Rebellion web project which proves, with real-life examples, that sticking to the high contrast ratio rules can still result in attractive and cool designs.
Apps For Checking Colour Contrast
There are many great free tools all over the web that can help designers check the colour contrast ratio of their website.
The easiest way of testing your design for colour contrast is to pick the main colours with either Photoshop or a suitable browser extension like this one for Firefox, and copy the values into one of the apps below.
The most important thing to remember is that you always need to compare the foreground colour such as text colour to its surrounding area (background colour).
1. WebAim Colour Contrast Checker
WebAim (Web Accessibility In Mind) is an organization promoting web accessibility that offers developers a simple but reliable colour contrast checker among many other great accessibility tools such as Wave, a general accessibility evaluation app that can help you quickly assess your site’s accessibility issues.
WebAim’s Colour Contrast Checker tells you if your colours pass the WCAG AA and AAA tests, both for normal and large texts.
2. Snook Colour Contrast Check
Jonathan Snook, currently working as lead front-end developer at Shopify, has been hosting his handy colour contrast check tool for over a decade. Snook’s app allows you to change the HSL and RGB values of the foreground and background colour one by one by using convenient range sliders until you reach a result that is compliant with the WCAG 2.0 benchmarks.
CheckMyColours
CheckMyColours created by Giovanni Scala allows you to check the colour contrast ratio of all foreground-background colour combinations on a live website.
It calculates luminosity contrast ratio, brightness difference, and colour difference, and provides you with a full report about the results. CheckMyColours’ report can significantly facilitate your understanding of how you can improve the visual accessibility of your site.
Color Scheme Designer
Color Scheme Designer is not particularly a colour contrast checker, but a tool for designing complete colour schemes.
We include it in this collection, because it has a feature that allows you to see how your colour scheme is perceived by people with different types of visual disabilities.
You can test your colours for full colour blindness, protanopy, deuteranopy, and many other visual impairments. The app has a newer version called Paletton that makes even a more sophisticated vision simulation possible (you can also test for things like lousy LED display or weak CRT display).
If you want to create a visually accessible website, it’s always a good idea to avoid using colour alone to convey functionality or meaning. Icons that change their colour based on their current state are typical examples for this.
If it’s possible, always design additional visual cues that assist people who see colours differently in understanding functionality.
Never forget to pay extra attention to the colour contrast of buttons, links and menus, as they are the means of navigation on your site. If users can’t navigate easily on your site, you’ll quickly lose them. Accessible colours for call-to-action buttons are also crucial for good conversion rates.
It’s a good workflow practice to test colour contrast ratio as early as possible in the design process as it will be hard to persuade your client to change the colour scheme of the site later on down the design process.
We had a wonderful moment in the Kars4Kids design department recently when our manager said, and I quote, “So we all agree the design brief works, now how do we…” And the soundtrack played its crescendo in the background and I shed some happy tears and thought, “my work here is done.”
The story leading up to this epic piece of drama is a delightful journey that goes something like this. But first, my background story. As the art director of an in-house design team, part of my job is to streamline the process for the graphic design projects that come our way from the many and varied departments of our organization.
Freelancers: Collecting Comprehensive Creative Brief from Your Client
I had ordered a special cake for a friend’s birthday and had given the receptionist all the specifications… Read more
The quest for the perfect design brief
It was a couple of years ago, and we as a company, especially the marketing team, were growing fast. I was set on the very specific project of creating an official process for the design projects we tackle.
Until then, we operated in a very casual, informal way but it quickly became clear that some order was in order, if we were to be an efficient design team.
After much research and mad professor-ish note-taking, I revealed my magnum opus: The Design Brief. For some well-oiled-machine designers, that might have been a duh moment, but for me, it was putting a name to a face, the answer to my “there must be a better way” quest.
Behold, Le Design Brief
The design brief is a who, what, when and why form for design projects that has to be filled out with all the project details and goals before we do any actual design. By customizing the information gathered on the brief, I was able to provide a valuable tool in avoiding some of the most frustrating problems our team encounters.
Never again would we get halfway through a project without knowing what exactly it is that we’re asking the target market to do. The information would be right there, on the line next to “call to action.”
Instead of adding a mailing block and indicia to a brochure right at the deadline as it was on the way to the printer, we would simply fill in the “method of distribution” space on the brief with “self-mail, bulk indicia” right at the beginning of the project.
And most importantly for an in-house team, my design brief has a slot for “internal goal for this project.” This not only helps focus the entire project, it allows us to measure the project’s success for future action.
Getting the design brief accepted
There was only one problem with my dream solution: getting the other departments, ultimately our clients, to accept what they saw as, at best, red tape and at worst, cruel and unusual punishment.
Part of the challenge of working in-house is familiarity. You and your “clients” are like an old married couple. They can drive you nuts and do everything you asked them not to do in the safety of knowing that you’re not going anywhere and will still work like crazy to get them a good product.
So if I wanted to change the way we worked with the other departments, I was going to really have to sell it. How did I explain why we can’t just take notes on a legal pad as the project is described in a minute or two and then work out the details as we go along?
Designing a project without a design brief is like…
Being a fan of metaphorical speaking, I became a veritable storyteller of a tale with many twists. The title: Designing a project without a design brief is like…
Here are the best of Designing a project without a design brief is like…
Filling an order for a steak in a restaurant kitchen which reads, “I’ll have a cow piece, thanks.“
Playing charades. Designer: “Okay, you’re pointing to a paper, so this must be a print project… no? Wait – Web! You’re holding up three fingers, so you need it in three weeks? WHAT?! THREE HOURS?“
Being a fortune teller with a crystal ball. Designer: “Ooooh, I see you have a big event coming up. You will need an advertising campaign. It will be all wrong until 4 a.m. the night before we go to print. Yes, the Great Designer never guesses, she knows.“
A forensic artist drawing a suspect. Designer: “From what you described, this is what you want for your brochure.” Client: “No, that’s basically my competitor’s brochure. I wanted that but BETTER.“
Buying your wife surprise jewelry. Designer: “Last time we met, my client mentioned tri-folds. She probably wants a tri-fold. And she always signs her email in comic sans. She must like comic sans. And the design will match her signature!“
Closing argument
If your design department is not using a formal design brief, be the hero and introduce it. Just remember, a little humor goes a long way in making something new and unfamiliar acceptable. Here are a few more posts that can help you sort this out while still staying on your client’s good side:
(This guest post is written by Devora Homnick for Hongkiat.com. Devora is the Art Director at Kars for Kids, a national car donation charity that funds educational and youth programs, where she leads a team of talented designers and creative marketers. You can find Devora on LinkedIn.)
If you are a designer or developer, you probably know that this field is one of the most innovative and fastest growing industry in the world. If you want to keep up to date and stay ahead of your competitors you must learn new things all the time and follow trends.
Even though the Internet is the best place for the Creatives to learn anything for free, I would highly recommend you to spend a few bucks and get some design and development books. There are a lot of experts who have encountered problems and found solutions which they share with us in the books, so why not take advantage of their best practices and smart approaches to problems?
These books will definitely help you become a better designer, developer or both. You will gain a lot of useful and practical knowledge in design psychology, user experience, branding, storytelling, programming, coding, business and much more.
Hopefully this list of books will help you choose the next book to read during rainy evenings.
Written by Nir Eyal, Hooked is a practical guide to help you create the kind of products that people would want to use. It introduces the ‘hook model’ – a four-step process that most brands use to shape consumer habits.
The book is packed with consumer behavioral insights, tips on taking actionable steps in creating enticing products, and many case studies to help you understand the concepts.
It is written for designers, product managers, marketers, start up founder, or just any one who’s interested in consumer behavioral patterns.
Dubbed as the usability guru, Steve Krug is the writer of this wonderful book Don’t Make Me Think that talks about intuitive navigation and information design. This revised version gives you fresh perspectives and updated case studies along with a chapter on mobile usability.
You will find the book to be witty, highly practical, and full of commonsense-based points. Either you’re a web or graphic designer or a web developer, you’ll find the usability concepts mentioned in the book to be highly applicable to everyday designing.
Creativity Inc. is a cumulation of years of work and experience of Ed Catmull, one of the founders of Pixar Animation company and the creator of the amazing Toy Story. The book talks about ideas, techniques, and creativity process that goes on in Pixar.
From the very core of it, the book is about creating and nurturing a creative culture in your organization. Designers, developers, and team managers can take it as their guide book for taking their work to new heights of originality.
Approximately half of the world’s population are women. However, they are constantly at the receiving end of gender bias that manifests in everyday life. This book The Invisible Women highlights how a world made by men systematic ignores women.
The book talks about data bias that almost all women face in their lives. Phone too big for your hands, medication not suitable for your body, greater likelihood of injuries you can get from an accident, and many such hurdles that are faced by women everyday.
The Lean Startup is an interesting book that sheds light on some practical approaches to help startup businesses avoid failure through continuous innovation. It helps you shift your company’s direction and shorten product-development cycles.
By the dint of some useful concepts with practical examples in the book, you can change the way companies are built and new products are launched. It emphasizes on shorter more adjustable goals instead of creating elaborative business plans.
In today’s world, whether you’re buying something, choosing a career, or subscribing to a service, the choices are abundant. However, when the choices become a little too abundant, you start questioning your decision. And this is where this book comes in.
Written in accessible, engaging, and anecdotal prose, Barry Schwartz helps you understand the psychology of choice for humans. Designers and product creators can make good use of these insights when building their products and making them stand out from the rest.
Written by William Lidwell, The Universal Principles of Design is a richly-illustrated encyclopedia of designing and user experience. The book covers everything from usability, user perception, laws of design, guidelines, human biases, and general concepts important for a successful design.
You will find interesting visual examples to elaborated each concept as well as design guidelines that’ll encourage brainstorming and broaden your design knowledge.
It is equally useful for designers, artists, marketing managers, startup entrepreneurs, interior designers or anyone who’s designing a system for users.
Penned by famous psychologist Milhay Csikszentmihalyi, this interesting book Flow explores the psychology behind optimal experience. According to the author, people are genuinely satisfied when things go in a certain flow.
The book further highlights that during the state of flow, people experience enjoyment, creativity, and total involvement. You can use these insights to work and improve your designs and products and create a better user experience.
Just as the name says, How to Speak Machine lays down some simple laws to control and manage computers of today and even machines of the future. It offers guidelines and useful framework for product designers, business leaders, and policy makers.
The author shares his vast experience as a design and tech thinker and shows trough this book how individuals and businesses can harness technology to create dynamic and inclusive products for users.
As more and more designers and creative professionals are going freelance, this wonderful book covers tips, tricks, and life lessons for designers who are on or planning to take the path to freelance career.
In this book, you’ll get some practical tips on taking a smart approach towards freelancing without getting overworked and underpaid. The book also has tips on balancing a successful work life and balancing it with a fulfilling personal life.
A client-centric web design methodology addresses the negative attitude that exists towards client work and has the potential to transform your business.
For the client/designer relationship, to work both parties need to respect the other. In this book you will explore how to move the clients’ perception of you as a pixel pusher to that of an expert.
Without meaningful content, your website isn’t worth much to your key audiences. But creating (and caring for) “meaningful” content is far more complicated than we’re often willing to acknowledge. Content Strategy for the Web explains how to create and deliver useful, usable content for your online audiences, when and where they need it most. It also shares content best practices so you can get your next website redesign right, on time and on budget.
User experience design is the discipline of creating a useful and usable website or application — one that’s easily navigated and meets the needs of both the site owner and its users.
But there’s a lot more to successful UX design than knowing the latest Web technologies or design trends: It takes diplomacy, project management skills, and business savvy. That’s where this book comes in.
JavaScript lets you supercharge your HTML with animation, interactivity, and visual effects, but many web designers find the language hard to learn. This jargon-free guide covers JavaScript basics and shows you how to save time and effort with the jQuery library of prewritten JavaScript code.
You’ll soon be building web pages that feel and act like desktop programs, without having to do much programming.
Building rich JavaScript applications that bring a desktop experience to the Web requires moving state from the server to the client side — not a simple task. This hands-on book takes proficient JavaScript developers through all the steps necessary to create state-of-the-art applications, including structure, templating, frameworks, communicating with the server, and many other issues.
jQuery: Novice to Ninja, 2nd Edition is the perfect book to jump-start your journey into jQuery. You’ll learn all the basics, so you’ll be able to truly appreciate the power of this JavaScript framework. Then you’ll move on to more advanced techniques, such as plugin development and the creation of almost every conceivable UI widget.
There are a lot of books out there that show collections of logos, but David Airey’s “Logo Design Love” is something different. It’s a guide for designers (and clients) who want to understand what this mysterious business about logos is all about.
Written in reader-friendly, concise language, with a minimum of designer jargon, Airey gives a surprisingly clear explanation of the process, using a wide assortment of real-life examples to support his points.
Neuro Web Design employs “neuro-marketing” concepts, which are at the intersection of psychology and user experience. It’s scientific, yet you’ll find it accessible, easy to read, and easy to understand. By applying the concepts and examples in this book, you’ll be able to dramatically increase the effectiveness and conversion rates of your own website.
You want to make your websites more dynamic by adding a feedback form, creating a private area where members can upload images that are automatically resized, or perhaps storing all your content in a database.
This book doesn’t just provide a collection of ready-made scripts: each PHP Solution builds on what’s gone before, teaching you the basics of PHP and database design quickly and painlessly.
By the end of the book, you’ll have the confidence to start writing your own scripts.
This book is written for practitioners by practitioners. Through real life examples, simple guidelines and practical tools, the book aims to inspire companies to use storytelling as a means of building their brand — internally as well as externally.
By reading this book you’ll learn how to accomplish modern CSS3 effects and more by working through a series of practical yet cutting-edge projects.
Each chapter walks you through standalone exercises that you can integrate into projects you’re working on, or use as inspiration. You’ll learn all of the most popular, useful, and well-supported CSS3 techniques.
If this were 1923, this book would have been called “Why Radio Is Going to Change the Game”. The Thank You Economy is about something big, something greater than any single revolutionary platform.
It isn’t some abstract concept or wacky business strategy — it’s real, and every one of us is doing business in it every day, whether we choose to recognize it or not. It’s the way we communicate, the way we buy and sell, the way businesses and consumers interact online and offline.
The Elements of User Experience cuts through the complexity of user-centric design for the Web with clear explanations and vivid illustrations that focus on ideas rather than tools or techniques. Jesse James Garrett gives readers the big picture of Web user experience development, from strategy and requirements to information architecture and visual design.
This accessible introduction helps any Web development team, large or small, to create a successful user experience.
Thinking with Type is the definitive guide to using typography in visual communication, from printed page to computer screen.
This revised edition includes forty-eight pages of new content, including the latest information on style sheets for print and the Web, the use of ornaments and captions, lining and non-lining numerals, the use of small caps and enlarged capitals, as well as information on captions, font licensing, mixing typefaces, and hand lettering.
Drawing on survey statistics from over 5,400 web designers from around the world, and the insight and experiences of several design veterans, Amanda Hackwith unlocks the door and sheds light on the web design industry in Web Design Confidential.
Have you ever wondered if your hourly rate is too low or too high? Are you torn between freelance design work and full-time employment? Are you missing an essential design skill without even knowing it?
Whether you’re looking for the latest web design practices, words of wisdom from design veterans, or just a better understanding of your profession, Amanda Hackwith and 5400 colleagues have the answers to your questions and you’ll find what you need in Web Design Confidential.
Co-founder of Mule Design and raconteur Mike Monteiro wants to help you do your job better. From contracts to selling design, from working with clients to working with each other, this brief book is packed with knowledge you can’t afford to not know.
Make your users fall in love with your site via the precepts packed into this brief, charming book by MailChimp user experience design lead, Aarron Walter.
From classic psychology to case studies, highbrow concepts to common sense, Designing for Emotion demonstrates accessible strategies and memorable methods to help you make a human connection through design.
From advanced selectors to generated content to the triumphant return of web fonts, and from gradients, shadows, and rounded corners to full-blown animations, CSS3 is a universe of creative possibilities. No one can better guide you through these galaxies than world-renowned designer, author, and CSS superstar Dan Cederholm.
Learn what works, how it works, and how to work around browsers where it doesn’t work.
The HTML5 spec is 900 pages and hard to read. HTML5 for Web Designers is 85 pages and fun to read. Easy choice. HTML5 is the longest HTML specification ever written. It is also the most powerful, and in some ways, the most confusing. What do accessible, content-focused standards-based web designers and front-end developers need to know? And how can we harness the power of HTML5 in today’s browsers?
In this brilliant and entertaining user’s guide, Jeremy Keith cuts to the chase, with crisp, clear, practical examples, and his patented twinkle and charm.
Content strategy is the web’s hottest new thing. But where did it come from? Why does it matter? And what does the content renaissance mean to you?
This brief guide explores the roots of content strategy, and quickly and expertly demonstrates not only how it’s done, but how it is done well. A compelling read for both experienced content strategists and those making the transition from other fields.
