Use Simple Online Tools to Check Color Contrast

A website designer shared a link to a website that analyzes the contrast between two colors. It also offers a suggestion to improve the level of contrast if the two compared colors do not have enough. The checker works by comparing defined values of a color set by the Web Content Accessibility Guidelines. Those guidelines provide a formula for calculating contrast. It ranges from 1, which is the value for no contrast, to 21, which is the value for black versus white.

Other contrast comparison tools do not take opacity into account, but this one does. As a result, the user gets the real contrast ratio. When there is not enough contrast, the site offers a suggestion for a similar color that would provide enough contrast. It does this by increasing or decreasing the luminosity of the foreground color. When the foreground color cannot be changed due to its proximity to black or white, the site will suggest a different background color.

The Web Content Accessibility Guidelines have many levels. The ones that this site uses for comparing contrast are AA and AAA. AA is an acceptable level of accessibility. AAA is one step above acceptable. The AA of 4.5 is for normal text. An AA of 3 is accessible for large or bold text. At the AAA level, 7 is the value for normal text. The value for normal or bold text is 4.5.

Some website designers in a large online community went to the website and provided some comments and feedback. One person said they prefer Chrome's built-in color contrast checking tool. Another person added that Firefox has one. A different person said Adobe XD has one, and they use it. Someone else said that they use a site called Colour Contrast Analyser. It can see anything on the page, not just text, background and foreground.

It seems that website designers have a range of options for checking color contrast. None of them require payment, so there is no reason not to use them. Designers may want to check contrast with different tools in order to compare results. For more information click here https://polypane.app/color-contrast/.