Stop manually building palettes. Automate your entire color workflow.
The contrast matrix helps you ensure your color combinations meet WCAG accessibility standards for text readability.
Contrast ratio measures the difference in luminance (brightness) between two colors. It's calculated using a formula that compares the relative luminance of the lighter color to the darker color.
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios:
Higher contrast ratios mean better readability, especially for users with visual impairments.
The contrast matrix displays a grid showing contrast ratios between text colors (rows) and surface colors (columns). Each cell shows:
Rows represent text color variants (text.default, text.muted, text.faint)
Columns represent surface color variants (surface.50, surface.100, surface.200, etc.)
Each cell shows the contrast ratio when that text color is placed on that surface
The matrix is color-coded to quickly identify which combinations pass or fail accessibility standards.
The matrix indicates compliance with both WCAG levels:
Minimum contrast for most use cases. Required for most commercial websites and applications.
Higher contrast for enhanced accessibility. Recommended for content that needs to be accessible to users with severe visual impairments.
The matrix visually indicates:
Hover over any cell to see the exact contrast ratio value.
The contrast matrix helps you:
Use the matrix during palette creation to adjust colors until all critical combinations pass WCAG standards.
WebShades is an OKLCH-based color palette generator for UI design and Tailwind CSS. Built by Drew Poling.