色彩
Gatsby 的设计中，充满活力、友好且易于访问的色彩是重要组成部分。它彰显了我们的品牌，并帮助我们在营销和产品中创造一致的体验和有意义的表达。
开发中我们的调色板包含主要颜色和次要颜色，可用于界面和插图。
点击颜色名称可获取详细信息。
别名颜色
WCAG 对比度得分
- 3 AAA
- 2+ AA 大号
- 2 AA
90
80
70
60
50
40
30
20
10
5
主要
3
3
3
3
2
2+
2
2+
次要
3
3
3
3
2
2+
3
2
2+
2+
2+
2
2+
2
2
2
2
2+
2+
2+
3
2
2+
2+
中性
3
3
3
2
2
可访问性
我们致力于遵守 Web内容可访问性指南 2.0 AA 级标准的对比度比率。为此，我们需要选择支持可用性的主要、次要和中性颜色。这确保了元素之间有足够的色彩对比度，以便低视力用户能够看到和使用我们的产品。
色彩对比度
WCAG 提供了一个计算这些值的公式。它输出一个介于 0 到 21 之间的数字，21 是最高的对比度（例如黑色文本和白色背景），0 是无对比度（白色背景上的白色）。得分就是由此而来。技术上有 5 种得分。
- × — 不合格 –
< 3.0
文本与背景的对比度不足。 - 2+ — AA 大号 –
>= 3.0
对于 14pt 加粗/18pt (大致相当于 1x 下的 ~18.5px 加粗/24px) 及以上字号的文本，可接受的最小对比度。 - 2 — AA –
>= 4.5
14pt 加粗/18pt 以下文本所需的对比度得分。 - 3 — AAA –
>= 7.0
将其用于需要增强对比度的、需要长时间阅读的长篇文本。 - AAA 大号
AAA 大号表示您的大号文本的对比度比为4.5或更高，这与 AA 的得分相同，这就是为什么您在我们文档中看不到 AAA 大号的可见得分。
色盲
有不同类型的 色盲 ——最常见的形式是红绿色盲，其次是蓝黄色盲和全色盲。红绿色盲影响高达 6% 的男性和 0.4% 的女性。
使用颜色时，请确保色盲人群能够区分相邻的颜色色调。使用色盲分析器来确认您的选择。以下是一些免费的应用程序和浏览器扩展程序可供帮助：
- Sim Daltonism （iOS、Mac OS X）
- Color Oracle （Mac OS X、Windows、Linux）
- A11Y - 色盲共情测试 (Chrome， Firefox)