当前位置:shopify > shopify店铺 > 正文




建立下列手册时充分考虑了 Web 文本可出访性手册 (WCAG)。由于建立更易出访的中文网站时需要考虑许多因素,因此仅遵从下列指导原则并不能保证您的新浪网零售店完全可出访。您能出访 WCAG 中文网站或查阅上面列出的资源,以期介绍有关 Web 可出访性的详细资料。

提示信息:假如您是开发者,您能采用 Shopify 辅助工具和最佳做法来进一步优化您的模版的可出访性。在 介绍更多信息。





在下列实例中,文档与大背景的清晰度为 2.4:1,对这类顾客而言无法写作。

在下两个实例中,文档与大背景的清晰度为 4.8:1,对许多顾客而言更更易写作。


节录文档和按钮文档的色调与大背景的清晰度最少为 4.5:1。

副标题和其它大文档(调色板为 24 px 及以上)的色调与大背景的清晰度最少为 3:1。相片上(主要包括PPT、横幅和视频)大部份文档的色调都与大背景有足够多的清晰度。对大文档(调色板为 24 px 及以上),清晰度最少应属 3:1。对更小的文档,清晰度最少应属 4.5:1。非文档元素(主要包括输入前面板和工具栏)的色调与大背景的清晰度最少应属 3:1。









节录文档的最小明甫相等于 16 px。文档翻转形式不得为“两边翻转”。“两边翻转”的文档会导致字汇间的宽度不完全一致。

附注:即使优先选择相同的明甫,相同的手写体系列也可能呈现相同大小不一。明甫相等于 16 px 时,假如您采用的手写体看起来比其它手写体小,则请采用更大的明甫。





Accessibility for themes

When you customize your theme, it’s a good idea to make design and content choices that help to keep your online store accessible. An accessible website is designed so that it can be used by everyone, including people with disabilities. Accessibility for your online store is essential to providing an inclusive experience for your customers.


If youre a developer, then you can further optimize your theme for accessibility using Shopify tools and best practices. Learn more on

Text accessibility

Its important that the text on your online store is readable for customers who are visually impaired or who have difficulty reading dense blocks of text.

Color contrast

When you edit the colors for your online store, make sure that all of your text is accessible to customers who are colorblind or otherwise visually impaired. These customers rely on adequate color contrast to visually differentiate one thing from another. You can use an online contrast ratio tool to check the contrast of the different parts of your store.

In the example below, the text has a contrast ratio of 2.4:1 against its background, and is difficult to read for some customers.

In the next example, the text has a contrast ratio of 4.8:1, and is easier to read for many customers.

Test the contrast of all text, including body text, headings, links, and form fields. Use the following guidelines:

The color of body text and button text has a contrast ratio of at least 4.5:1 against its background.The color of headings and other large text (font size 24 px and up) has a contrast ratio of at least 3:1 against its background.The color of all text over images, including slideshows, banners, and videos, has sufficient contrast ratios against its background. For large text (font size 24 px and up), the contrast is at least 3:1. For smaller text the contrast is at least 4.5:1.The color of non-text elements, including input borders and icons, has a contrast ratio of at least 3:1 against its background.


In some themes, you can place a color overlay between text and an image to improve the contrast and readability of the text.

Text headings

When you add headings to your page with the rich text editor, it is important to keep them in sequential order (1 - 6). Headings are used by assistive technologies to communicate how page content is organized. Skipping over levels, such as a heading level 2 followed by a heading level 4, can be confusing to users. Use the following guideline:

Headings are used in sequential order and do not skip over levels.

Text size and alignment

When you edit your themes typography settings, make sure that your text is large enough for customers to comfortably read.

Text should also have consistent spacing between words and letters to make it easy to read. In the example below, the text alignment is justified, which creates inconsistent spacing between words.

In the next example, the text alignment is left-aligned, which creates consistent spacing between words.

When customizing the size and alignment of text, use the following guidelines:

The minimum font size for body text is the equivalent of 16 px.Text alignment is not justified. Justified text creates inconsistent spacing between words.


Different font families can appear comparatively small or large, even if they have the same font size. If the font youre using appears smaller than other fonts do at 16 px, then use a larger size.

Text links

When you add links to your text, make sure that they can be identified by all of your customers. Because some customers have trouble seeing color, you cant rely on a change in color alone to differentiate a link from regular text. Text should be underlined so that it doesnt rely on the change in color to communicate that the text is a link.

If you edit your themes stylesheet, then make sure that you dont remove text link styles. Use the following guideline:

Text links are either underlined or have another visual differentiator from

版权保护: 本文由 shopify 原创,转载请保留链接: