Color Contrast Checker
Add the colours in your design palette and instantly check every foreground/background combination against accessibility standards. See which pairs pass or fail, get suggested fixes, and export a full report. Nothing uploaded.
Your Palette (max 12 colours)
Paste Tailwind Config (extracts hex values automatically)
Filter
Contrast Matrix - click any cell to preview
Preview
Export
All colour pairs with contrast ratio and WCAG pass/fail status.
Contrast ratios and WCAG standards
How contrast ratio is calculated
Contrast ratio measures the brightness difference between foreground and background colors. It's calculated from the relative luminance of each color using a formula that weights human eye sensitivity to different wavelengths (green appears brighter than red at the same intensity). The ratio ranges from 1:1 (no difference) to 21:1 (maximum contrast, like black on white). This tool calculates the ratio for every pair in your palette and checks it against WCAG levels.
AA vs. AAA standards
WCAG AA requires 4.5:1 contrast for normal text (14px and below) and 3:1 for large text (18pt+ or 14pt bold). Most websites and apps must meet AA as a legal baseline. WCAG AAA requires 7:1 for normal text and 4.5:1 for large text, and is aimed at users with low vision. AAA is not required for all content, but recommended for educational sites, government, and healthcare.
FAQ
Why does my color pair pass the contrast test but still looks hard to read?
Contrast ratio measures brightness difference, not color difference. A red text on green background can have high contrast but cause eye strain due to color vibration. Always test with actual text at actual size - the calculator shows a preview, so check that too.
Can I use this tool to check my already-deployed website?
This tool checks static color pairs. For a full website audit, use a browser extension like WAVE or axe to test interactive components, form fields, and focus states. Those have their own contrast rules.
Do disabled buttons need to meet WCAG contrast standards?
No. Disabled UI components are exempt from contrast requirements under WCAG 2.1. However, it's still good practice to make them at least 3:1 so users aren't confused about which elements are unavailable.