Topics

  • can have an impact on people with vision deficits such as color-blindness, low vision and blindness.
  • Complications can occur because some people cannot read text if there is not sufficient contrast between the text and background.
    • For example, light gray text on a light background.
  • Another point to consider is: information and instructions must be communicated in a way that can be understood regardless of the ability to recognize colors.
    • For example: active menu items are not just highlighted by color, but are also underlined.
screenshot of a colour contrast analyser
screenshot of a bad example

Color should not be used as the only visual means of conveying information.

WCAG accessibility criteria for color use

WCAG 2.1

Recommendation

Explanation/ Example

1.4.1 Use of Color (A)

  • Color alone is not used to distinguish links from surrounding text unless the contrast ratio between the link and the surrounding text is at least 3:1 and an additional distinction (e.g., it becomes underlined) is provided when the link is hovered over and receives focus.

 

1.4.3. Contrast (Minimum) (AA)

  • Text and images of text have a contrast ratio of at least 4.5:1.
  • Large text - at least 18 point (typically 24px) or 14 point (typically 18.66px) and bold - has a contrast ratio of at least 3:1.

 

1.4.6 Contrast (Enhanced) (AAA)*

  • Text and images of text have a contrast ratio of at least 7:1.
  • Large text - at least 18 point (typically 24px) or 14 point (typically 18.66px) bold - has a contrast ratio of at least 4.5:1.

 

1.4.8 Visual Presentation (AAA)*

  • Blocks of text. Have a specified foreground and background color. These can be applied to specific elements or to the entire page using CSS (and thus inherited by all other elements).

For enabling high contrast mode and dark mode.

1.4.11 Non-text Contrast (AA)

  • A contrast ratio of at least 3:1 is present for differentiating graphical objects (such as icons and components of charts or graphs) and author-customized interface components (such as buttons, form controls, and focus indicators/outlines).
  • At least 3:1 contrast must be provided in the various states (focus, hover, active, etc.) of author-customized interactive components.

 

2.4.7 Focus Visible (AA)

  • It is visually apparent which page element has the current keyboard focus (i.e., as you tab through the page, you can see where you are).

 

2.4.11 Focus Appearance (Minimum)(AA)**

  • When user interface components receive keyboard focus, the area of the focus indicator has a contrast ratio of at least 3:1, has an outline of at least 1px width.
  • The contrasting area also has a contrast ratio of least 3:1 against adjacent colors in the focused component, or the contrasting area has a thickness of at least 2 CSS pixels.

Will be in WCAG 2.2

Legend: *= Level AAA is not in the mandatory scope of UBS. **= Upcoming SC with WCAG 2.2, currently a draft

What to check for

  • Text on webpages has a minimum contrast by default;
    • Standard font: Contrast ratio of at least 4.5:1
    • Large font (at least 18 pt (~25px)): Contrast ratio of at least 3:1
    • UI elements like buttons, inputfields at least 3:1
  • Color is not used as the only visual means of conveying information.Color alone is not used to distinguish links from surrounding text unless the luminance contrast between the link and the surrounding text is at least 3:1 and an additional differentiation (e.g., it becomes underlined) is provided when the link is hovered over or receives focus.

How to check

  • Use a tool like 'Web Accessibility Toolbar' for IE or the free app 'Color Contrast Analyser' or an online color contrast analyzer.
  • Ensure that the tool uses the WCAG 2 color measuring algorithms.

Links

System provides good defaults
This label indicates that the system provides already good defaults and that editors can rely upon them.