Color Contrast Checker
Ensure your designs are inclusive. Check your color pairs against WCAG 2.1 standards for readability and visual accessibility.
Pick Colors
Sample Text
The quick brown fox jumps over the lazy dog. Good design is accessible design.
?What are WCAG Standards?
The Web Content Accessibility Guidelines (WCAG) are the international standard for making web content more accessible to people with disabilities, including those with low vision or color blindness.
A high contrast ratio between text and background ensures that information is easy to read for everyone, including users browsing your site on a mobile device in direct sunlight.
The Rating Scale
AA Standard
The minimum requirement. Requires a ratio of 4.5:1 for normal text and 3:1 for large text (18pt+).
AAA Standard
The gold standard of accessibility. Requires 7:1 for normal text and 4.5:1 for large text.
Normal vs Large
Large text is defined as at least 18pt (24px) or 14pt (18.66px) if the font is bold.
Color Blindness
Using contrast instead of just color helps color-blind users distinguish between elements.
Design Tip
When in doubt, aim for **AA Standard**. While AAA is great for information-heavy sites (like government or healthcare), it can be restrictive for artistic branding. However, never go below AA, as it significantly degrades the experience for users with vision impairments.