How to Use Color and Design Without Relying on Hover Alone to Convey Information

A website card may look tidy when details such as “Recording available” or “No extra fee” appear only after someone moves a mouse pointer over it. But people using touchscreens may not be able to trigger that effect, and keyboard users may never encounter the information. Important conditions should be readable before any interaction. Hover can then be reserved for optional visual feedback. This guide explains the approach through two fictional workshop cards that clearly show attendance and recording terms.

Why information shown only on hover can go missing

Hover means placing a mouse pointer or similar pointing device over an element. The CSS (Cascading Style Sheets) :hover pseudo-class lets a webpage change a color or reveal text in that state. On touchscreens, however, hover may never occur, may appear momentarily, or may persist unexpectedly. Details such as fees, dates, recording availability, and eligibility should therefore not require hover to be discovered.

For example, hiding the phrase “Recording access for seven days” with display: none; until :hover matches leaves a comparison card incomplete for anyone reading it without a pointer. A safer design gives critical conditions permanent, clearly labeled positions. When space is limited, edit the wording and organize the facts rather than hiding the conditions themselves. Labels such as “Recording available” and “No recording” also communicate the difference without depending solely on blue or yellow.

The Web Content Accessibility Guidelines (WCAG) 2.2 include “Use of Color,” which requires information not to be conveyed by color alone. The separate “Content on Hover or Focus” criterion addresses extra content that appears and disappears when a pointer hovers or keyboard focus changes. With certain exceptions, such popups must be dismissible without moving the pointer or focus, must remain accessible when the pointer moves onto them, and must persist long enough to be used. Our example avoids this complexity by displaying essential facts at all times instead of placing them in popups.

Example: keep recording conditions visible on workshop cards

Imagine two workshop options, one online and one at a venue. Use pale blue-gray ■#F8FAFC behind the cards, white ■#FFFFFF for each card, dark blue-gray ■#1E293B for its heading, and slate ■#475569 for the description. The online card has a pale-blue ■#E0F2FE label with dark-blue ■#075985 words saying “Recording available.” The venue card has a pale-yellow ■#FEF3C7 label with brown ■#92400E words saying “No recording.” The labels have different colors, but their text carries the actual meaning.

Give each card a gray ■#64748B boundary. The link to details uses deep teal ■#0F766E with white ■#FFFFFF text. Its underline and descriptive link label remain visible before hover, making the action identifiable without needing an animation or hidden call-to-action.

<div class="lesson-list">
  <article class="lesson-card lesson-card--online">
    <span class="lesson-card__badge">Recording available</span>
    <h3>Attend online</h3>
    <p>Join this workshop from home.</p>
    <dl>
      <div><dt>Recording access</dt><dd>For 7 days after the event</dd></div>
      <div><dt>Attendance</dt><dd>Online</dd></div>
    </dl>
    <a class="lesson-card__link" href="/courses/online/">
      View online workshop details
    </a>
  </article>
  <article class="lesson-card lesson-card--venue">
    <span class="lesson-card__badge">No recording</span>
    <h3>Attend in person</h3>
    <p>Meet the instructor at the venue.</p>
    <dl>
      <div><dt>Recording access</dt><dd>Not available</dd></div>
      <div><dt>Attendance</dt><dd>At the venue</dd></div>
    </dl>
    <a class="lesson-card__link" href="/courses/venue/">
      View in-person workshop details
    </a>
  </article>
</div>

.lesson-list {
  display: grid;
  gap: 20px;
  padding: 24px;
  background-color: ■#F8FAFC;
}
.lesson-card {
  padding: 20px;
  border: 2px solid ■#64748B;
  border-radius: 12px;
  background-color: ■#FFFFFF;
  color: ■#1E293B;
}
.lesson-card p { color: ■#475569; }
.lesson-card .lesson-card__badge {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background-color: ■#E0F2FE;
  color: ■#075985;
  font-weight: 700;
}
.lesson-card--venue .lesson-card__badge {
  background-color: ■#FEF3C7;
  color: ■#92400E;
}
.lesson-card dl { margin: 16px 0; }
.lesson-card dl div { display: flex; gap: 12px; }
.lesson-card dt { font-weight: 700; }
.lesson-card dd { margin: 0; }
.lesson-card__link {
  display: inline-block;
  margin-top: 8px;
  padding: 12px 16px;
  border-radius: 8px;
  background-color: ■#0F766E;
  color: ■#FFFFFF;
  text-decoration: underline;
}
.lesson-card__link:focus-visible {
  outline: 3px solid ■#1D4ED8;
  outline-offset: 3px;
}
.lesson-card:focus-within { border-color: ■#0F766E; }
@media (hover: hover) {
  .lesson-card:hover { border-color: ■#0F766E; }
  .lesson-card__link:hover {
    background-color: ■#115E59;
    text-decoration-thickness: 3px;
  }
}

The HTML (HyperText Markup Language, which describes a page’s content and structure) contains the recording status, recording period, attendance method, and link from the beginning. The dl element pairs terms such as “Recording access” with values such as “For 7 days after the event.” The CSS @media (hover: hover) condition adds decoration when the primary input method can hover conveniently. It changes the card border and darkens the link, but it never hides or reveals the important information. The :focus-within selector also updates the card border when its link receives keyboard focus, while :focus-visible draws a separate outline around the focused link.

Check colors, keyboard navigation, and touchscreen behavior

On the white card ■#FFFFFF, heading text ■#1E293B has a contrast ratio of approximately 14.63:1 and the slate description ■#475569 measures about 7.58:1. Dark-blue label text ■#075985 against pale blue ■#E0F2FE reaches approximately 6.59:1, while brown label text ■#92400E against pale yellow ■#FEF3C7 reaches about 6.37:1. All exceed the WCAG 2.2 Level AA minimum of 4.5:1 for ordinary-sized text.

White text ■#FFFFFF on the usual deep-teal link background ■#0F766E has a contrast ratio of approximately 5.47:1. On the darker hover background ■#115E59, it reaches about 7.58:1. The gray card border ■#64748B against white ■#FFFFFF measures about 4.76:1, and the teal border ■#0F766E against white measures 5.47:1. The blue keyboard-focus outline ■#1D4ED8 against the white card is approximately 6.70:1, exceeding the relevant 3:1 non-text contrast threshold for a necessary focus indicator. Not every optional hover decoration is itself required to reach a separate 3:1 ratio, but controls must stay identifiable in every state.

Before launch, compare the workshop details without moving the mouse. Then press Tab, Shift+Tab, and Enter to check that both links can be found and activated from the keyboard. On a phone, confirm that the recording conditions are visible and both links respond to touch. If you later add extra popups, test dismissal, pointer movement into the popup, keyboard access, and how long it stays open. The /courses/online/ and /courses/venue/ URLs are illustrative placeholders. HueRoll can help explore colors and check a selected color against white or black, but it does not automatically measure contrast between arbitrary color pairs or certify a link or interface for WCAG conformance.