Text Colour contrasts (Part 3): the contrast improvement mechanism

By Julie Moynat, 9 March 2020

Reading time: 13 minutes

Keyword(s):

Translation(s): 

If a website doesn’t respect natively the contrast ratios or if the corporate identity created previously does not allow to respect them, the AA accessibility level allows to implement a contrast improvement mechanism to modify a webpage in order to make it more readable.

In the WCAG (Web Content Accessibility Guidelines), it is called “a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast”.

There are two solutions:

  • An alternative page: this solution is not recommended but possible. It is required for the alternative page to be compliant with the colour recommendations and with all the criteria of the expected accessibility level. This usually implies to have a complete alternative website; which is strongly recommended not to be done for maintenance purposes. This kind of alternative sites is often forgotten in the updates and end up being broken or completely out of date. This represents also more design work.
    Following the WCAG rules, a link to this page should be available at the beginning of the page, meaning in the header of the website.
  • A style switcher: this mechanism usually works with a switch button: the activation of a button disables the others. This allows, for example, to display an alternative style sheet with different colours than the default ones. These colours may be completely different from the corporate identity. It is commonly known as “colour switcher”.
    Several options are available:

    • Using colours of the corporate identity by enhancing them to obtain at least a 4.5:1 contrast rate. Tanaguru Contrast-Finder will then be quite useful;
    • Displaying the whole site using “reversed” colours: black and white, black and yellow, blue and yellow, or even as negative colours such as what Apple offers for its operating systems for example. This reverse mode is interesting for people who read more easily on a dark background. Indeed, websites still mostly have light backgrounds;
    • Solving reading issues for texts on images, if there are any, by applying specific styles (plain background colour behind the text, applying a hallow…). Some sites actually hide completely the images in this case; it isn’t necessarily the best solution as it may render a much less attractive website, much sterner. Moreover, visual information may be lost (for example if it is the view of a place the user wishes to visit);
    • Allowing users to choose freely, or amongst a predefined list, the background colour and text colour that would suit them best.

A technique for the colour switchers

In order to create a colour switcher, it is possible to use the CSS alternative style sheets functionality with a JavaScript component to activate the style sheets using buttons in the website.

To avoid CSS overloads and to avoid oversights of styling for some elements, with a CSS pre-processor like Sass, it will be possible, for example, to create two files containing the colour variables of the web corporate identity. The variables will have identical names but, in both files, their values won’t be the same: in the first file, it will be the original values, while in the second, it will be the enhanced contrasts values. Two style sheets will be generated: one calling all the Sass files with the first variables’ file, the other calling all the Sass files with the second variables’ file.

Here is for example the content of a first file with “normal” variables (in Sass), which could be called “_variables-identity-colors.scss”:

// Corporate identity colors
$color-text: #888888;
$color-title: #EF362C;
$color-link: #73A3B8;

And the content of a second file with high contrast variables, which could be called “_variables-identity-colors-high-contrast.scss”:

// Corporate identity colors - high contrast
$color-text: #333333;
$color-title: #D90B0B;
$color-link: #055A7F;

In this case, there will be two Sass files of colour variables to import separately and the other Sass partials. The Sass files will be calling all the partials that will distinguish which variables’ file should be called.

The default file “styles.scss”:

@import "variables-identity-colors";
@import "header";
@import "footer";

The file for high contrast “styles-high-contrast.scss”:

@import "variables-identity-colors-high-contrast";
@import "header";
@import "footer";

With the compiler from Sass to CSS, an error will appear if a variable is missing in one of both files of variables. Thus, there is no risk of oversight on that part. However, if another Sass partial is created, it is important to add it in both “styles.scss” and “styles-high-contrast.scss” files. The contrast improvement mechanism should, of course, be integrated to the tests processes for each newly developed functionality.

In the HTML code, in the <head> tag, both alternative style sheets will be called:

<link href="styles.css" rel="stylesheet" type="text/css" title="Default styles">

<link href="styles-high-contrast.css" rel="alternate stylesheet" type="text/css" title="High Contrast">

