allerlay
Did you know that there is a defined value for the contrast ratio? According to WCAG 2.0, for example, for conformity level AA, there is a minimum contrast ratio of 3:1 for large text and 4.5:1 for normal text.
But how do you measure this contrast ratio? Don’t worry. You don’t have to juggle complicated calculations and values. There are many programs and tools you can use to measure this automatically. Here is a selection of tools and software.
Contrast Checker von WebAIM
The Contrast Checker from WebAIM is an online tool to test the contrast ratio. All you have to do is enter the hexadecimal codes of the text and background colors. Then you get the contrast ratio and see if the contrast is sufficient for WCAG levels AA or AAA.
It’s also nice that you get a preview of how text and background interact.
The “Lightness” function lets you adjust the hue if necessary. This is useful, for example, if you miss the minimum contrast by a narrow margin.
Color Contrast Checker von Monsido
The Color Contrast Checker by Monsido is also an online check tool. You can use the hexadecimal code as well as the RGB values.
You can also use the Color Picker to search for a better color tone and immediately get the current contrast ratio.
Contrast Checker von Acart Communications
With the Contrast Checker from Acart Communications, you can set the colors via hexadecimal code, RGB values, but also via an image file. This is helpful, for example, if you have a screen design and want to check the contrasts.
Besides the evaluation, this online tool offers the possibility to display the results in greyscales and to create a history for the tested color combinations.
Contrast Ratio von Lea Verou
If you are looking for a simple contrast ratio checker, you will find it with Contrast Ratio by Lea Verou. This test tool is kept simple.
On the left, you can enter the background, on the right, the text color. You get the contrast ratio and can also swap the colors if necessary.
Color Contrast Checker von Siteimprove
Just as simple is the Color Contrast Checker from Siteimprove. Here you can enter the color using either HEX or RGB.
You get a preview of your color combination as large and small text, see the contrast ratio, and whether you meet the requirements of WCAG levels AA or AAA.
WCAG Contrast Checker – Firefox-Add-on
The WCAG Contrast Checker by Rumoroso is an add-on for Firefox. You can use it to check the colors of any website. From each page, the WCAG Contrast Checker evaluates the colors and distinguishes between large and normal text.
Color Safe
Color Safe helps graphic artists and web designers to select WCAG-compliant and suitable font colors from different color groups for the selected background.
Colour Contrast Analyser
The minimum contrast ratio applies not only to text but also to other elements such as icons or frames in input fields. The Paciello Group’s Colour Contrast Analyser von The Paciello Group is well suited to determine the contrast ratio for such elements.
The Colour Contrast Analyser is a free program that is available for both Windows and Mac.
Color Oracle
If you want to know how people with color vision defects perceive colors, you get a simulation of the most common color vision defects with Color Oracle.
Color Oracle illustrates why the minimum contrast ratio is so crucial for people with visual impairment and color blindness. And why you should never convey information by color alone.
Get News and Updates about Tools and Offers
Would you like to be informed about other useful accessibility tools? Subscribe to my newsletter to receive regular information about tools and offers.