Design Template by Anonymous

Accessibility of Color

How to Make Color More Accessible

About 4% of the world population have low vision and 4.5% experiance some form of color blindness. It's important to recognize the impact that color plays in the usability and accessiblity of a website’s design for people who are affected by these conditions. For example, Using a higher amount of contrast in important parts of your design, such as with the text and buttons, can help improve readability when it comes to people that experiance low or blurry vision. Testing the usage of colors in your design for the most common types of color blindness people have is also very important in making sure that everyone is able to see and use your design the way you inteneded.

Example Showing Text with low contrast — Right shows readable text with high contrast, left shows low contrast and harder to read text

Popular Color Associations

Colors play a significant role in your site or brand identity. Utilizing common associations found with different colors can help emphasize what your site is and put meaning behind the color being utilized. Here are the following most common color associations.

Red: Passion, love, anger

Orange: Caution, enthusiasm

Yellow: Energy, joy, anxiety

Green: Growth, health, illness, nature

Blue: Trust, cold, stength

Purple: Silliness, wealth, status

Pink: Youth, sweetness

Brown: Comfort, dirtiness, ruggedness

Black: Death, mystery, calm

Grey: Neutrality, dullness, quietness

White: Innocence, purity, emptiness

It is also important to acknowledge that specific colors have various different meanings depending on the specific cultural context. For example, red can indicate warning or danger in the U.S. and most western countries, while in China it typically indicates celebration and happiness.

Stop Sign — A common red stop sign indicating warning