{"id":38,"date":"2021-01-29T13:14:38","date_gmt":"2021-01-29T17:14:38","guid":{"rendered":"http:\/\/www.jfciii.com\/blog\/?p=38"},"modified":"2024-04-09T15:26:23","modified_gmt":"2024-04-09T19:26:23","slug":"your-website-needs-color-and-contrast","status":"publish","type":"post","link":"http:\/\/www.jfciii.com\/blog\/2021\/01\/29\/your-website-needs-color-and-contrast\/","title":{"rendered":"Your Website Needs Color and Contrast"},"content":{"rendered":"

NOTE<\/strong> – I found this old blog post in my drafts, so I did some time editing it, link checking, etc., and hit publish of an old draft.<\/p>\n

To Read Your Content<\/h2>\n

To allow people to read your content, you need to make sure to have the color contrast as high as possible. So people can read what you have written. It shouldn’t be so high that it bothers people with low vision. Were too much contrast makes it difficult for them to read.<\/p>\n

Putting light text on pastel or light backgrounds is not good for some people. You also have to think about the different types of color deficiencies (colorblindness). Meaning you don’t want to have red text on a green background, etc.<\/p>\n

A Useful Tool<\/h2>\n

Below are a few different tools I use to check color contrast. The color contrast tool I use the most is Jonathan Snook\u2019s web-based \u201cColour Contrast Tool<\/a>\u201d. \u00a0It’s the tool I use to check color contrast for the development team at work or if I have chosen will work.<\/p>\n

W3C Recommendation for Color Contrast<\/h2>\n

Here’s the W3C recommended values from the WCAG 2.0 – 1.4.3 Contrast (Minimum) Level AA<\/a>.<\/p>\n

Following these guidelines ensures that foreground and background color combinations provide enough contrast. This pertains to those with color deficiencies. To pass your text and background need to have a color contrast ratio of at least 4.5:1 or higher to pass.<\/p>\n

How High Should Your Color Contrast Be<\/h2>\n

You also have to think about how the web page or application is going to be used. Now, if it a heat index application that is likely going to be used outdoors. You have to consider most high heat index days will probably be in bright sunlight. So blaring sunny will not work well with a contrast ratio that passes b a little bit.<\/p>\n

Color Deficiency or Colorblindness<\/h2>\n

Another tool is the \u201cColor Oracle.\u201d It’s used to simulate different types of colorblindness. They have Windows, Mac, and Linux versions created by Bernhard Jenny, Oregon State University (programming), Nathaniel Vaughn Kelso, and Stamen Design, San Francisco (ideas, testing, and icon). \u00a0The application places a color overlay for your entire main screen. You can set up different PF or function keys to turn on and off different types of colorblindness masks easily.<\/p>\n

Doing this allows you to check against the three main types of color blindness. About 10% of the population is colorblind. Most of them are males. The three main types of color blindness are:<\/p>\n