Build a readable card with color, contrast and restrained shadows

A palette generator can suggest colors, but it cannot decide whether a button label is readable or a link is distinguishable. Start with the content and give each color a role. This exercise creates a simple content card that you can inspect in your own page.

1. Assign roles before adding decoration

Use a light surface, dark body text, a quieter secondary text color and one accent for links or actions. For example, start with surface #ffffff, body #0f172a, secondary #475569 and accent #3730a3. These are starting values for the specific pairs in the example, not a claim that every combination in a palette is accessible.

Use Color Palette Generator to explore alternatives. If you change a color, test its contrast against the background where it will actually appear. A palette that looks harmonious can still contain unreadable text pairs.

2. Implement a small card

Try this CSS in a page you control:

.article-card {
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
.article-card p { color: #475569; line-height: 1.7; }
.article-card a { color: #3730a3; text-decoration: underline; }
.article-card a:focus-visible {
  outline: 3px solid #3730a3;
  outline-offset: 4px;
}

The border distinguishes the card even if the shadow is hard to see. Underlining means the link does not rely on color alone. The focus outline helps a keyboard user locate the active link. Use Box Shadow Generator or Border Radius Generator to adjust a value, then inspect the generated CSS before copying it.

3. Check contrast for the actual text size

WCAG 2.2’s AA minimum for ordinary text is 4.5:1; large text has a 3:1 threshold under the criterion’s size and weight definitions. These numbers describe text contrast, not a guarantee that an entire page meets WCAG. Use a contrast checker with each foreground/background pair instead of judging by a color’s name or brightness alone.

If you add a gradient, check contrast at the lightest and darkest positions behind the text. A solid text panel is often easier to inspect than text directly over a changing image or gradient. Gradient Generator creates CSS; it does not certify readability.

4. Test the interaction and both themes

At a narrow phone width, the title and body should wrap without overlapping the link or overflowing the card. Increase browser text size and check the same layout. Use Tab to reach the link and confirm that the outline is visible. These checks reveal issues a static screenshot misses.

For a dark theme, define its own surface, text, border and focus colors. Simply inverting a background while retaining low-contrast secondary text can make a readable light card fail. Test the real pairs again, including visited links, hover states and disabled controls if present.

Use the generators as helpers for individual CSS values. The finished result still needs content, contrast and keyboard checks in the actual page.

Reference

• W3C: understanding minimum text contrast