Color

OverviewUsageAccessibility
  1. Approach
  2. Using color alone
  3. Color contrast
  1. Approach
  2. Using color alone
  3. Color contrast

Approach

At our core, we believe in creating interactions and experiences that are inclusive. This means ensuring that all Red Hat digital properties are accessible to everyone.

Using color alone

When considering methods of communication or feedback, do not use color or location alone. Ensure there is text, an icon, an underline, or other visual cue to communicate meaning.

Consider how these elements look to a color blind user:

Dialog with a gray leave button, a form field with a gray bottom border, and progress steps in gray without labels
A simulation of what a color blind user might see when only color is used to communicate meaning.

Color contrast

Body and code text

Foreground body and code text (non-bold text under 24px and bold text under 19px) must have a contrast ratio of 4.5:1. Large foreground body and code text (non-bold text of at least 24px and bold text of at least 19px) must have a contrast ratio of 3:1.

Two examples of dark text on light backgrounds and two examples of light text on dark backgrounds

Red text on backgrounds

Red is our primary brand color. It has many applications, but on the web, it does not pass color contrast against all background colors, especially text at small sizes.

If red text cannot be used, use dark gray or black text against lighter backgrounds, or light gray or white text against darker backgrounds. If you have questions about using our other red colors, contact the Brand team.

Several examples of red text over light and dark themed backgrounds showing some that pass and some that fail. There is also an example of dark gray text and black text against a light background as well as an example of light gray text and white text on a dark background.

Red text WCAG requirements

WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and UI elements like form input borders. Use the table below to confirm you are using color contrast correctly before using red text.

The font sizes that are considered normal and large are as follows:

  • Normal - non-bold text under 18pt/24px and bold text under 14pt/19px
  • Large - non-bold text of at least 18pt/24px and bold text of at least 14pt/19px
Background color Contrast ratio Normal text Large text Objects and UI elements
white (#fff) 4.35 WCAG AA: Pass WCAG AA: Pass WCAG AA: Pass
gray-10 (#f2f2f2) 4.04 WCAG AA: Fail WCAG AA: Pass WCAG AA: Pass
gray-20 (#e0e0e0) 3.43 WCAG AA: Fail WCAG AA: Pass WCAG AA: Pass
gray-70 (#383838) 2.58 WCAG AA: Fail WCAG AA: Fail WCAG AA: Fail
gray-80 (#292929) 3.21 WCAG AA: Fail WCAG AA: Pass WCAG AA: Pass
gray-90 (#1f1f1f) 3.63 WCAG AA: Fail WCAG AA: Pass WCAG AA: Pass
gray-95 (#151515) 4.03 WCAG AA: Fail WCAG AA: Pass WCAG AA: Pass
black (#000) 4.63 WCAG AA: Pass WCAG AA: Pass WCAG AA: Pass

To differentiate text links from their surrounding text without relying on color contrast, links in all states must be underlined. Links isolated within visually distinct sections (like navigation menus) or links with additional visual cues (like call to action arrows) are exempt from this requirement, although you can still add underlines at your discretion.

Contrast ratio of a blue link in a paragraph with black text

Graphical objects and UI elements

Graphical objects and UI elements like charts and infographics should have a contrast ratio of at least 3:1. If color is the only way to distinguish between inline controls and surrounding text, the contrast ratio between the control and text must be at least 3:1.

  • Non-color cues like borders must be used to signify when an element receives focus

Layering

You can layer colors on light or dark backgrounds. However, layering colors on top of other colors will cause vibration. For more information about layering colors, follow WCAG 2.1 AA requirements.

Red call to action on a white background, blue button on a light gray background, and a light red-orange button on a black background

Foundations

To learn how to use our other foundations in your designs, visit the foundations section.
Edit this page on GitHub