What If Mint Green and White Blend Together? Adjusting Borders and Color Depth

When a mint-green-and-white website looks washed out, making the mint darker is not the only solution. Check where a visible boundary is needed, and reconsider the brightness of text and buttons as well. White cards or input fields on a pale mint background can be especially hard to distinguish. The following product-card and registration-form examples show how to use borders, spacing, and darker colors for different purposes.

Start by comparing mint green with white

Mint green generally describes a fairly light green with a hint of blue. Here we compare pale mint ■#D5F2E7 with a slightly deeper mint ■#AADFCB. These are proposed color values for this article, not the only possible definitions of the color name. HEX is a hexadecimal color code used on the web, written with a hash sign and six letters or digits.

White ■#FFFFFF and pale mint ■#D5F2E7 have a contrast ratio of approximately 1.19:1. Even white ■#FFFFFF against the deeper mint ■#AADFCB reaches only about 1.49:1. A contrast ratio measures the difference in relative brightness between two colors. Slightly darkening mint may therefore leave white surfaces difficult to distinguish, so use outlines or spacing where the boundary matters.

Separate product cards and registration forms clearly

Example A: mint-colored product cards on a white page.Make the page background white ■#FFFFFF and each product card pale mint ■#D5F2E7. Use dark charcoal ■#27372F for the product name, price, and description; charcoal on mint has about 10.57:1 text contrast. Space decorative cards apart, and add a dark gray-green ■#4E7164 outline only where the boundary is important, such as on a selected card. This border has approximately 5.43:1 contrast against white ■#FFFFFF and 4.57:1 against pale mint ■#D5F2E7. A “View Product” button in deep green ■#17624F with white ■#FFFFFF lettering provides about 7.25:1 text contrast.

Example B: white registration fields on a mint panel.Give the form’s surrounding panel a pale mint ■#D5F2E7 fill, with white ■#FFFFFF input fields. Put the field labels in charcoal ■#27372F on mint and the entered text in the same charcoal ■#27372F on white; the latter pair has a contrast ratio of about 12.55:1. Use a gray-green ■#4E7164 outline around the inputs, so the edge is distinguishable against both the white interior and the mint exterior. Use a deep-green ■#17624F submit button with white ■#FFFFFF text to separate the primary action from the input fields.

Keep necessary borders even when adjusting the mint shade

Changing pale mint ■#D5F2E7 to deeper mint ■#AADFCB creates only about 1.25:1 contrast between the two mint shades. If deeper mint is used behind a heading, charcoal ■#27372F on it has approximately 8.44:1 text contrast. However, do not assume that darkening the mint alone will define a white input field clearly enough. The gray-green ■#4E7164 border has about 3.65:1 contrast against the deeper mint ■#AADFCB.

At Level AA, WCAG (Web Content Accessibility Guidelines) 2.2 generally requires at least 4.5:1 contrast for normal-sized text and 3:1 for large text. Visual boundaries or state indicators necessary for identifying a user interface control generally need at least 3:1 contrast against adjacent colors. This does not mean every decorative card needs a dark border. Check at smartphone widths and when navigating by keyboard that input fields and selected states remain recognizable.

HueRoll lets you adjust a color by entering a HEX code and check its contrast against white or black. It cannot compare arbitrary custom color pairs or automatically determine WCAG conformance. The text, border, and background combinations in this article were calculated separately.