diff --git a/docs/assets/color/color-a11y-contrast-body-code-text.png b/docs/assets/color/color-a11y-contrast-body-code-text.png new file mode 100644 index 0000000000..d5b644ea77 Binary files /dev/null and b/docs/assets/color/color-a11y-contrast-body-code-text.png differ diff --git a/docs/assets/color/color-a11y-contrast-layering.png b/docs/assets/color/color-a11y-contrast-layering.png new file mode 100644 index 0000000000..4cd5d27a28 Binary files /dev/null and b/docs/assets/color/color-a11y-contrast-layering.png differ diff --git a/docs/assets/color/color-a11y-contrast-links.png b/docs/assets/color/color-a11y-contrast-links.png new file mode 100644 index 0000000000..bbe72e6d36 Binary files /dev/null and b/docs/assets/color/color-a11y-contrast-links.png differ diff --git a/docs/assets/color/color-a11y-contrast-red-text-on-bgs-alert.png b/docs/assets/color/color-a11y-contrast-red-text-on-bgs-alert.png new file mode 100644 index 0000000000..d2f0930c4f Binary files /dev/null and b/docs/assets/color/color-a11y-contrast-red-text-on-bgs-alert.png differ diff --git a/docs/assets/color/color-a11y-contrast-red-text-on-bgs.png b/docs/assets/color/color-a11y-contrast-red-text-on-bgs.png new file mode 100644 index 0000000000..d20a1ab9f8 Binary files /dev/null and b/docs/assets/color/color-a11y-contrast-red-text-on-bgs.png differ diff --git a/docs/assets/color/color-a11y-using-color-alone.png b/docs/assets/color/color-a11y-using-color-alone.png new file mode 100644 index 0000000000..5e01502240 Binary files /dev/null and b/docs/assets/color/color-a11y-using-color-alone.png differ diff --git a/docs/foundations/color/accessibility.md b/docs/foundations/color/accessibility.md index 1a820b82cc..62af92fa46 100644 --- a/docs/foundations/color/accessibility.md +++ b/docs/foundations/color/accessibility.md @@ -10,8 +10,21 @@ subnav: collection: sortedColor order: 3 permalink: /foundations/color/accessibility/index.html +importElements: + - rh-alert + - rh-table --- + + + ## Approach At our core, we believe in creating interactions and experiences that are @@ -20,61 +33,149 @@ accessible to everyone. ## Using color alone -When considering methods of communication or feedback, do not use color (or -location) alone. Ensure there is a text label, icon, underline, or other visual -cue to communicate meaning. Consider how the following elements would look to a +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 red-orange Leave button, a form field with a red bottom border, and progress steps without labels +
+ 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. -## Contrast -We strive to adhere to [WCAG 2.1 AA](https://www.w3.org/WAI/WCAG21/Understanding/) requirements. Our text, links, interface elements, etc. are designed with sufficient contrast when used on top -of a canvas, surfaces, image backgrounds with low contrast, and near adjacent colors. +### Red text on backgrounds -### Text +Our primary brand color is known as Red Hat red (`#E00`). It has many applications, but on the web, it does not pass color contrast against all background colors, especially text at small sizes. -Small foreground text (non-bold text under 24px and bold text under 19px) must -have a contrast ratio of 4.5:1 and large foreground text (non-bold text of at -least 24px and bold text of at least 19px) must have a contrast ratio of 3:1. +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 other red colors, contact the [Brand team](https://www.redhat.com/en/about/brand/standards). - - Contrast ratios for dark gray sections with black text that uses different weights and fonts + +

Warning

+ Black is usually a brand-only color, but it can be used very sparingly for backgrounds only if gray-95 cannot be used. + + + + 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. -### Links +#### 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 components 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 colorContrast ratioNormal textLarge textObjects and UI components
white (#fff)4.53WCAG AA: PassWCAG AA: PassWCAG AA: Pass
gray-10 (#f2f2f2)4.04WCAG AA: FailWCAG AA: PassWCAG AA: Pass
gray-20 (#e0e0e0)4.04WCAG AA: FailWCAG AA: PassWCAG AA: Pass
gray-70 (#383838)2.58WCAG AA: FailWCAG AA: FailWCAG AA: Fail
gray-80 (#292929)3.21WCAG AA: FailWCAG AA: PassWCAG AA: Pass
gray-90 (#1f1f1f)3.63WCAG AA: FailWCAG AA: PassWCAG AA: Pass
gray-95 (#151515)4.03WCAG AA: FailWCAG AA: PassWCAG AA: Pass
black (#000)4.63WCAG AA: PassWCAG AA: PassWCAG AA: Pass
+ -If color is the only way to distinguish between links and surrounding text (e.g., if link underlines are removed), the contrast ratio between the link and surrounding text must be at least 3:1. -- Non-color cues must be used to signify when the link receives hover or focus (e.g., an underline) +### Links + +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 (e.g., navigation menus) or with additional visual cues (e.g., CTA arrows) are exempt from this requirement, though you may 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 + + 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 components -Graphical objects and UI components should have a contrast ratio of at least 3:1 -(e.g., within charts and infographics). If color is the only way to -distinguish between inline controls and their surrounding text, the contrast -ratio between the control and text must be at least 3:1. +Graphical objects and UI components 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 (e.g., a border) must be used to signify when the element receives focus +- Non-color cues like borders must be used to signify when an element receives focus ### Layering -It is acceptable to layer colors with the same hue, saturation, or lightness on -white, black, or gray. However, layering them near or on top of each other might cause vibration. If you need to layer colors, follow [WCAG 2.1 AA](https://www.w3.org/WAI/WCAG21/Understanding/) -requirements. +You can layer colors on light or dark backgrounds. However, layering colors near or on top of other colors will cause vibration. For more information about layering colors, follow [WCAG 2.1 AA](https://www.w3.org/WAI/WCAG21/Understanding/) requirements. - - Red CTA against a white background, blue button against a light gray background, and a light red-orange button against a black background + + Red CTA against a white background, blue button against a light gray background, and a light red-orange button against a black background -### Tools +## Tools -TPGi’s [Colour Contrast Analyzer](https://www.tpgi.com/color-contrast-checker/) can help you identify colors and gauge their contrast from one another. +The [Colour Contrast Analyzer](https://www.tpgi.com/color-contrast-checker/) by TPGi can help you identify colors and gauge their contrast from one another.

Foundations