The title attribute of these two style sheets is what allows to make them interchangeable. The content of the title attribute is what will appear in the browsers that natively support this functionality. For example, in Firefox, it will appear in the menu, in “View” and then “Page Style”.

The default style sheet will have a rel="stylesheet" attribute while the alternative style sheet will have an additional value in this attribute: rel="alternate stylesheet".

Alternative style sheets in Firefox
Example of how the alternative style sheets for a website of CSS tips and tricks would be rendered in Firefox.

Then, two buttons (<button type="button">), that could be called “High Contrast” and “Default Contrast”, will allow to switch in JavaScript between both style sheets.

Remember, of course, to save the users choice in browser cookies so that it is kept each time the user reloads the page or moves to another page.

It is then easy to create other style sheets with different colour themes. Thus, if the website uses vivid colours like a bright pink for example, or a yellow that’s a bit fluorescent, and that could bother the users with sensorial issues or on the autism spectrum, it will be possible to offer a style sheet option with less vivid colours. This isn’t required by the accessibility guidelines but, still, it may be useful.

In addition to this article, here is an example of a colour switcher available on our Github page. You can also go and see the demonstration.

Example of a “High contrast” button

Shape and position of a contrast improvement mechanism on a website

The contrast improvement mechanism solution causes some usability issues.

The RGAA (Référentiel Général d’Amélioration de l’Accessibilité, the French Reference Document for the Improvement of Accessibility) lacks indeed of precisions concerning the use of this mechanism. It doesn’t mention the place or the method with which it should be implemented, which makes it sometimes unusable.

However, the 2017 update of the RGAA, added an essential point, compliant to the WCAG: the mechanism should itself respect the minimum contrast ratio. Thus, users needing high contrasts are sure to be able to find the contrast improvement mechanism.

In the WCAG, the G174 technique: “Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast” adds another important element: the mechanism should be placed in a visible manner so that users may access it easily. At the same time, if this point is combined to the G136 technique “Providing a link at the beginning of a nonconforming Web page that points to a conforming alternate version”, it seems obvious that the element should be placed in the page’s header.

Shapes and position of existing improvement mechanisms

More and more organisations are concerned by accessibility issues. There are of course a great number of institutional websites or websites dedicated to disabilities, but not only. Some companies like Samsung already use this contrast mechanism. Note that, unfortunately, until now, many sites implementing this kind of tools often miss out some texts in the mechanism.

