Colour Contrast Determinator

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 Determinator
4.5
colour contrast
Pass for text
 
Sample text:
sample text
 
 

Slider colour: Slider level:
 
 
 

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

The Color Contrast Determinator is a color contrast analyser that 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).

Screen shot showing: a sample text area with pink text on blue background, an input field representing text colour with the value rgb(250,82,202), an input field representing background colour with the value rgb(55,37,255), a button next to the input fields with the label 'HEX'. Below this there are 3 elements. Element 1 is an input field with the label 'H' and the value '317' followed by a slider displaying the hues of the rainbow. The height of the slider varies along the length of the slider. The current slider position is in the pink section which does not have full height. The orange to light blue section of the slider has full height. Element 2 is an input field with the label 'S' and the value '94' followed by a slider displaying pink tones from grey to full colour. None of the values have full height. Element 3 is an input field with the label 'L' and the value '65' followed by a slider displaying pink tones from black to white. Only the white tones have 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. 

Screen shot of same content as previous screen show, with the following changes: sample text colour is green, text colour input field has the value 'rgb(99,250,82)'. The 3 elements have changed as follows: the 'H' value is '114' and slider position is in the green area with full height. The 'S' value is '94', slider position is unchanged but this section now has full height. The 'L' value is '65', slider position is unchanged but the section now has full height.

Other features

Input fields

Press the "HEX/RGB" button to switch the display of text and background colour values between Hexadecimal notation and RGB notation:

Screen shot showing the text colour input field with the value '#63FA52' and background colour input field with the value '#3725FF'. The button next to the input fields now have the text 'RGB'.

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).

Slider settings

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:

Screen shot showing radio buttons and elements. There are two 'Slider colour' radio buttons with the values of 'Text' and 'Background'. The text option is currently selected. The elements represent the yellow background colour with the 'H' value '114', 'S' value '94' and 'L' value '65'. There are also two 'Slider level' radio buttons with the values of '4.5 text' and '3.0 large text'. The '4.5 text' option is currently selected.

Sliders controlling background colour:

Screen shot showing radio buttons and elements as previous but with the 'background' radio button selected. The elements have changed accordingly to represent the blue background colour with 'H' value '245', 'S' value '100' and 'L' value '57'. This is reflected in the sliders as the slider positions, colours and heights have changed.

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).

Screen shot showing radio buttons and elements as previous but with the '3.0 large text' radio button selected. The only change in the elements is that the slider heights have changed.

Colour contrast

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".

Screen show showing the text '5.3 colour contrast, Pass for text, Pass for large text. There are also two smiley faces indicating the passes.'

Accessibility

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.

Techinal note

The sliders are created with SVG and provide alternative text via hidden text.

Terms of Use

Developed by Pierre Frederiksen . Pierre is a Principal Technical Consultant 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.

Creative commons licence - logo
This work is licensed under a Creative Commons License