Color Schemes for Websites with Hard-to-Read Text: What to Review Starting with Background Colors

On a seaside nature tour information page, visitors may struggle to read the meeting point or what-to-bring instructions. Before changing every text color, examine the background immediately behind the words. Text can get lost against a moderately dark blue-gray surface or a photograph. This article shows how to keep the original body-text color while changing the background, then check headings, supporting notes, and the booking button.

Start with the surface behind the text, not just the text color

Readability depends on the combination of the text color and the background beneath it. For example, blue-gray body text ■#566B77 on a medium blue-gray background ■#A7BAC4 has a contrast ratio of approximately 2.78:1. Contrast ratio measures the difference in relative luminance between two colors. That combination does not provide enough contrast for ordinary-size paragraphs.

Keep the same text color ■#566B77 but replace the background with an almost-white blue tint ■#F7FAFC, and the ratio rises to about 5.32:1. This example shows that changing the text is not the only solution. Before adjusting headings and body text separately, establish the surface they will sit on, and check every foreground/background pair.

Photographs, patterns, and gradients require special care because the background changes from place to place. A single HEX (hexadecimal web color code) cannot establish the text contrast over an entire photograph. In CSS (Cascading Style Sheets, the rules that control webpage appearance), background-color is painted behind background images on the same element. Setting a background color alone therefore does not cover an opaque photograph in front of it. For longer text, move the content away from the image or add a separate, fully opaque text panel.

Rebuild the nature tour information area with an opaque background

Imagine a page showing the tour meeting place, duration, equipment list, and booking instructions. Keep photography in the upper part of the page and place longer explanations on their own information panel. Use pale blue-gray ■#E7EDF1 for the outer page and almost-white ■#F7FAFC for the text panel. Preserve the original body color ■#566B77 and use a deeper blue-gray ■#213B4B for headings.

After the change, the body text ■#566B77 against the main panel ■#F7FAFC reaches about 5.32:1. On the pale-blue what-to-bring note ■#E4EFF4, the same text ■#566B77 reaches about 4.77:1. Headings ■#213B4B against the main panel ■#F7FAFC reach about 11.18:1. Supporting information can have a different background without sacrificing the required text contrast.

For example, CSS can give the text container its own opaque background. If a photograph has been specified as a background on that same element, remove it with background-image: none, or place a separate opaque panel in front of the photograph.

.tour-guide-panel {
  background-image: none;
  background-color: rgb(247 250 252);
  color: rgb(86 107 119);
  padding: 24px;
  line-height: 1.7;
}
.tour-guide-panel h2 { color: rgb(33 59 75); }
.tour-guide-note {
  background-color: rgb(228 239 244);
  color: rgb(86 107 119);
  padding: 16px;
}

Also check supporting text, borders, and mobile layouts

Under the Web Content Accessibility Guidelines (WCAG) 2.2, normal-sized text generally requires contrast of at least 4.5:1, while qualifying large text requires at least 3:1. Even after fixing the background, pale text ■#8FA2AD on the new panel ■#F7FAFC reaches only about 2.52:1. Do not make supporting notes unreadably faint. Use spacing, weight, and hierarchy as well as color to distinguish them.

The booking button has white text ■#FFFFFF against deep blue ■#205A72, giving a contrast ratio of about 7.59:1. The blue directions link ■#205A72 against the main panel ■#F7FAFC reaches about 7.24:1, and is also underlined so its purpose does not depend on color alone. The outer page ■#E7EDF1 and information panel ■#F7FAFC are only about 1.13:1 apart, so use a border ■#6A7B88 if the boundary needs to be visible. This border contrasts with the inner panel ■#F7FAFC at about 4.17:1 and with the outer page ■#E7EDF1 at about 3.70:1. Where borders convey information needed to understand or operate an interface, check their non-text contrast against adjacent colors as well.

Finally, review text wrapping, line spacing, and photograph cropping on a phone. An opaque reading panel keeps the background behind its text stable, even if the photograph changes brightness elsewhere. HueRoll can display a selected color’s HEX value, related colors, and contrast against white or black. It cannot automatically compare any arbitrary two colors or assign WCAG AA/AAA results. The color-pair contrast ratios here were calculated separately.