This is a quick guide on how to check the colour contrast on your website.


A simple way to check colour combinations meet the requirements set by version two of the Web Content Accessibility Guidelines. Checking colour contrast Captions for Checking Colour Contrast

This is the transcript for this youtube video

Hello everybody Im Matt from Nomensa and Im going to talk to you about checking colour contrast on your website. There are several ways colour contrast can be tested including automated tools and browser plug-ins but these cannot always be relied upon to give accurate results. Therefore, I recommend using the Colour Contrast Analyser from the Paciello Group.

The colour Contrast Contrast Analyser is a stand-alone application available for Windows or Mac that allows you to check colour combinations used in a design or a live site. By entering the HEX code or using the eye dropper tools in the Colour Contrast Analyser, we can compare colour combinations and the tool will let us know if the pairing meets the contrast ratio set by version 2 of the Web Content Accessibility Guidelines. When testing version 2 of the guidelines be sure to set the algorithm to Luminosity to ensure the correct colour contrast ratio is being given. Obviously checking colour combinations in this way can be quite time consuming but checking colour contrast during the design process or as early as possible should help to avoid any colour contrast issues making their way in to the final site. So there we have it, a simple way to check your colour combinations meet the requirements set by version two of the Web Content Accessibility Guidelines.

Let's work together

We believe that creating groundbreaking experiences that make measurable differences in the way people live takes a special type of collaboration. Our team designs impactful experiences by leaning on the variety of capabilities and expertise within Nomensa to ensure our solution is bespoke to your needs. We believe collaboration is key, let’s work together.

Contact us