Skip to main content

Visual design

The right color combinations make information easier to see and read. Poor color contrast is a very common issue. It affects people with low vision or reduced color perception. Designers must consider the contrast of text, UI elements, charts, and other meaningful graphics. They also need to ensure color alone does not distinguish information.

Level 1

Sufficiently contrast text

    Choose text that sufficiently contrasts with its background

  • What to do

    Ensure text and images of text have sufficient contrast against the background. People with moderately low vision need good text contrast to make content easier to read. Depending on the text size and weight, the requirements for text contrast differ. The minimum contrast for large text (18 point normal or 14 point bold and greater) is 3:1 and for body text (less than 18 point normal or 14 point bold) is 4.5:1. Though the requirements don’t mention contrast for lightweight fonts, it is a good practice to have a higher contrast than normal weight to make them easy to read.

    The color contrast ratio is a calculation comparing the luminance of the foreground text with background colors using a standard formula. See the resources section for links to tools to check your color choices.

    The only exceptions for meeting the contrast requirement are logos or text used on a disabled UI element.

    body of text fades from black to grey with sufficient contrast on white background

    Use text that contrasts well against its background is easier to see by everyone.

    grey body text that fades with insufficient contrast on white background

    Don’t use text below 4.5:1 contrast that makes it difficult to read.

    large bold 'hello' text in purple with sufficient contrast on white background

    Have large text contrast at least 3:1 with its background.

    large bold 'hello' text in grey with insufficient contrast on white background

    Don't use large text that contrasts less than 3:1 with its background.

    Resources
    Requirements
    Related toolkit topics
  • Confirm link text is underlined or contrasts 3:1 with surrounding text

  • What to do

    Users need to easily identify links in content. This is best achieved with a persistent underline on the link text, an established convention. Unfortunately, some designs remove that visual affordance for a “cleaner” look, especially for site navigation. By removing underlines on links within blocks of text, the only visual distinction is differences in the color between link and body text. This decreases discoverability, particularly for low vision users and some with cognitive disabilities. If you are going to remove underlines, be sure the contrast between the link text and the surrounding text is at least 3:1 to help users identify the link. The link text color still needs to contrast 4.5:1 with the background (just like the body text). When a user interacts with a link, an underline must appear on pointer hover and on keyboard focus.

    body text with link text underlined

    Underlining link text is an easy way to help users identify links in content.

    body text with blue link text that has sufficient contrast with surrounding text and background

    If the underline is removed, have link text contrast at least 3:1 with its surrounding text.

    body text with blue link text that has insufficient contrast with surrounding text and background

    Don't remove underlines from link text without sufficiently contrasting with surrounding text (3:1) and the background (4.5:1)

    Resources
    Requirements
    Related toolkit topics
  • Achieve minimum contrast for all text placed over images or gradient backgrounds

  • What to do

    Text placed over an image or on a gradient background can pose barriers to easy reading. You must maintain a 4.5:1 ratio for all body text against the background, and a 3:1 ratio for larger text. The position of the text on the background may vary based on several factors; user resizing of text, breakpoints in responsive design, and motion effects (whether parallax effects during scrolling or animated backgrounds) can all move the text relative to the background. Maintain the minimum contrast in all situations. One solution is providing a semi-transparent background color behind the text.

    white 'This is a title...' text on a black background box to ensure contrast over a complex background image of a wall of storage boxes

    Maintain a minimum contrast ratio for all text placed over an image.

    white 'This is a title...' text on light gradient background with insufficient contrast

    Don't place text on a background that falls below contrast minimums at any point.

    Resources
    Requirements
    Related toolkit topics

