Contrast Matrix
Compare contrast ratios across a color palette.
About This Tool
Compare every color in a palette against every other color and see WCAG contrast pass or fail notes.
This is useful when checking text, badges, chart labels, and design-token combinations before implementation.
| Contrast | ||||
|---|---|---|---|---|
| #111827 | 1.00 Normal text: Fail Large text: Fail | 3.43 Normal text: Fail Large text: Pass | 6.33 Normal text: Pass Large text: Pass | 17.74 Normal text: Pass Large text: Pass |
| #2563EB | 3.43 Normal text: Fail Large text: Pass | 1.00 Normal text: Fail Large text: Fail | 1.84 Normal text: Fail Large text: Fail | 5.17 Normal text: Pass Large text: Pass |
| #F97316 | 6.33 Normal text: Pass Large text: Pass | 1.84 Normal text: Fail Large text: Fail | 1.00 Normal text: Fail Large text: Fail | 2.80 Normal text: Fail Large text: Fail |
| #FFFFFF | 17.74 Normal text: Pass Large text: Pass | 5.17 Normal text: Pass Large text: Pass | 2.80 Normal text: Fail Large text: Fail | 1.00 Normal text: Fail Large text: Fail |
How to Use
- 1
Enter the values you need or paste your text into the input area.
- 2
Adjust any options, units, or settings for your exact use case.
- 3
Review the result and copy it into your document, workflow, or next task.
Features
Instant Results
Outputs update directly in the browser as you enter values.
Browser-Based Processing
Your inputs are handled locally and are not uploaded for calculation.
Simple Inputs
Clear fields and readable outputs keep repeat tasks fast.
Free to Use
Use the tool immediately with no sign-up or installation.
Common use cases
- ›Audit a palette for accessible text/background pairs.
- ›Find usable combinations for buttons, badges, and alerts.
- ›Document contrast ratios for design review.