Accessibility: Preparing Your Text and Graphics

Visitors with visual conditions or difficulties may find it difficult to tell the difference between the foreground and background of a site's pages. Therefore, we suggest checking and adjusting the color contrast on your site as needed.

Our recommendations

In order to increase accessibility for visitors with different vision needs, we recommend the following:

• Changing the text color and background color contrast to a ratio of 4.5:1 for normal text and 3:1 for large text.

• A contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders, placeholders etc).

• Level AAA requires a higher contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

Good to know:

Large text is defined as above 14 points (approximately 18px) and bold, or 18 points (approximately 24px).

Finding color codes

You can find the color codes in whichever site builder you're using (Wix Editor, Studio Editor, or the Harmony Editor).

Wix Editor

1. Select the relevant element (text, strip background, container box, etc.) and access the Color Picker.

2. Hover over any of the colors to see the color code.

Studio Editor

1. Go to your editor.

2. Select the relevant element.

3. Click the Open Inspector icon

   

   at the top right of the editor.

   

4. Click the Design tab

   

   .

5. Click the color box to open the color picker.

6. Hover over the color to see the code.

Wix Harmony Editor

1. Go to your editor.

2. Select the relevant element.

3. Click the color circle on the action bar.

4. Open the Custom tab to see the color's code.

Testing color contrasts:

There are numerous sites and browser plugins such as Contrast Checker that tests the color contrast by comparing the foreground and background colors (using the colors codes). For checking the color contrast for text over a background image, we recommend using Colour Contrast Analyser which enables you to pick the background color and then test.

Adjusting color contrast

You can use the Accessibility Wizard in your editor to find and adjust any low color contrast on a site - no matter which site builder you're using. The wizard scans your site for potential accessibility issues, and highlights ways to improve the site's accessibility.

With most elements, you can make changes within the wizard itself. However, some elements (e.g. app elements) are not currently fully integrated with the wizard, and need to be manually reviewed or adjusted.

Wix Editor

1. Go to your editor.

2. Click Settings at the top of your editor.

3. Select Accessibility Wizard.

4. Select Scan Site.

5. Click the Detected issues tab.

6. Select a page from the list.

7. Click Improve color contrast.

8. Select the relevant element and adjust it as needed:

Adjust the contrast in the wizard

1. Adjust the foreground and background colors in the Accessibility Wizard to the recommended contrast ratio.

2. Click Apply to save your changes.

Manually adjust the contrast

1. Adjust the foreground and background colors in the Accessibility Wizard to the recommended contrast ratio.

2. Click the Copy icon

   

   next to the color you want.

3. Select the relevant element in your editor and open the design settings.

   Note: This step depends on the element.

4. Open the color picker.

5. Click Add next to My colors.

6. Paste the copied code into the field.

7. Save the site.

8. Click Scan Again in the Accessibility Wizard to see the reflected changes.

Studio Editor

1. Go to your editor.

2. Click Site Checker

   

   on the left side of your editor.

3. Select Fix Accessibility Issues.

4. Click Scan Site.

5. Click the Detected issues tab.

6. Select a page from the list.

7. Click Improve color contrast.

8. Select the relevant element and adjust it as needed:

Adjust the contrast in the wizard

1. Adjust the foreground and background colors in the Accessibility Wizard to the recommended contrast ratio.

2. Click Apply to save your changes.

Manually adjust the contrast

1. Adjust the foreground and background colors in the Accessibility Wizard to the recommended contrast ratio.

2. Click the Copy icon

   

   next to the color you want.

3. Select the relevant element in your editor and open the design settings.

   Note: This step depends on the element.

4. Open the color picker.

5. Click Add next to My colors.

6. Paste the copied code into the field.

7. Save the site.

8. Click Scan Again in the Accessibility Wizard to see the reflected changes.

Wix Harmony Editor

1. Go to your editor.

2. Click your site’s name at the top left of the editor.

3. Scroll down to Accessibility and click Fix Issues.

4. Click Scan Site.

5. Click the page you want to work on.

6. Click Improve color contrast.

7. Click the Edit icon

   

   next to the relevant element and adjust it as needed:

Adjust the contrast in the wizard

1. Adjust the foreground and background colors in the Accessibility Wizard to the recommended contrast ratio.

2. Click Apply to save your changes.

Manually adjust the contrast

1. Adjust the foreground and background colors in the Accessibility Wizard to the recommended contrast ratio.

2. Click the Copy icon

   

   next to the color you want.

3. Select the relevant element.

4. Click the color circle on the action bar.

5. Select the Custom tab.

6. Paste the color's code into the field.

7. Click Scan Again in the Accessibility Wizard to see the reflected changes.

Manually reviewing color contrast

There may be color contrast on the site that the Accessibility Wizard does not identify. We recommend manually reviewing site content with the Wix Contrast Checker, and adjusting the contrast as needed.

You can install and use the Contrast Checker from your site builder (Wix Editor, or Studio Editor). If the elements don't meet the requirements, you can also test new ratios with the picker.

Wix Editor

To check the contrast:

1. (First time only) Install the add-on to your editor.

2. Click Tools

   

   on the top right of your editor.

3. Click Editor Add-ons.

4. Click Contrast Checker.

5. Use the color boxes to select the color of the element and background in the checker, or paste in the relevant color codes.

To adjust the contrast:

1. Adjust the foreground and background colors in the Contrast Checker to the recommended ratio.

2. Copy the colors' codes from the bottom-right of the picker.

3. Select the relevant element in your editor.

4. Open the color picker from the element's design settings.

5. Click Add next to My colors.

6. Paste the copied code into the field.

Tip:

How you open the design settings depends on the element, but you can usually find them by selecting the element, then clicking the Design icon

.

Studio Editor

To check the contrast:

1. (First time only) Install the add-on to your editor.

2. Click the Wix Studio icon

   

   at the top left of your editor.

3. Click Tools.

4. Select Editor Add-ons.

5. Click Contrast Checker.

6. Use the color boxes to select the color of the element and background in the checker, or paste in the relevant color codes.

To adjust the contrast:

1. Adjust the foreground and background colors in the Contrast Checker to the recommended ratio.

2. Copy the colors' codes from the bottom-right of the picker.

3. Select the relevant element in your editor.

4. Open the color picker from the element's design settings.

5. Click Add next to My colors.

6. Paste the copied code into the field.

Tip:

How you open the design settings depends on the element, but you can usually find them by selecting the element, then clicking the Open Inspector icon

at the top right of the editor.

Displaying graphs or data on your site?

High contrast color is a great way to display data on your site. However, we also recommend using other indicators (such as textures and patterns) to differentiate between information.

Next step:

Go back to the Accessibility Checklist to continue improving your site for accessibility.