Ensure your website is accessible and readable with our color contrast checker. This tool helps you verify if your colors meet the WCAG 2.1 standards for contrast, ensuring compliance for normal text, large text, and user interfaces. Enter your colors and instantly see if they pass accessibility guidelines for better, more inclusive design.
Foreground Color
Background Color
Contrast Ratio: pick colors
WCAG AA
WCAG AAA
WCAG AA
WCAG AAA
Bold Text
/Large Text
User Interface
WCAG AA
| Colors | White | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 | Black |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1.08:1 | 1:1 | 1.37:1 | 1.94:1 | 2.83:1 | 4.17:1 | 6.12:1 | 7.99:1 | 9.38:1 | 11.68:1 | 14.2:1 | 16.64:1 | 19.53:1 | |
| 1.47:1 | 1.37:1 | 1:1 | 1.42:1 | 2.07:1 | 3.04:1 | 4.46:1 | 5.83:1 | 6.84:1 | 8.52:1 | 10.36:1 | 12.14:1 | 14.25:1 | |
| 2.09:1 | 1.94:1 | 1.42:1 | 1:1 | 1.46:1 | 2.15:1 | 3.15:1 | 4.12:1 | 4.83:1 | 6.02:1 | 7.32:1 | 8.57:1 | 10.06:1 | |
| 3.05:1 | 2.83:1 | 2.07:1 | 1.46:1 | 1:1 | 1.47:1 | 2.16:1 | 2.82:1 | 3.31:1 | 4.12:1 | 5.01:1 | 5.87:1 | 6.89:1 | |
| 4.49:1 | 4.17:1 | 3.04:1 | 2.15:1 | 1.47:1 | 1:1 | 1.47:1 | 1.91:1 | 2.25:1 | 2.8:1 | 3.4:1 | 3.99:1 | 4.68:1 | |
| 6.58:1 | 6.12:1 | 4.46:1 | 3.15:1 | 2.16:1 | 1.47:1 | 1:1 | 1.31:1 | 1.53:1 | 1.91:1 | 2.32:1 | 2.72:1 | 3.19:1 | |
| 8.59:1 | 7.99:1 | 5.83:1 | 4.12:1 | 2.82:1 | 1.91:1 | 1.31:1 | 1:1 | 1.17:1 | 1.46:1 | 1.78:1 | 2.08:1 | 2.44:1 | |
| 10.09:1 | 9.38:1 | 6.84:1 | 4.83:1 | 3.31:1 | 2.25:1 | 1.53:1 | 1.17:1 | 1:1 | 1.25:1 | 1.51:1 | 1.77:1 | 2.08:1 | |
| 12.56:1 | 11.68:1 | 8.52:1 | 6.02:1 | 4.12:1 | 2.8:1 | 1.91:1 | 1.46:1 | 1.25:1 | 1:1 | 1.22:1 | 1.42:1 | 1.67:1 | |
| 15.27:1 | 14.2:1 | 10.36:1 | 7.32:1 | 5.01:1 | 3.4:1 | 2.32:1 | 1.78:1 | 1.51:1 | 1.22:1 | 1:1 | 1.17:1 | 1.38:1 | |
| 17.89:1 | 16.64:1 | 12.14:1 | 8.57:1 | 5.87:1 | 3.99:1 | 2.72:1 | 2.08:1 | 1.77:1 | 1.42:1 | 1.17:1 | 1:1 | 1.17:1 |
Our color contrast checker helps web designers and developers ensure that their color combinations meet the WCAG 2.1 guidelines for accessibility. Proper contrast between text and background, as well as between user interface components, is crucial for creating accessible web designs that everyone can read, including individuals with visual impairments.
Using the official WCAG formula, our tool evaluates whether your chosen colors meet the following standards:
By meeting these standards, your site will be more readable, user-friendly, and accessible to everyone, including users with color blindness or low vision. Whether you're testing color combinations for text, background, or UI elements, our contrast checker provides instant feedback on whether your design passes WCAG compliance. This ensures that your website follows best practices for web accessibility and improves overall user experience.
Accessible color contrast also positively impacts your SEO, as search engines prioritize sites with strong usability and accessibility features. Ensuring proper color contrast can reduce bounce rates, increase engagement, and ensure compliance with global web standards.