Contrast Checker
The Contrast Checker helps test whether a foreground color is readable against a background color. This matters for body text, buttons, labels, links, cards, alerts, navigation, and form controls.
Need step-by-step help?
Read the full how-to for Contrast Checker
If you want a clearer explanation of what each control does and how to finish a real task with the tool, use the dedicated guide.
When to use this tool
- • choosing text and background colors
- • designing buttons or badges
- • testing links
- • building light and dark themes
- • checking alert colors
- • creating accessible UI states
- • validating a palette before using it in production
Contrast guidance
Use contrast as a minimum readability check, not the whole design decision. A pair can pass and still feel weak, or fail even if the colors seem different by hue.
- foreground text vs background
- button text vs button fill
- icon color vs background
- focus ring vs surrounding surface
- disabled state vs active state
- chart colors vs neighboring colors
Button design
Test the button text against the button background. A bright button may need dark text instead of white text.
Body text
Body text needs stronger contrast than large decorative headings. Light gray text can look subtle but quickly become difficult to read.
Cards and surfaces
A card background should be distinct from the page background, and the text inside the card should remain readable.
Dark mode
Dark mode is not just inverted light mode. Muted text, borders, and focus states need their own contrast checks.
Failure and edge-case guidance
The pair fails contrast
Adjust lightness first. Make the text darker, the background lighter, or reduce the background’s saturation before throwing away the palette.
The pair barely passes
A barely passing pair may still feel weak in real use, especially for small text, thin fonts, or mobile screens.
The pair passes for large text only
Do not use it for body copy or small labels. Large-text thresholds are less strict because large text is easier to read.
The background is a gradient or image
Test the lowest-contrast area, not just the part where the text looks best.
What to do after checking contrast
- 1. Test the passing pair in the actual layout because context still matters.
- 2. If it fails, use shades and tints to preserve the hue while improving readability.
- 3. Use the palette generator only after the important text pairs are stable.
Related links
Refine the pair after the ratio check
Color Accessibility & Contrast
Read the deeper accessibility guidance behind the contrast number.
Open
Shade & Tint Generator
Create darker or lighter variants when a pair is close but not quite usable.
Open
Color Converter
Normalize the same color in the format you need after you confirm it is readable.
Open
Color Palette Generator
Build broader palettes only after the critical readable pairs are working.
Open
FAQ
Questions people usually ask next
Does passing contrast guarantee accessibility?
No. Contrast is one part of accessibility. Layout, keyboard navigation, labels, focus states, and screen reader support also matter.
What should I do if my brand color fails?
Create accessible variants of the brand color. A brand color may work for logos but need darker or lighter UI versions.
Should disabled text meet the same contrast?
Disabled states have different considerations, but they should still be understandable in context and not confused with active content.
Why do two very different colors sometimes fail?
Different hues can still have similar brightness. Contrast depends heavily on relative luminance, not just color name.