Skip to main content Home
About About the Design SystemRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridIconographyInteractionsSpacingTypography
Tokens Overview Global colorbox shadowTypographyborderopacityspacelengthIconBreakpointsMedia Queries
Elements All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Navigation (primary) Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Theming OverviewColor PalettesCustomizingDevelopers
Patterns All PatternsCardTabsFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTileVideo thumbnail
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Color

OverviewUsageAccessibility
ApproachUsing color aloneColor contrastApproachUsing color aloneColor 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 rely solely upon color. Use text, icons, underlines, or other visual cues to communicate meaning.

Consider how these elements might 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.

Note that the emphasis here is on "solely," as we often do use color to enhance the visual design of our digital experiences. As stated in the WCAG criterion on color usage, "This should not in any way discourage the use of color on a page, or even color coding if it is complemented by other visual indication."

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 next to black text and an example of a link's darker blue, underlined hover state

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
© 2021-2025 Red Hat, Inc. Deploys by Netlify