Color Contrast for Taste, Not Just Compliance

Passing a WCAG contrast checker is necessary but not sufficient for good visual hierarchy. A page where every piece of text is pure black on white technically passes AAA everywhere and still has no hierarchy at all — nothing is quieter than anything else.

When to use

• Establishing a text color system for a new product or design system.
• Reviewing an interface that feels flat or, conversely, harsh and high-contrast everywhere.

Principles

• Use at least three text-color tiers — primary, secondary, muted — each meeting a different minimum contrast target on purpose: primary for body/headings (≥7:1 ideally), secondary for supporting text (≥4.5:1), muted for metadata/timestamps (≥3:1, non-text-adjacent use only).
• Never drop below 4.5:1 for any text that conveys meaning on its own (labels, body copy, button text). The 3:1 tier is only for decorative or purely supplementary text (a timestamp next to a message that already has full context).
• Accent color should be reserved for interactive/actionable elements. If everything is colored, the accent stops signaling "you can act on this."

Instructions

1. Define primary/secondary/muted text tokens up front and check each against your actual background color with a contrast checker — don't eyeball it.
2. Use muted text sparingly and never as the only text in a UI element a user needs to read to complete a task.
3. Reserve the accent color for links, primary buttons, active/selected states, and status — not for headings or decorative flourishes.
4. When in doubt between two shades for a given tier, pick the one with higher contrast — visual quietness comes from restraint in what gets colored, not from every individual color being washed out.
5. Re-verify contrast in both light and dark themes independently; a ratio that works in light mode does not automatically translate.

Examples

--text-primary: #181817;   /* ~16:1 on #F7F7F2 */
--text-secondary: #686863; /* ~5.3:1 on #F7F7F2 */
--text-muted: #92928A;     /* ~3.1:1 — decorative/metadata only */

Avoid

• Don't use the muted tier for any text a user must read to understand the interface's state (error messages, required labels).
• Don't add a second accent color "for variety" — a single accent color used consistently reads as more intentional than two competing ones.

References

• WCAG 2.2 Success Criterion 1.4.3 (Contrast Minimum) and 1.4.6 (Contrast Enhanced) as the compliance floor, not the design target.