This tool is a colour contrast analyser that makes it easy to find colours with sufficient contrast. Simply type in colour values or copy and paste a value form a style sheet, then use the sliders to adjust the colour - full height on the slider means the colour has sufficient contrast.
The Colour Contrast Determinator doesn't need to be downloaded - it's ready to use below. Note: the CCD works best with Chrome. Tip: Click and drag the sliders slowly.
Colour contrast requirements
The Web Content Accessibility Guidelines (WCAG) 2.0 stipulate that text colours must have sufficient colour contrast against background colours. This makes it easier for low vision users - and users in general - to read text.
The colour contrast is measured by feeding the RGB values for the text colour and the background colour into an equation. If the output is 3.0 or more the contrast is sufficient for large text. If the output is 4.5 or more the contrast is sufficient for standard text. Large text is defined as minimum 18pt or minimum 14pt if bold.
Colour contrast measuring
There are a number of tools that can be used to measure colour contrast, for example our
Colour Contrast Analyser
. This tool is handy because it has pixel pickers, so you can use it to pick any colours you can see on your screen. The tool then tells you if the colours have sufficient contrast.
Colour Contrast Determinator
So, why did we make another tool? The Colour Contrast Determinator provides a new feature - it has sliders for hue, saturation and lightness where the height of the slider indicates if the value for that position passes the colour contrast requirements.
For example, below is a screen shot of pink text colour rgb(250,82,202) on a blue background colour rgb(55,37,255). The sliders represent the pink colour and show that there is insufficient contrast. They also show that if you move the first slider into the green area, then there will be sufficient contrast (because here the slider has full height).
In the screen shot below, the first slider has been moved into the green area. As the slider is moved the other two sliders change height and colour to reflect the new value.
Press the "HEX/RGB" button to switch the display of text and background colour values between Hexadecimal notation and RGB notation:
The values are in the same notation as used in CSS style sheets so they can be easily pasted to and from CSS.
You can type a value directly in the fields to update the colour - just press Enter to update the display. The background of the field changes to light grey until you have pressed Enter.
If you type a value that starts with "#" it will be interpreted as a HEX value, regardless of the HEX/RGB setting. If the value starts with "rgb(" it will be interpreted as an RBG value.
The input fields also allow for 'lazy typing', e.g. if you type "40 20 40" in RGB mode and press Enter it will be accepted as rgb(40,20,40).
The sliders represent one colour and can either display the text colour or the background colour. This is specified by the first pair of radio buttons.
Sliders controlling text colour:
Sliders controlling background colour:
The second pair of radio buttons specifies if the sliders indicate colour contrast for text or for large text. Changing the values of these buttons only changes the height of the sliders. In the screen shot below, the sliders show colour contrast for large text. The large text requirement is easier to meet, so a bigger portion of the sliders now has full height (because more colours pass the requirement).
Apart from slider height, the colour contrast is given as a number, e.g. "5.3", and status is indicated for text and for large text. The value "5.3" corresponds to the more formal notation of "5.3:1".
The Colour Contrast Determinator contains text alternatives for screen reader users. For example, the text alternative for the hue slider might be "Hue values 0 to 217 fail. Values 218 to 285 pass. Values 286 to 360 fail".
Keyboard accessibility is provided for the sliders as the Up and Down Arrow keys move the value by one slider unit, and the Left and Right Arrow keys move the value by bigger increments.
The sliders are created with SVG and provide alternative text via hidden text.
. Pierre is a Digital Access Specialist at Vision Australia.
This software is being provided "as is" - without any express or implied warranty. In particular, Vision Australia does not make any representation or warranty of any kind concerning the reliability, quality, or merchantability of this software or its fitness for any particular purpose. In addition, Vision Australia does not guarantee that use of this tool will ensure the accessibility of your web content or that your web content will comply with any specific accessibility standard.
This work is licensed under a
Creative Commons License