Check WCAG Color Contrast & Generate Accessible Palettes
The quick brown fox jumps over the lazy dog
By making accessibility part of your web design flow, you will be improving the usability of your website, and your users will be having a better experience, that may result in expanding your audience, your users will be your ambassadors, and that may lead to increasing your traffic. More than legal stuff, we aim to foster accessibility and inclusivity for everyone, and to help you make your website design aware and compliant.
These guidelines are based on the standards (levels A and AA) of the Web Content Accessibility Guidelines (WCAG) (external link), and here you have a way to check compliance up to the highest level AAA requirements.
Color contrast is the difference in brightness between foreground and background colors. It's measured as a ratio from 1:1 (no contrast) to 21:1 (maximum contrast).
Higher contrast makes text easier to read, especially for users with visual impairments.
Proper color contrast ensures that everyone can read your content, including people with low vision, color blindness, or who are viewing content in bright sunlight.
The WCAG (Web Content Accessibility Guidelines) requires minimum contrast ratios: 4.5:1 for normal text (AA level) and 7:1 for enhanced accessibility (AAA level).
Larger text is easier to read and requires less contrast. WCAG defines "large text" as 18pt (24px) or larger for regular weight, and 14pt (18.5px) or larger for bold text.
Large text only needs a 3:1 contrast ratio for AA compliance, compared to 4.5:1 for normal text.