Skip to content
me2 Accessibility logo Homepage

Find colours

Helps you find colours that have sufficient contrast ...

You are here:
  1. Home
  2. Resources
  3. Colour Contrast Determinator

Colour Contrast Determinator

4.5
colour contrast
Pass for text
sample text
Slider colour:
Slider level:

How to use

You can use this tool to find colours that have sufficient contrast. Simply enter the colour values in the input fields to display the colour contrast, then use the sliders to adjust the colours if necessary.

The height of each slider indicates the contrast: full height is used for colours that have sufficient contrast, so you can easily see how far to move the slider.

Example

Below is a screen shot of green text colour rgb(40,240,47) on a yellow background colour rgb(238,255,0). The sliders represent the green colour and show that there is insufficient contrast. They also show that if you move the first slider into the blue area, there will be sufficient contrast (because here the slider has full height).

Screen shot showing: status text '1.4 Colour contrast, fail for text', a sample text area with green text on yellow background, an input field representing text colour with the value rgb(40,240,47), an input field representing background colour with the value rgb(238,255,0), and three buttons next to the input fields, one with the label 'H' and the two other buttons with arrow symbols. Below this there are 3 elements. Element 1 is an input field with the label 'H' and the value '122' 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 green section which does not have full height. The blue section of the slider has full height. Element 2 is an input field with the label 'S' and the value '87' followed by a slider displaying green 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 '55' followed by a slider displaying green tones from black to white. Only the dark tones have full height. In addition to this,

In the screen shot below, the first slider has been moved into the blue 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: status text '4.5 Colour contrast, pass for text', sample text colour is blue on a yellow background, text colour input field has the value 'rgb(40,100,240)'. The 3 elements have changed as follows: the 'H' value is '222' and slider position is in the blue area with full height. The 'S' value is '87', slider position is unchanged but this section now has full height. The 'L' value is '55', slider position is unchanged but the section now has full height.

HEX and RGB input

Press the "H/R" 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 'RGB(100,248,48)' and background colour input field with the value 'RGB(55,35,255)'. The button next to the input fields has the text 'R'.

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 'H'.

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. The value gets interpreted as you type. Invalid entries are corrected when you press the Enter key or move focus away from the input field.

Lazy typing

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 "r" 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 it will be accepted as rgb(40,20,40).

Clipboard access

The button with the left-pointing arrow pastes colour values from the clipboard. If the clipboard contains text and if the text includes colour values in hex or rgb format, the values will be inserted in the input fields.

The button with the right-pointing arrow copies the current colour values and the colour contrast to the clipboard, for example "#288CF0 #0F2A05 4.5".

For example, if you use the Colour Contrast Analyser , press Ctrl + S to copy the results, then use the paste function in the Colour Contrast Determinator to paste the results into the two input fields.

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, number input fields and sliders. There are two 'Slider colour' radio buttons with the values of 'Text' and 'Background'. The text option is currently selected. The number input fields represent a green 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 & graphics'. The '4.5 text' option is currently selected.

Sliders controlling background colour:

Screen shot showing radio buttons, number input fields and sliders as previous, however, the 'background' radio button is now selected. The number input fields and sliders have changed accordingly to represent a blue 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, numbers input fields and sliders as previous but with the '3 large text & graphics' radio button selected. The only change other change is that the slider heights have changed.

Clicking to the left of a slider thumb moves the thumb one unit to the left, clicking on the right moves to the right.

Colour contrast

Apart from slider height, the colour contrast is given as a number, e.g. "5.3", and status is indicated in text, for example "Pass for 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'. There is also a green smiley face

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 screen reader-only text.

Colour contrast requirements

The Web Content Accessibility Guidelines (WCAG) 2.1 stipulate that text colours and colours of informative graphics (e.g. icons, checkboxes, radio buttons, graphs), must have sufficient colour contrast against background colours. This makes it easier for low vision users - and users in general - to read text and recognise shapes.

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 and graphics. 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.

Terms of Use

This software is being provided "as is" - without any express or implied warranty. In particular, me2 Accessibility 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, me2 Accessibility 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

Contact Us

Need a quote / Have a query?

Please get in touch

Contact Us
Level AA conformance, W3C WAI Web Content Accessibility Guidelines 2.2 Certified WCAG level AA. me2Accessibility logo