Search code examples
wcag

WCAG 2.1 - high contrast toggle button


I am maintaining a site for a client. The site has a high contrast toggle that sets appropriate contrast to meet WCAG 2.0 AA. However, without the user toggling that button, the site does not pass WCAG 2.0 AA (which is the goal). Once the user toggles the button, it seems to be WCAG 2.0 compliant.

The previous site developer said that it is fine as long as the user is able to switch to high contrast.

Questions:

[1] Does having a high contrast toggle (small icon in the upper left) make the site WCAG 2.0 AA compliant? Or does the default site need to be compliant before making the user hit a special button?

[2] Is there a universally recognized icon/location that gives a visual cue to switch a site to high contrast mode?


Solution

  • Short answer, yes, a high contrast toggle button is sufficient to pass WCAG but is not the greatest user experience. There are also some caveats in doing so as mentioned in "G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast"

    1. The link or control on the original page must itself meet the contrast requirement of the desired SC. (If the user cannot see the control they may not be able to use it to go to the new page.)
    2. The new page must contain all the same information and functionality as the original page.
    3. The new page must conform to all of the SC for the desired level of conformance. (i.e., the new page cannot just have the desired level of contrast but otherwise not conform).

    It's always best to have your main page satisfy minimum contrast requirements (WCAG 1.4.3) rather than creating a separate page, and possibly a separate user experience, that conforms to WCAG. If you go this route, hopefully you're just applying a different CSS to the main page so that you don't have to worry about maintaining a separate high contrast page.