When Pink and Gray Make Text Hard to Read: Adjusting Brightness and Color Proportions

On a web page or information card that uses pink and gray, lettering can sometimes look too faint. One reason is that the text and its background have similar brightness. You may not need to change the entire palette: darkening the gray text or reducing the area covered by pink can help in different ways. Here are two approaches using the same trial-lesson announcement.

Text becomes hard to read when pink and gray are too close in brightness

Consider light gray ■#A99DA4 text on a pale pink ■#F5DFE8 background. These HEX codes (hexadecimal color values used on the web) produce a contrast ratio of about 2.06:1. A contrast ratio measures the difference in relative brightness between text and its background. Even though pink and gray have different hues, this pair does not provide enough contrast for ordinary-sized text.

Without changing the pink background, switching the text to dark gray ■#33333A raises the contrast ratio to about 9.91:1. Fix the text-background contrast first so people can read the content. Simply making the pink area smaller does not change the ratio between the same two colors.

Two ways to adjust brightness and color coverage

Keep pink across a large area: Use dark gray text

Leave the information card’s background pale pink ■#F5DFE8, but set both the heading and body text to dark gray ■#33333A. Fill the “View Details” button with dark gray ■#33333A and use pale pink ■#F5DFE8 for its label. Both the text on the card and the label on the button have a contrast ratio of about 9.91:1 against their respective backgrounds.

This approach preserves the broad, soft pink area. Differentiate the heading from body text with size and weight, and position the button as a small dark area within the card.

Keep gray across a large area: Limit pink to the heading and button

Change the page background to light gray ■#F2F0F2 and use deep pink ■#873D5B for the heading and button. Put the supporting text in dark gray ■#33333A and set the button label in light gray ■#F2F0F2. The heading on its background and the button label on its button each achieve about 6.50:1; body text against the background achieves about 11.06:1.

In this version, most of the page uses the light gray background, while pink is limited to the heading and main button. Reducing the large pink area helps distinguish the part meant for reading from the main action. There is no universal correct percentage for either color; adjust the proportions to suit the amount and priority of the content.

Check text contrast first, then fine-tune the area of each color

A practical order is to identify the background directly behind the hard-to-read text, calculate its contrast with the text, darken the text or adjust that background if needed, and only then decide how widely to use pink. Make buttons and links recognizable through placement and visual form, not color alone.

WCAG (Web Content Accessibility Guidelines) 2.2 Level AA, one of its conformance levels, generally requires a contrast ratio of at least 4.5:1 for normal-sized text and 3:1 for qualifying large text. The numbers in these examples were calculated for solid, opaque colors. Check the actual display if a photograph or translucent overlay changes the background, or if the text appears smaller on a mobile screen.

HueRoll allows you to adjust colors by entering HEX codes and to check the selected color’s contrast against white or black. It cannot directly compare arbitrary pink and gray color pairs or automatically judge Level AA compliance. The ratios for these custom pairs were calculated separately.