Accessibility: Preparing Your Text and Graphics
2 min read
Visitors with limited vision may find it difficult to tell the difference between the foreground and background of your site's pages. In order to increase accessibility for them, 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.
Note:
Large text is defined as above 14 points (approximately 18px) and bold, or 18 points (approximately 24px).
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.
Show me how to find the color codes in the Wix Editor
Show me how to find the color codes in Wix ADI
Show me how to adjust color contrast in the Accessibility Wizard
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.