View Sidebar

Tip #7 – Color Contrasts – Jojo Esposa Jr.

In designing websites, one must also consider its color combination. Colors make up the aesthetics aspect of web designing. Beautiful, matching and colorful designs make an attractive and eye-catching website.

However, a person with visual impairment would find it very difficult to read the content of a website if the text cannot be read clearly because it somewhat blends with its background color. We need to select the right color that would make the text stand out and easier to read.

One of the Web Design Accessibility Recommendation of PWAG states:

MS 2-15 Provide enough contrast between foreground and background color combinations.

This recommendation also appears in W3C’s Web Content Accessibility Guideline 1.0:

Priority 2 – 2.2 – Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen. [Priority 2 for images, Priority 3 for text].

and was further expanded in WCAG 2.0. [See WDAR and WCAG 2.0 Comparison]

According to Royal National Institute for Blind People,

People with cognitive or sight problems may have difficulty reading and distinguishing text from a background colour. This is generally caused by poor choice of color and contrast in the design of the page. Background images and patterns may also cause problems of legibility.

Creative use of color and contrast can dramatically enhance the accessibility of a website. It can be as important for people with sight problems as it is to people who have dyslexia or whose first language is not the main language of the site.

Everyone benefits from text which is both easy on the eye and that is easy to follow. For example, people with dyslexia benefit from good contrast as this can help make the structure of words and sentences easier to understand.

Aside from those with sight problems, color blind people are also affected by poor color contrast. Red and green usually appear the same for those with color blindness.

How to test for color contrast

High contrast must be provided between text and background colors in order for the text to be read clearly.

Sample of Good and Poor Color Contrasts
Sample of Good and Poor Color Contrasts

The W3C recommends a standard of 500 or greater for the color difference and a standard of 125 or greater for color brightness. This can be computed based on the following formula according to Web Accessibility Tools Consortium:

Colour Brightness Formula

((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000 The difference between the background brightness, and the foreground brightness should be greater than 125.

Note: This algorithm is taken from a formula for converting RGB values to YIQ values. This brightness value gives a perceived brightness for a colour.

Colour Difference Formula

(maximum (Red value 1, Red value 2) – minimum (Red value 1, Red value 2)) + (maximum (Green value 1, Green value 2) – minimum (Green value 1, Green value 2)) + (maximum (Blue value 1, Blue value 2) – minimum (Blue value 1, Blue value 2)) The difference between the background colour and the foreground colour should be greater than 500.

We don’t need to delve deeper on using the formulas. But here are some recommended sites to test for color contrast:

  1. AccessKeys Online Tool for Color Contrast – In this online tool, simply put the URL of your site and select the option whether you want only errors to appear or full report. In the Report Summary, PWAG received the passing mark:

    The AccessColor results show that for this page, both color difference and color brightness meet the recommended standard. Text on background with images is for 0.8% of the total text.

  2. WebAim’s Color Contrast Checker – Simply select or enter a foreground and background color in RGB hexadecimal format (e.g., #fd3 or #f7da39). Select the lighten and darken options to modify the colors slightly. You can use the color picker to change colors or change luminosity.
  3. VisCheck – Vischeck is a way of showing you what things look like to someone who is color blind. You can try Vischeck online- either run Vischeck on your own image files or run Vischeck on a web page. You can also download programs to let you run it on your own computer.
References:
  1. PWAG WDAR – http://pwag.org/recommendations/web-design-accessibility-recommendation-checkpoints/#MS2-15
  2. WAI/W3C – http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-color-contrast

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter