Wix Apps: Contrast Checker

The Wix Contrast Checker is an add-on that enables you to check the level of contrast between two colors. By ensuring the colors on your site are contrasted to a certain standard, you are improving your site accessibility.

It follows the recommended guidelines from the Web Content Accessibility Guidelines (WCAG). These contrast ratio guidelines aim to ensure that there is sufficient differentiation between any two colors. For example, the color of the text versus the color of the background the text sits in.

Important:

The Wix Contrast Checker add-on is only available for Wix Studio.

In this article, learn more about:

• Adding the Contrast Checker to your site

• Frequently asked questions (FAQs)

Adding the Contrast Checker to your site

To get started, add the Wix Contrast Checker to your site.

Follow the steps below or go directly to the Wix App Market. Make sure you select a Wix Studio site.

To add the Contrast Checker:

1. Go to your site in the Studio Editor.

2. Click the Wix Studio icon  at the top left.

3. Click Tools.

4. Click Editor Add-ons.

5. Click Get Add-ons.

1. Hover over the Contrast Checker add-on and click Add.

FAQs

Click a question below to learn more about the Wix Contrast Checker.

What is the difference between 'AA' and the 'AAA' standard?

The A, AA, and AAA are standards set by the WCAG. The Wix Contrast Checker only measures both AA and AAA. Learn more about these guidelines and how they are determined.

How do I check the contrast ratio between two colors?

The contrast is calculated automatically when you pick two colors using the color selection button. This also shows if the contrast ratio calculation meets the required standard according to the Web Content Accessibility Guidelines (WCAG).

What is the contrast ratio and how is it determined?

The contrast ratio guidelines aim to ensure that there is sufficient differentiation between any two colors. For example, the color of the text versus the color of the background the text sits in. This makes it easier for people with low vision or color deficiencies to read and comprehend the content.

A higher contrast ratio indicates a greater difference between the bright and dark areas, resulting in a more visually distinct and vibrant image. Displays with high contrast ratios typically offer deeper blacks, brighter whites, and better overall image quality.

According to the Web Content Accessibility Guidelines (WCAG), contrast ratio refers to the difference in luminance or brightness between an element (such as text) and its background. WCAG provides specific guidelines to ensure that text is easily readable for individuals with visual impairments or other vision-related disabilities.

What are the recommended guidelines?

The Web Content Accessibility Guidelines 2.0 (WCAG 2.0) is a widely used version of the guidelines, which recommends a minimum contrast ratio of 4.5:1 for normal-sized text (at least 18 pixels or 14 pixels bold) and 3:1 for large text (at least 24 pixels or 18 pixels bold).

This means that the brightness of the text should be at least 4.5 times (or 3 times for large text) greater than the brightness of the background.

What happens when my element does not meet the guidelines?

Insufficient contrast can make text difficult to see, especially for those with visual impairments or when viewing content under challenging lighting conditions. We recommend adjusting the contrast to ensure it meets the recommended guidelines.