Overview
This tool is built for designers, developers, and reviewers who need to judge color pairs without guessing. It shows the contrast ratio for two colors and helps you understand how that pairing behaves in real interface text, labels, buttons, and panels. Use it when refining themes, reviewing brand colors, or checking a component before it goes live. It is especially useful when a color works visually but becomes hard to read in smaller text, disabled states, or on tinted surfaces.
Use cases
- Body text on a light surfaceCheck whether a paragraph color stays readable against white, off-white, or very pale cards.
- Button label on brand fillTest if a white, dark, or tinted label remains legible on a solid brand button background.
- Muted text in dashboardsVerify whether secondary labels, metadata, and timestamps still stand out on dense data screens.
- Dark mode theme reviewAssess text on charcoal panels, cards, and overlays before shipping a dark interface.
How it works
- 1
Choose the text color and the background color.
- 2
The tool calculates the contrast ratio between both colors.
- 3
Review the result for normal text, larger text, and UI surfaces where readability matters.
Examples
Editorial text on white
Input: Text #1F2937 / Background #FFFFFF
Output: High contrast ratio; suitable for standard reading text.
A typical neutral pairing for articles, forms, and documentation pages.
Brand blue button label
Input: Text #FFFFFF / Background #2563EB
Output: Readable for a solid action button; check sizing for small labels.
Useful when confirming whether a primary CTA can keep white text.
Soft gray caption on a card
Input: Text #6B7280 / Background #F3F4F6
Output: Lower contrast; may fit only when the text is secondary and larger.
Shows why subtle grays can fail on pale surfaces even if they look polished.
FAQ
What does the contrast ratio actually tell me?
It compares how differently two colors are perceived in brightness. A higher value means the text usually stands out more clearly from the background.
Why can a color pair look fine but still feel weak in the result?
Saturated colors can seem vivid while still sitting too close in luminance. The ratio is based on brightness difference, not colorfulness.
Does text size change how I should read the result?
Yes. Smaller text needs a stronger pairing than large headings. A combination that works for a title may be too weak for body copy or form labels.
What is a common mistake when checking buttons and badges?
People often test only the filled state and forget hover, disabled, or outlined versions. Those variants can reduce contrast and break readability.