Make UI elements distinguishable

    Confirm input fields are discernible

  • What to do

    Text inputs have the same requirements for being discernible as any component. However, because of their essential function, the guidance has been separated from that for other components (covered in the next topic). All inputs have two parts in common: a text label and some kind of operable control. The text label must meet the usual requirements for text (4.5:1 against the background). The non-text visual information necessary to both identify and operate the input must meet a minimum 3:1 contrast ratio with the adjacent colors. Most implementations of a text input have a clear rectangular input region, which:

    • identifies it as an input
    • hints at the potential length of the field
    • provides a region for displaying and editing the text

    At a minimum, the bottom edge of the rectangular input region needs to meet 3:1 contrast with the background. Designers wishing for a more accessible experience should include a full bounding box around the input and ensure it contrasts 3:1.

    Note: There are limited exceptions that need not meet the contrast requirement:

    • Disabled elements that a user can’t interact with
    • Unmodified standard HTML elements
    blue bounding box around input field with Zipcode label above on white background

    The input field has a bounding box that meets 3:1 contrast with its background.

    dark grey underlined input field with Zipcode label above on white background

    This less visible but acceptable input implementation has a darker gray underline providing the 3:1 contrast for the input boundary, not achieved by the light gray rectangle.

    Resources
    Requirements
    Related toolkit topics
  • Contrast components against background

  • What to do

    Ensure the visual information necessary for a user to identify and operate a component has a minimum 3:1 contrast ratio with the adjacent colors. This is in addition to the contrast requirements for any text that is part of the component. The operational affordances (such as chevrons for expanding) as well as the parts that make a component’s purpose obvious (such as the three vertical lines of a hamburger menu) must meet this minimum. In many cases, the operable part of the component will also be the visual distinguisher (such as the square of a checkbox).

    Complex components such as menus have more contrast considerations. A collapsed menu has a visual indicator that it can be opened. However, once the menu is expanded, users need to distinguish between submenus and menu items. Menu items must be distinguishable both from each other (in regard to hit area) as well as from the background area outside the menu. Some of the menu items may be grouped with visual separators. Such visible boundaries can play a crucial role in allowing low vision users, in particular, to properly interact with content. When in doubt, increase the contrast for all visually distinctive parts of a component.

    Note: There are limited exceptions that need not meet the contrast requirement:

    • Disabled elements that a user can’t interact with
    • Unmodified standard HTML elements

    Examples The examples are not exhaustive for every type of UI element. They show how to identify the parts of elements that must meet the contrast requirement.

    expanded overflow menu

    This overflow menu has a clear outline around it, as well as distinct dividers between grouped items.

    dark grey underlined control with black up / down incremental value widget on white background

    The incrementors for this spin button achieve 3:1, as does the darker gray underline for the input boundary, not achieved by the light gray rectangle.

    Resources
    Requirements
    Related toolkit topics
  • Ensure visual states for components have sufficient contrast

  • What to do

    Most components have a variety of states, such as selected, hovered, pressed, expanded, or checked. Visual treatments to indicate state changes may just be a difference of color (such as a button changing hue). Others will involve altering the size or opacity of all or part of a component. Any visual enhancement that indicates a state change needs to maintain a 3:1 contrast ratio against the meaningful adjacent colors, including the background. This ensures users with low vision will continue to see the component. Note that every state does not need to contrast with every other state 3:1 (although the more distinguishable, the better).

    Note: When the design does not use the browser default keyboard focus indication, there are also requirements for the focus indication to be visible, covered in the next topic.

    1. checkbox is both checked and the box is filled black
