Skip to content
Primer Design System

Primer Design System

On this page

Accessibility

Primer color tokens are designed to be accessible by default. This guide provides more context around how to ensure new patterns meet GitHub's standards.
On this page

Guidelines

Assure adequate color contrast

Color contrast between text and its background must meet required WCAG standards.

The contrast requirements are:

  • 4.5:1 for normal text
  • 3:1 for large text (>24px)
  • 3:1 for UI elements and graphics
  • No contrast requirement for decorative and disabled elements

Use an online contrast checker or a Figma plugin to test your contrast.

Don't rely on color alone

Show state with more than color

Color vision deficiency is different for different people. To make sure everyone can understand and use your UI you should show state with more than a change in color. Unless color is only used as a visual "flourish", the information that the color conveys must be present either in the text (e.g. in the case of buttons, the actual wording of the button label), or through some additional visual cue (such as an icon).

Example icon that uses a distinct shape in addition to color to indicate an error.

Connect labels to graphs with lines or patterns

For charts and graphs you can position the labels on top or close to each section. You can also use patterns to distinguish different parts.

Two graphs. One is a line graph and one is a pie graph. The line graph is demonstrating using unique shapes for each comparison line's plot symbol. The pie chart is demonstrating how each slice's label can use a line to point to its corresponding slide.

Additional guidance

Reference Color considerations for additional information about how color relates to compliance, and other focused documentation topics.