Color

Vibrant, friendly, and accessible color is an important part of Gatsby’s design. It distinguishes our brand and helps us to create consistent experiences and meaningful expressions across marketing and products.

Work in Progress

Our color palette includes primary and secondary colors that can be used for interfaces as well as illustrations.
Click the color names for detailed information.

Aliased color

WCAG Contrast Score

  • 3 AAA
  • 2+ AA Large
  • 2 AA
90
80
70
60
50
40
30
20
10
5

Primary

3
3
3
3
2
2+
2
2+

Secondary

3
3
3
3
2
2+
3
2
2+
2+
2+
2
2+
2
2
2
2
2+
2+
2+
3
2
2+
2+

Neutral

3
3
3
2
2

Accessibility

We are committed to complying with Web Content Accessibility Guidelines 2.0 Level AA standard contrast ratios. To do this, we need to choose primary, secondary and neutral colors that support usability. This ensures sufficient color contrast between elements so that users with low vision can see and use our products.

Color Contrast

The WCAG provides an equation that determines these two values. It outputs a number between 0 and 21, with 21 being the highest amount of contrast—think black text and a white background—and 0 being no contrast—white on white. That ratio is where the scores are derived from. There are technically 5 scores:

  • × — Fail – < 3.0
    The text doesn't have enough contrast with the background.
  • 2+ — AA Large – >= 3.0
    The smallest acceptable amount of contrast for type sizes of 14pt bold/18pt (which roughly translates to ~18.5px bold/24px @1x) and larger.
  • 2 — AA – >= 4.5
    The required contrast score for text sizes below 14pt bold/18pt.
  • 3 — AAA – >= 7.0
    Use it for longer form text that will be read for a significant period of time and requires enhanced contrast.
  • AAA Large
    AAA Large means that your large text has a contrast ratio of4.5 or higher—which is the same score as AA, and which is why you won't see AAA Large as a visible score in our documentation.

Color Blindness

There are different types of color blindness — the most common form is red-green color blindness, followed by blue-yellow color blindness and total color blindness. Red-green color blindness affects up to 6% of males and 0.4% of females.

When using color, ensure that adjacent color shades are distinguishable for color blind people. Use a color blindness analyzer to confirm your choices. Here are a couple of free apps and browser extensions to help: