Check Accessibility, HTML, CSS, Broken Links & Spelling

Documentation > Contrast testing

The WCAG v1 and WCAG v2 accessibility standards both specify guidelines for testing the contrast between the foreground and background colours of text. Total Validator can carry out the appropriate contrast testing, but only when configured correctly, and with the limitations shared by all automated testing tools.

Due to our advanced HTML testing we can test the contrast of text in more scenarios than other accessibility validators, such as with the <input> element's latest type values in HTML5. But, because we use the formulas given in the official guidelines, we can only test displayable text and not text within images. The formulas also do not account for text with background images, gradients, decorations, or shadows. So, if your pages have any of these you may have to carry out some manual testing.

Running tests

To perform contrast testing you must validate the DOM of the page, so that any colours set by CSS or Javascript have been applied, and the page appears as it does to users. This means that you must install one of our browser extensions first, from this page.

To run a test which performs contrast testing, you can then use the Validate DOM option in the TV application, or manually select the Send DOM option in the browser extension.

When a contrast issue is found it will be marked on the page report in the usual way. To prevent unnecessary duplication, and to simplify fixing, issues are only raised against the element that changes the colour, rather than for each block of text that fails.

Testing can also be performed with the CI version (because a desktop browser is required this cannot be used on a headless system). Once you have installed our browser extension, run the CI version with the -dom option to perform your test. This simulates the Validate DOM option, loading the -url start page in the default browser, then testing the DOM (use the -displaybrowser option to select a different browser).