Contrast Checker Guide
How to test foreground and background color contrast for UI text, buttons, badges, cards, and theme variants.
Quick answer
Enter a foreground color and a background color, then review the contrast ratio and common AA/AAA thresholds. Use the result as a readability check, not as the whole accessibility review.
What this tool does
The contrast checker compares two color values and reports whether the pair meets common WCAG contrast thresholds for normal text, large text, and stricter readability targets.
Step-by-step use
- Enter or paste the foreground color
- Enter or paste the background color
- Check the ratio and threshold results
- Test the pair again for dark mode or alternate surfaces
- Adjust one of the colors if the result is too low
Data handling and processing behavior
Contrast calculations are handled in the browser for this tool. Avoid entering sensitive unreleased design tokens unless you have reviewed the implementation.
Best inputs
- HEX colors
- RGB colors
- HSL colors
- Text and background pairs from UI components
- Sampled colors from screenshots or design assets
Examples
Button text
Test white button text against the final brand background, not only against a palette swatch.
Muted card text
Test gray helper text against the exact card background where it will appear.
Assumptions and limits
- Contrast ratio does not check keyboard focus, screen reader behavior, wording, or motion
- Gradient backgrounds need multiple sample points
- Text size and weight affect the threshold you should use
- Display differences can affect perceived readability
- Passing contrast is helpful but only covers one readability signal
Common mistakes
Testing only one theme
Light and dark mode color pairs need separate checks.
Testing background tokens instead of rendered surfaces
Cards, overlays, gradients, and opacity can change the effective background color.
Next steps
- Color Converter — normalize color values before checking
- Image Color Picker — sample colors from a screenshot or asset
- Color Palette Generator — create candidate colors, then test actual pairs
- Gradient Generator — generate gradients and test text against key color stops