What Text Color Works on a Bright Green Background? Choosing a Readable Color Scheme

A bright green background can give a website a fresh, light appearance. However, the brighter the green becomes, the less contrast it may have with white or other pale lettering. A large headline might attract attention while smaller instructions become difficult to read. Using a plant sketching class registration page as an example, this article explains how to choose text colors by checking their contrast against the actual background.

Choose dark lettering rather than white on bright green

When choosing a text color, consider more than which color seems to match green. Check its contrast ratio against the background. Contrast ratio is a numerical comparison of the relative brightness of the foreground and background. WCAG 2.2 (Web Content Accessibility Guidelines, international guidelines for making web content accessible) requires at least 4.5:1 for normal-sized text at Level AA, or 3:1 for text that qualifies as large.

For example, white text ■#FFFFFF on bright green ■#88F2A2 has approximately 1.38:1 contrast. This is below the threshold for both normal and large text. Changing the letters to dark charcoal green ■#20342A produces approximately 9.63:1 contrast against the same bright green. Colors can belong to the same broad hue family and still be clearly distinguishable when their brightness differs enough.

On an even more saturated yellowish green ■#3DFF6E, white ■#FFFFFF reaches only about 1.34:1, whereas charcoal green ■#20342A provides approximately 9.92:1. A muted gray-green ■#6B8773 on the original bright green ■#88F2A2 achieves only about 2.86:1, so it is unsuitable for small secondary text. Do not assume that every subdued or medium-dark color will work: test the exact combination.

Example: colors for a plant sketching class registration page

Use bright green ■#88F2A2 for a prominent band containing the course title and date. Set the heading in charcoal green ■#20342A, which provides approximately 9.63:1 contrast, and use deep green ■#274D39 for the date and other details, which provides approximately 6.92:1. Both exceed the 4.5:1 normal-text threshold. This allows the banner to carry essential details as well as a heading without sacrificing contrast.

Put longer explanations, such as what to bring and how the class works, on a separate off-white surface ■#F7FCF8 with charcoal-green body text ■#20342A. That combination has approximately 12.76:1 contrast. A supporting information section could use an even paler green ■#DDFBE5 with the same text color ■#20342A, producing about 11.98:1. Lightening the surfaces helps distinguish their roles; it does not mean the text needs to become pale too.

For a “Register for the Class” button inside the bright-green banner ■#88F2A2, consider a dark blue-gray button background ■#1C3C53 with white lettering ■#FFFFFF. The white label has approximately 11.53:1 contrast against the button, while the button’s dark background differs from the surrounding green ■#88F2A2 by approximately 8.39:1. Use spacing and an obvious button shape as well as color to make the action recognizable.

Recheck small text, status messages, and screen sizes

Do not fade important words merely because they are secondary information. Class dates, fees, and registration deadlines all need adequate contrast. For example, pale cream ■#FFF7D6 on bright green ■#88F2A2 has only about 1.28:1 contrast. The palette might look gentle, but that does not make the cream a suitable text color.

Communicate states such as “Registration Open” or “Registration Closed” in words rather than only through green or gray. Check the foreground and background again when a button is hovered (the mouse pointer is over it) or focused (selected for keyboard input), and make sure any necessary focus outline remains visible against adjacent colors. Recheck the layout on smartphones, especially if type sizes or background sections change.

HueRoll lets you enter a HEX code (a hexadecimal color value), select a color, and view its contrast against white or black. It does not compare arbitrary pairs of colors or automatically judge WCAG AA or AAA pass/fail status. The contrast ratios here for green against other colored text are calculated separately. Verify the finished page’s actual text, backgrounds, and interactive states before publishing.