Accessibility: Preparing Your Text and Graphics | Help Center

Learn how to use Wix to build your site and business.

Design and manage your site using intuitive Wix features.

Manage subscriptions, plans and invoices.

Run your business and connect with members.

Learn to purchase, connect or transfer a domain to your site.

Get tools to grow your business and web presence.

Boost your visibility with SEO and marketing tools.

Get advanced features to help you work more efficiently.

Find solutions, learn about known issues or contact us.

Improve your skills with our courses and tutorials.

Get tips for web design, marketing and more.

Learn to increase organic site traffic from search engines.

Build a custom site using our full-stack platform.

Get matched with a specialist to help you reach your goals.

Home

Creating your site

Creating an accessible site

Making your site accessible

Accessibility: Preparing Your Text and Graphics

4 min

In this article

Our recommendations
Finding color codes
Adjusting color contrast

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 (Studio Editor or Wix Editor).

Wix Editor

Studio Editor

Select the relevant element (text, strip background, container box, etc.) and access the Color Picker.
Hover over any of the colors to see the color code.

The color picker in the Wix Editor. The cursor is hovering over a color and the code is highlighted on the panel.

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 whether you're using the Wix Editor, or the Studio Editor. The wizard scans your site for potential accessibility issues, and highlights ways to improve the site's accessibility.

Wix Editor

Studio Editor

Go to your editor.
Click Settings at the top of your editor.
Select Accessibility Wizard.
Select Scan My Site.
Select cards titled Color contrast.
Use the slider to adjust the text and background color.
Select Apply Changes.

A color contrast is open in the Wizard. The contrast has been adjusted, and the cursor is hovering over Apply Changes.

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.