# Minimum Contrast

**MUST** · **ID:** `design-minimum-contrast` · **Category:** design
**Source:** [Vercel](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/design-minimum-contrast

> MUST: Meet contrast—prefer APCA (https://apcacontrast.com/) over WCAG 2

Prefer APCA over WCAG 2 for accurate perceptual contrast

WCAG 2.x contrast ratios have known issues. APCA (Accessible Perceptual Contrast Algorithm) provides more accurate measurements of readability. Aim for APCA values appropriate to text size and weight. Generally, body text should have Lc 60+ and headings Lc 45+.

## Bad — do not do this

`design-minimum-contrast-bad`

```tsx
export function MinimumContrastBad() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4">
        <h3 className="text-lg font-semibold mb-3 text-foreground">Settings</h3>
        <div className="space-y-2">
          <p className="text-sm text-muted-foreground/40">
            This light gray text is hard to read against white background
          </p>
          <button className="px-4 py-2 bg-muted text-muted-foreground/40 rounded-lg text-sm">
            Low Contrast Button
          </button>
        </div>
      </div>
      <p className="text-xs text-error mt-4">
        Insufficient contrast makes text hard to read
      </p>
    </div>
  );
}
```

## Good — do this

`design-minimum-contrast-good`

```tsx
export function MinimumContrastGood() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-4">
        <h3 className="text-lg font-semibold mb-3 text-foreground">Settings</h3>
        <div className="space-y-2">
          <p className="text-sm text-muted-foreground">
            This darker gray meets APCA contrast standards for readability
          </p>
          <button className="px-4 py-2 bg-primary text-primary-foreground rounded-lg text-sm hover:bg-primary/90 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring">
            High Contrast Button
          </button>
        </div>
      </div>
      <p className="text-xs text-success mt-4">
        Proper contrast ensures readability for all users
      </p>
    </div>
  );
}
```

## References

- [APCA Introduction](https://git.apcacontrast.com/documentation/APCAeasyIntro.html)
- [APCA on GitHub](https://github.com/Myndex/SAPC-APCA)