Should flag

Pure black & white

Pure #000 background

Pure #000 text on pure #fff background

Gray on color

Gray text on blue background

Gray text on green background

Low contrast

Light gray text on white — very low contrast

Dark gray text on near-black — low contrast

Welcome to Our Platform

The best solution for modern teams and businesses

Gradient text

Gradient Heading

AI color palette

Purple heading text

Styled <a> and <button> with low contrast

Get started

Tailwind color anti-patterns

bg-black — pure black bg

text-gray-400 on bg-blue-500 — gray on color

text-purple-500 heading

Purple-to-indigo gradient

Should pass

Tinted neutrals

Near-black bg, near-white text — tinted, not pure

Near-white bg, near-black text — good contrast, tinted

Good contrast

Near-white text on dark blue — high contrast, not pure white

Dark green text on green bg — same hue family

Distinctive accents (not AI purple)

Red heading — not AI purple

Amber heading — distinctive

Background-image url() ancestor (not low contrast)

White text on image background — should not flag low-contrast

Tailwind opacity-modified bg-black (not pure black)

bg-black/3 — 3% opacity, not pure black

hover:bg-black/5 — hover state, not pure black

bg-black/50 — 50% opacity, not pure black

Inline <a> without own background (must remain skipped)

Read more about this here if you want to learn more about the topic.

Styled <a> with good contrast (must not flag)

High contrast pill

Emoji on light backgrounds

⚠️ 🚨 ✨ 🎨

⚠️ 🚨 ✨ 🎨