Colour Contrast Checker

When creating a palette for your future web designs, just using web safe colors isn’t always enough. It’s also important to take notice of the Web Content Accessibility Guidelines (or WCAG for short), which were created in order to make online content more accessible to all its consumers, and especially to people with disabilities.

While we’re not here to discuss these exact guidelines, you’ve probably already figured out that there are numerous tools that can help you keep your design within these guidelines. Today, we’re going to take a look at an extension for Google Chrome called Colour Contrast Checker.

Visual contrast is an easy concept to understand; it’s what makes objects differ from one another when juxtaposed. This is applicable not just to objects or beings in photos, but to any visual elements; for example, you wouldn’t be able to read this article if the text was white and the background was the same color.

While this may seem obvious and simple, any designer was probably tempted at least once to sacrifice a bit of intelligibility in order to stick with a very cool color pattern. Well, this is exactly what Colour Contrast Checker doesn’t let you do. By finely adjusting the hue, saturation and lightness for both the background and foreground color, you can obtain striking color combinations. However, the blend must also pass the AA Large, AAA Large, AA Normal and AAA Normal contrast tests.

Using Colour Contrast Checker can be a fun and safe way to create your palettes, because you can discover combinations that you may have never even thought of. You can save up to six color matches, or you can simply copy their hex codes and use them with other programs.

Even though its purpose is very specific, this is a lightweight extension that can help you with your web and application design projects.