color/accessibility

8 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

WCAG color contrast requirements

Color contrast between text and its background must meet WCAG standards. The contrast requirements are: 4.5:1 for normal text, 3:1 for large text (greater than 24px), 3:1 for UI elements and graphics, and no contrast requirement for decorative and disabled elements.

Show state with more than color alone

To ensure users with color vision deficiency can understand UI state, state changes must be conveyed through more than color alone. Unless color is only used as a visual flourish, the information that color conveys must be present either in text (such as button label wording) or through an additional visual cue such as an icon.

Distinguish chart and graph elements without color alone

For charts and graphs, labels should be positioned on top or close to each section. Patterns can be used to distinguish different parts in addition to color.

Primer color tokens are accessible by default

Primer color tokens are designed to be accessible by default, meeting GitHub's accessibility standards.

Text color accessibility requirement: WCAG AA

Text color utilities must maintain a minimum WCAG accessibility rating of level AA for color contrast. This ensures viewers who cannot see the full color spectrum are able to read the text. The Primer team recommends using a color contrast testing tool such as colorable.jxnblk.com/ to verify contrast ratios when customizing color combinations.

Background color accessibility requirement: WCAG AA

When selecting a background color, the foreground color contrast must pass a minimum WCAG accessibility rating of level AA. This ensures content is accessible to everyone, regardless of disability or user device. Verify color combinations meet these standards using a tool like colorable.jxnblk.com/.

Text color contrast requirements WCAG 2.1 AA

Normal text at 14pt requires a minimum contrast ratio of 4.5:1. Large text (14pt bold or 18pt and above) requires a minimum contrast ratio of 3:1. Graphical objects and user interface components require a minimum contrast ratio of 3:1. Disabled controls do not need to meet any specific contrast levels.

Color must not be sole identifier of important information

Per WCAG 2.1 guideline 1.4.1 Use of Color, color cannot be the sole identifier of information. If an important transition is only a change in color, that color change must have a 3:1 contrast ratio. Test designs in greyscale mode to verify that color is not the only way to convey meaning.

Give your agent this brain