How Should You Choose Colors for Tooltips? How to Make Small Text Easy to Read

A tooltip is a UI (user interface) element that shows a short description when a user hovers over an icon or control or moves keyboard focus to it. Because the tooltip itself is small, making the text too faint can make it hard to read. A practical approach is to create strong light-dark contrast between the tooltip surface and its text, keep the trigger’s focus indicator visible, and reserve the tooltip for brief descriptive content.

Give small tooltip text strong contrast against its background

In the following HEX examples, where HEX is a hexadecimal color code used on the web, use charcoal ■#1F2937 for the tooltip background and off-white ■#F9FAFB for the text. The contrast ratio, meaning the difference in relative luminance between foreground and background, is about 14.05:1. The dark surface also separates the tooltip clearly from a white page background.

WCAG (Web Content Accessibility Guidelines) 2.2 Contrast Minimum requires at least 4.5:1 contrast for normal-size text and at least 3:1 for large text. W3C’s Understanding document explicitly notes that these text-contrast requirements also apply to text shown when an element is hovered or receives keyboard focus. Because tooltip text is often small, it is safer to design it to meet the 4.5:1 normal-text threshold.

If supporting text needs to look slightly quieter, light gray ■#E5E7EB on ■#1F2937 still provides about 11.86:1 contrast. Rather than fading the text too far, keep the copy concise and use emphasis only where it helps users scan the message.

Keep the tooltip descriptive and make its relationship to the trigger clear

WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) 1.2 defines role="tooltip" as a contextual popup that provides a description for an element. The trigger can reference the tooltip with aria-describedby so that the relationship between the control and its description is also available programmatically.

MDN likewise describes a tooltip as a contextual text bubble shown on pointer hover or keyboard focus. The tooltip itself does not receive focus, so it is not appropriate for interactive content such as links, form fields, or buttons. If the additional content needs direct interaction, use a different popup pattern rather than treating it as a tooltip.

If the trigger is an information icon, one option is blue-gray ■#475569 on white ■#FFFFFF, which provides about 7.58:1 contrast. If the icon’s meaning is not obvious on its own, give the trigger an accessible name or visible label and avoid putting essential information only inside the tooltip.

Make the tooltip readable from both hover and focus, and provide a clear way to dismiss it

WCAG 2.2 Content on Hover or Focus requires additional content triggered by hover or focus to meet conditions for being dismissible, hoverable, and persistent. W3C’s APG Tooltip Pattern is still a work in progress, but it describes dismissing the tooltip with Escape, keeping focus on the triggering element, and keeping the tooltip visible while the pointer remains over either the trigger or the tooltip.

Keyboard focus should remain visually distinct from the tooltip’s visible state. For example, a blue ■#2563EB focus ring on a white ■#FFFFFF background provides about 5.17:1 contrast. W3C Focus Visible requires a visible focus indicator for keyboard-operable elements. Even when the dark tooltip is open, users should still be able to tell which element currently has keyboard focus.

On a dark page, a light tooltip surface can be a better fit. In that case, recheck the real foreground-background pairs for the tooltip, its trigger, and the focus indicator rather than assuming the same colors will work. In HueRoll, you can adjust candidate colors with three- or six-digit HEX values or the color picker, then compare the selected color with white and black. HueRoll does not compare arbitrary custom color pairs or automatically determine WCAG AA or AAA conformance, so verify the actual adjacent combinations used for the tooltip surface and text separately.