2. radio button selected is filled with black circle

    Ensure various states, such as selected and unselected, have good contrast.

    3 different examples of white text, 'Primary button on blue background', with 3rd example showing a white bounding border

    The visual treatment for the enabled, hover, active, and focus states of buttons have at least a 3:1 color contrast ratio against the background.

    Resources
    Requirements
    Related toolkit topics
  • Contrast the focus and non-focus states at least 3:1

  • What to do

    Many sighted users rely on the keyboard to navigate and interact with the content. These users need to clearly see where the keyboard focus goes as they navigate. For any focusable elements, be sure the keyboard focus is highly visible. This can be achieved through variations in shape, clear differences in border thickness, or through changes in color. Where color alone is used, use at least a 3:1 contrast ratio:

    • Between the color of the keyboard focus indicator and the color when there is no keyboard focus indicator
    • Between the color of the keyboard focus indicator and its adjacent colors

    It is acceptable to use the browser’s default focus indicator for standard HTML. These defaults are well-established, and transfer effort and responsibility to the browsers. There are two main reasons designers tend to override the defaults. First, the default appearance is not consistent across browsers. Second, some browsers have poor default focus indication for some standard components. However, there are a number of ways users can enhance focus at the operating system level which are adopted by the browser. These system preferences are lost when browser defaults are changed by the author.

    When you override the default focus indicator, it can have other unintended consequences. It is easy to accidentally create situations where the color contrast for the focus indicator isn’t sufficient. Your custom focus indicator may fail in situations where users or assistive technology override your color palette.

    If you do change the focus indicator, it is crucial that you alter rather than suppress it entirely. Meeting the 3:1 contrast requirement detailed here in all situations should ensure a highly visible focus. Take into consideration the focus indicator contrast and visibility in the following conditions:

    • When the focus is on a selected element
    • When the focus is on a pressed element
    • When focus is on an element that already has lines (such as a grid or calendar)

    Pro tip: If the focus indicator consists only of lines or dotted lines, the recommendation is to make them at least two pixels thick.

    Note: Elements that are standard HTML with no styling added need not meet this requirement. In those cases it is up to the browser to render the focus indicator.

    2 similar examples of white text: Button on blue background, with 2nd example showing a white bounding border

    Use strokes that are at least 2px thick for focus indicators that work well in light or dark mode.

    2 states of Entry fields, labels in dark grey with blue border box when focused, on white background

    Maintain at least 3:1 color contrast between the focus indicator and its adjacent color and between the focused and unfocused states of the component.

    Resources
    Requirements
    Related toolkit topics

Contrast meaningful parts of graphics

    Confirm icon shapes have enough contrast

  • What to do

    Ensure a contrast ratio of at least 3:1 between the part of the icon which identifies it and its background color. This helps people with moderately low vision or color blindness see icons more easily. Consider how the icons will appear in MacOS® dark mode theme, or Windows® high contrast mode. Make sure that those using a higher contrast palette can still see the icons with a good contrast.

    Note: The exception to this requirement is a disabled icon, and a user can’t interact with it, where the contrast ratio can be less than 3:1.

    3 example icons in black with light purple background

    Have icons with a contrast of at least 3:1.

    3 example icons in white with lighter purple background

    Don't have icons with a contrast lower than 3:1.

    Resources
    Requirements
    Related toolkit topics
  • For charts, ensure all data representations achieve 3:1 contrast

  • What to do

    Charts and graphs provide a visual means of displaying data. Some parts of the graph may need to be distinguishable in order for the data to be understandable. Each needs to contrast 3:1 or greater against its neighbors and against the background to make it easier for users with moderately low vision or who are color blind to tell the different data points apart.

    There are several techniques to achieve this requirement, and the techniques vary depending on the type of data. For a pie chart, possible techniques include:

    • Make each segment contrast 3:1 against others and the surroundings. This is the easiest solution when a graph contains only a few data points, but with more segments it becomes challenging.
    • Add text labels on the different data segments, which identify and provide equivalent information. As a result, the graph segments are no longer “required to understand the content” and so do not need to meet 3:1 against each other. However, in most circumstances, they still need to sufficiently contrast against the background.
    • Separate each segment of the graph so that they do not abut. Then each needs only contrast 3:1 against the background. A label would still be needed to name the data segments.
    • Use non-color treatments such as texture and shape to distinguish the data segments.
    • Use interaction (via the legend or direct interaction with the chart) to help users clearly discern the actual data segments and associated values.
    wedges of donut chart have black text labels near each wedge

    With the use of labels that include key data, it's not necessary for adjoining colors to have 3:1 color contrast.

    wedges of donut chart using light pastel colors alone

    Don't use colors below 3:1 color contrast against background or adjoining colors for charts that don't have labels.

    wedges of donut chart using alternating dark and light colors contrasting with both adjecent wedge and white background

    Charts without labels must have a 3:1 color contrast with the background as well as adjoining colors.

    wedges of donut chart using alternating dark and light colors with a light pink too light to contrast on white background

    Don’t use colors that fall below 3:1 color contrast, such as the pink segment, for charts without labels.

    Resources
    Requirements
    Related toolkit topics

Level 2

Ensure color is not the only means of conveying information