Color Contrast Examples Gallery
A gallery of measured text and background examples for buttons, cards, alerts, and dense UI surfaces.
What to look for
The same hue can pass or fail depending on lightness and background. Use measured examples to train review habits, then verify the exact color pair in the contrast checker.
Examples
Readable card text
Card text remains readable on a white surface.
Weak muted text
This muted text is too light for important body copy.
Readable info alert
Info message with strong text on a light tint.
Weak badge
Decorative badge text can become difficult to read.
FAQ
How should I use this contrast example reference? v
Use it as a starting point, then test the exact foreground, background, and UI state colors in the context where they will appear.
Are the HEX values ready to copy? v
Yes. The listed values are formatted for CSS, design files, and token documentation.
Should I still check contrast? v
Yes. Any color used for text, icons, controls, or status messages should be checked against its actual background.
Related Color Tools
Open the next tool for this color task.
Color Contrast Checker
converterCheck text and background colors against WCAG ratios.
Accessible Color Combinations for Readable UI
educationalUse accessible color combinations with measured contrast examples for buttons, text, surfaces, and status states.
WCAG AA Color Pairs with HEX Values
educationalPractical AA text and background color pairs.
Accessibility Color Tools - Contrast & WCAG
tool-hubContrast tools and measured accessible color examples.