color palettes

Two colors. A clear answer.

Check the contrast.

Try your foreground and background. See the result, inspect transparency, and find a readable alternative.

4.48:1AA normal text: Fail
Transparency

Solid sRGB layers, foreground over background over canvas. Images, gradients and blend modes need separate inspection.

The suggested foreground keeps the backdrop. It uses full opacity and searches toward black or white; other passing alternatives may exist.

4.48:1Contrast ratio
Aa · A clearer point of view.

Normal text needs its own check. A large heading can pass while this smaller paragraph does not.

Example control boundary

What does a pass mean?

WCAG AA requires 4.5:1 for normal text and 3:1 for large text. Large means at least 18pt (24 CSS px), or 14pt (about 18.67 CSS px) when bold. AAA uses 7:1 for normal text and 4.5:1 for large text. Meaningful non-text boundaries and graphical objects generally need 3:1 against adjacent colors, subject to the criterion’s exceptions.

Decisions use the unrounded ratio: 4.499:1 does not pass 4.5:1. A passing pair does not establish whole-page accessibility, readable typography or distinguishable states. Use words, underlines, icons and shapes where color conveys meaning.