A11y Colors Check A11y Colors Check

Check WCAG Color Contrast & Generate Accessible Palettes

Color Picker

Live Preview

Sample Heading Text

The quick brown fox jumps over the lazy dog

Contrast Ratio

0:1
1:1 21:1
WCAG Compliance
AA
AAA
Normal Text
-
-
Large Text
-
-

Text Samples

Normal
The quick brown fox jumps over the lazy dog
16px
Large
The quick brown fox jumps over the lazy dog
24px
Bold
The quick brown fox jumps over the lazy dog
16px

Color Palette

Export CSS

Why does Accessibility matter?

Why does Accessibility matter?

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.

What is Color Contrast?

What is Color Contrast?

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.

Why does Contrast matter?

Why does Contrast matter?

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).

Why are Text Sizes important?

Why are Text Sizes important?

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.