Color Contrast Matrix Generator
Compare text colors against background colors, calculate WCAG contrast ratios, and identify accessible combinations.
Contrast generator
Results
Introduction
Color contrast is one of the most common accessibility failures on the web. A design system may contain many color combinations, and manually checking each pair is slow and error-prone.
This tool generates a full matrix so you can quickly see which text and background combinations meet WCAG contrast expectations.
How it works
The tool parses each color, converts it to RGB, calculates relative luminance, and applies the WCAG contrast ratio formula. Results are rendered locally.
- Colors are normalized using a canvas context.
- Transparent colors are excluded.
- Duplicate colors are removed.
- Ratios are rounded to two decimal places.
How to use
- Add text colors.
- Add background colors.
- Click Generate contrast matrix.
- Review pass/fail badges for AA, AAA, and UI components.
- Copy the report for documentation or design reviews.
Practical example
If your design system has three text colors and four background colors, the tool evaluates twelve combinations and shows which pairs are safe for body text, large text, and interface components.
Use cases
- Auditing a brand palette.
- Checking design tokens before implementation.
- Reviewing dark-mode and light-mode combinations.
- Finding accessible button label colors.
- Documenting accessibility decisions.
Best practices
- Prefer combinations that pass normal-text AA.
- Use AAA where readability is especially important.
- Check focus indicators and icons against the 3:1 UI threshold.
- Test colors in both light and dark themes.
- Do not rely on color alone to convey meaning.
Common mistakes
- Testing only one or two obvious color pairs.
- Using transparent colors without defining the composite background.
- Assuming large-text exemptions apply to all UI text.
- Ignoring disabled, hover, and focus states.
- Checking contrast only in design software previews.
Limitations
- Transparent colors are not evaluated.
- Gradients and images require manual sampling.
- The tool does not detect actual font size or weight.
- WCAG contrast is a useful baseline but does not cover all visual accessibility needs.
Browser compatibility
The tool works in current versions of major browsers. Color parsing uses standard canvas color normalization.
FAQ
Are my colors uploaded?
No. All calculations happen locally in your browser.
Why are transparent colors excluded?
A transparent color’s final appearance depends on the background it is composited over. WCAG contrast should be calculated against the resulting opaque color.
What is the UI component threshold?
Many interface elements, such as icons and control borders, should meet a 3:1 contrast ratio against adjacent colors.
Does passing this matrix guarantee WCAG conformance?
No. It helps evaluate color contrast, but full conformance requires broader accessibility testing.