Accessibility: Preparing Your Text and Graphics
3 min read
Visitors with vision 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.
In this article, learn more about:
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, Wix Editor, etc.).
Studio Editor
Wix Editor
ADI
- Select the relevant element (text, strip background, container box, etc.).
- Click the Open Inspector icon
at the top right of the editor. - Click the Design tab
. - Click the color box to open the color picker.
- Hover over the color to see the 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 to find and adjust any low color contrast on your site pages. The Wizard is a tool that scans your site for potential accessibility issues, and allows you enable advanced settings to keep improving your site's accessibility.
You should know:
The Wizard is only available in the Wix Editor. Vote to add the Accessibility Wizard to the Studio Editor
To adjust the contrast:
- Select Settings.
- 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.
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.
Did this help?
|