To analyse the different implementation possibilities of the mechanisms, we gathered examples to evaluate the existing solutions. At the same time, we created a shared document listing websites using a contrasts’ improvement mechanism.

  • MoMA
    • Overview of the contrasts’ improvement mechanism:
    • Appearance: button with label “Use high-contrast text” and an icon representing two black and white half-circles
    • Location: just above the page footer
    • Strong points:
      • The button’s label is clear.
    • Weak points:
      • Light green texts appear in dark orange, but it doesn’t always follow the 4.5:1 expected contrast ratio.
      • Its location in the page footer.
      • The icon is quite small and therefore hard to recognise.
  • Samsung Gear 360
    • Overview of the contrasts’ improvement mechanism:
    • Appearance: two square buttons with a border and containing the letter “C”. One is black with yellow text and border, the other is white with grey text.
    • Location: just above the page footer
    • Strong points:
      • They thought about handling the text contrast on images even though some seem to have been forgotten.
    • Weak points:
      • It is in the page footer which is quite difficult to reach by scrolling down as the scroll is sometimes hijacked for the use of some visual effects.
      • These two buttons are links (bad HTML semantic) which label only is the letter “C”. Thankfully, a tooltip clarifies the label with a more accurate text: “High contrast button” and “Default contrast button”.
      • Some texts were forgotten, and their contrast is not enhanced (including one on an image).
  • Potbelly
    • Overview of the contrasts’ improvement mechanism:
    • Appearance: button with an icon showing two black and light blue half-circles
    • Location: Page footer
    • Strong points:
      • Relevant icon
    • Weak points:
      • Its location
      • It doesn’t work as expected since there is still yellow or light green text on white background. Moreover, the issue of text written on top of an image isn’t managed by this mechanism.
  • Handicap Zéro
    • Overview of the contrasts’ improvement mechanism:
    • Appearance: five square buttons with a background colour and containing the letter “A” with a different colour: black & white, white & black, red & white, yellow & black, blue & white
    • Location: in the upper part of the website
    • Strong points:
      • Very explicit and visible mechanism
    • Weak points:
      • The mechanism shows another version of the site with less content.
      • It is obviously impossible to get back to the original version if the chosen version doesn’t suit the user’s needs.
  • The Scottish Parliament
    • Overview of the contrasts’ improvement mechanism:
    • Appearance: three buttons with three different labels “Normal Contrast”, “Low Contrast” and “High contrast”
    • Location: in the page “Accessibility” then in the section “Text Size & Colour Contrast”
    • Strong points:
      • The mechanism offers a version in low contrasts that, all the while following the 4.5:1 contrast ratio, would better suit some autistic people for example.
      • The buttons labels and the explanation are very explicit.
    • Weak points:
      • The mechanism is only available under a sub-page of the “Accessibility” page which can thankfully be accessible from the site header.
  • Greewich Jobs and careers
    • Overview of the contrasts’ improvement mechanism:
    • Appearance: a white text button on grey background with a letter “A” and a label “Text options” that allows to open a small menu “Change text size” including five buttons with blue text on white background. The one allowing to change contrasts is called “High contrast” and has a red square icon containing a white letter “A”.
    • Location: in the header
    • Strong points:
      • Its location
      • The labels of the panel opening and the activation button of the mechanism are explicit.
    • Weak points:
      • The high contrast activation reveals a site which style sheet only apply colours. All other style effects are missing.
      • Getting back to the default display is complex since the button allowing to do so is, before the activation of the contrast mode, in the panel with the text size management buttons. Then, once the contrast mode is activated, the button to get back is visually outside of this list. It is, admittedly, placed first at the top of the page but the user may still be disoriented.
  • The Arc’s Austism Now Center
    • Overview of the contrasts’ improvement mechanism:
    • Appearance: an orange bar with an introductory text “Viewing Options:” then two buttons with the labels “Normal” and “High Contrast”. All texts are white.
    • Location: an option constantly appearing at the bottom right of the screen
    • Strong points:
      • The labels are explicit and relevant.
    • Weak points:
      • The button, on a wide screen, may be difficult to find as it appears in a fix position at the bottom (it may be in an empty space).
      • The contrast ratio with the orange background and white text is not compliant. There is little chance that the mechanism can be found easily.
      • Not all contrasts have been corrected.
  • NUFC
    • Overview of the contrasts’ improvement mechanism:
    • Appearance: a link “Turn on High Contrast” in parenthesis in a phrase and written in a golden colour on white background.
    • Location: in the “accessibility” page, in the middle of the text
    • Strong points:
      • The label is explicit
    • Weak points:
      • The mechanism is only available from the “accessibility” page and in the middle of the text.
      • The contrast ratio between the text and its background is only of 2.3:1. It will therefore be very difficult to find.
      • The golden colour is always used for the text. It was set in bold, but it isn’t sufficient to make the colour contrast compliant. On the home page, the title is dark grey on black background which is unreadable.
  • Kingston Frontenac Public Library
    • Overview of the contrasts’ improvement mechanism:
    • Appearance: button with two black and white half-circles.
    • Location: in the header
    • Strong points:
      • The button is visible straight away.
      • When hovering over it, a tooltip shows the signification of the button (the button even has an accessible name).
    • Weak points:
      • The button label is not available straight away (when looking for “Contrast” in the page, it can’t be found).
      • The button should be reactivated after each click on a page.
  • Alder Hey Children’s Hospital
    • Overview of the contrasts’ improvement mechanism:
    • Appearance: an introductory text “Contrast:” with, beside it, four buttons that look like radio buttons with a big coloured circle and a small circle of a different colour in the middle: white & black, light blue & dark blue, beige & dark blue, yellow and black.
    • Location: a sticky bar at the bottom of the site with a button which text is half hidden “Hide this section” and that allows to open accessibility parameters
    • Strong points:
      • In front of the contrast radio buttons, the text “Contrast” is written clearly and the radio buttons show tooltips when hovering over it.
    • Weak points:
      • The contrast mechanism is almost impossible to find since it is hidden in an expand system which opening button is inexplicably called “hide this section” and is vertically half hidden.
      • The radio button system for the contrasts is not clear and unconventional.
      • The mechanism is not accessible with keyboard navigation.

