High Contrast Option for Color Contrast

Most of use are aware of the color contrast guideline in WCAG 2.0 AA which states:

1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)

This can be a big problem for websites when the color scheme uses the brand colors which do not meet the above requirement. This can be especially troublesome for medium orange and green tones.

A technique to meet this guideline is G174:

Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast

You may want (or need) to consider this technique for your website, at least temporarily. The control for this option should be in a global nav bar or settings (if available). A longer term goal is to correct your brand’s colors so that it meets the 4.5:1 color contrast requirement.

Here are some examples of websites that have a high contrast option available (the control is in the top horizontal bar in all examples).

partial screen shot of Choice Hotels website; arrows points to text increase contrast
Example of providing an increased contrast setting on a website.


  1. Pingback: [webdev] Web Design Update: February 22, 2018 – netgoldblog
  2. Pingback: [webdev] Web Design Update: February 22, 2018 – educatorgold
  3. Pingback: [WEBDEV] WEB DESIGN UPDATE: FEBRUARY 22, 2018 | tourismhospitalityrecreationandsportsmanagement

Post a comment

You may use the following HTML:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>