Color Contrast Calculator

This calculator will determine whether two colors you are thinking of using on your slides have enough contrast to be seen clearly by the audience.  The calculations are based on international standards developed by the World Wide Web Consortium (W3C) detailed here.  There are two tests, a color brightness test and a color difference test.  Both tests should be passed in order to ensure that the colors you are using on your slides will be easily seen.

How To Use the Calculator
In the form below, enter the background color red, green and blue attributes and the text/foreground color red, green and blue attributes.  The text/foreground color could also be a color you are considering for lines or shapes on the slide.  You can find the red, green and blue attributes of a color by clicking on the Custom tab when you are picking colors, or watch the short video below for a demonstration of how to find these values in PowerPoint. When you are done, the sample will update to show you the colors you have entered and you will see the results of the tests.  The results give you a Pass or Fail rating as well as the value of that test so that you can compare it to the standard. If your colors do not pass the tests, see the suggestions below.

  • Background Color

  • Text/Foreground Color

  • {{color_check_display}}

  • Sample of Colors Selected

    Updated after all color values are entered
  •  

    Sample Text


     

  • Results of Color Contrast Tests

  • Color Brightness Test (>125 is a passing score): {{brightness_test}}
  • {{brightness_result}}
  • Color Difference Test (>500 is a passing score): {{difference_test}}
  • {{difference_result}}

 

Suggestions for Improving the Color Brightness Contrast

The largest contributor to a difference in color brightness between two colors is the difference in the value for the Green attribute. By increasing the difference between the Green attribute for the text and background colors, you will improve the color brightness contrast. The next biggest contributor to a difference in color brightness in the difference between the two Red attributes. Increasing the difference between the text and background Red attributes will improve the color brightness contrast, but only about half as much as the equivalent change between Green attributes. Bottom line: Start by increasing the difference between the Green attributes and then move to increasing the difference between the Red attributes.

Suggestions for Improving the Color Difference

Some commentators suggest that the pass value should be 400 instead of the 500 that the W3C has in their documentation. If your test value is close to 500, it is probably fine. If you need to improve your color contrast, increase the difference between any of the pairs of attributes. Increasing the difference between the Green attributes will have the same impact on this test as increasing the difference between the Red attributes or the difference between the Blue attributes. Increase the difference between each pair of attributes to improve the result of this test.

 

If you found this tool helpful, check out the other resources I provide using the menus above and tell others to use this free tool at www.ColorContrastCalculator.com.

Video on how to find the RGB values of a color in PowerPoint