This list shows there are numerous methods to integrate a contrasts improvement mechanism to a webpage. This diversity is an issue as, if someone needs strong contrasts, they need to be able to identify quickly the solution in order to activate it. If each site has its own method, it becomes quite difficult to find its way around. Besides, implementation methods are more or less approximate.

A few rules that could be established

It is strongly recommended:

  • to place the functionality in a visible manner;
  • to place the functionality amongst the first links of the page, in the header;
  • to use an icon commonly used, while associating to it a text to make it understandable for everyone.

Specifying how the mechanism works in the accessibility page of the site, if it exists, would also be good practice.

Buttons activating the contrasts mechanisms are often equipped with an icon. The following icons are the most recurrent:

  • Two black & white half-circles: when running a search in your favourite search engine, it seems to be the symbolic icon for contrasts. The icon for contrasts is the one recommended for this type of mechanisms as it is the icon that represents the functionality and that does not reduce the functionality to a certain type of handicap.

    Contrast icon source
  • The sight impaired symbol (an eye crossed out by a line, with the left side of the eye being hashed, and the right side of the eye being “normal”): this symbol is not quite best suited as it concerns also blind people. Indeed, these won’t be concerned by a more contrasted version of the website. Also, other people, not necessarily sight impaired, will appreciate the contrasts improvements.

    Sight impaired icon source
  • The A letter on dark background: “A”, just like the first letter of the alphabet and often used to symbolize a tool affecting a text. However, this may be mistaken for another functionality often implemented in accessibility: the magnification of characters with “A+” and “A−” buttons. Yet, it may be useful to display the different colour combinations provided if there’s for example black & white, yellow & blue, yellow & black…

Whatever the chosen icon for the contrasts improvement button, it is strongly recommended to associate an explicit and visible label as for example “contrasted version” or “high contrast” so there won’t be any doubt on the buttons use and for it to be found more easily. Being able to look for the word “contrast” in the page and, thus, finding the mechanism would surely be much appreciated.

During the maintenance or the site evolution, remember to update, if necessary, the style sheet associated to the contrasts’ improvement mechanism.

In short, what is there to remember on the colour contrasts’ rules?

  • The contrast ratio to be applied between the text colour and its background colour is 4.5:1, besides exceptions. Images of text and texts on images are also concerned.
  • It is best for the contrasts ratios to be valid without needing the use of an alternative mechanism.
  • If a contrasts improvement mechanism is used:
    • The button or link allowing to activate the contrasts improvement mechanism should respect the minimum contrast rule in order to be identifiable by users in need.
    • The mechanism’s functioning must be compliant with the accessibility rules. (HTML semantics, keyboard navigation, compatibility with assistive technologies…).
    • This button must be in the website’s header, visible, in order to be found directly when arriving on the website.
    • The button may have an explicit icon (the black & white half circles for example) however it should mostly have an explicit label like “high contrast”, ideally visible to be easily identified or found through a keyword search. If you would rather hide it, despite all good advice, you would need to use the CSS technique for a text hidden but readable by screen readers.
    • Once the mechanism is activated, it must be activated for the entire website and keep this parameter as a cookie or session in the browser so as users will not have to reactivate the option for each page they visit.
    • The contrasts improvement mechanism rendering tests should be integrated in the User Acceptance Testing scenarios, not only in the accessibility tests. The latter are tests realised by accessibility experts who audit the site in order to avoid forgotten non-contrasted texts (experts aren’t always available). It would be a shame to offer a help functionality that doesn’t fully help out the user.
    • The mechanism should be explained in the page concerning the website’s accessibility, mandatory page for the RGAA.

Complementary resources

About the author

Julie Moynat

Web Designer, Web Accessibility Consultant, Tanaguru