Accessible Color Contrast

This guide was developed in alignment with WCAG 2.1 Level A/AA standards.

Color contrast refers to the difference in brightness and color between foreground and background colors, such as text and background. A high contrast makes it easier to distinguish between them, improving visibility and readability, especially for people with visual impairments.

The Web Content Accessibility Guidelines (WCAG) level AA suggests specific contrast ratios to help with readability:

• For regular text, the contrast ratio should be at least 4.5:1

• For large text (18pt or more), the contrast ratio of at least 3:1

To make sure your contrast meets accessibility standards, use a tool like the WebAIM Contrast Checker. Plug in your text and background colors, and it will tell you if your contrast is sufficient.

Make Your Documents Accessible

If you're creating documents (like PDFs or presentations), color contrast should also be considered. Even in non-web content, using accessible colors ensures that everyone, regardless of visual ability, can read and engage with your documents.

Tips for Better Contrast

High Contrast Colors

Use dark text on light backgrounds (like black on white) or light text on dark backgrounds (like white on black) to create good contrast.

Test All Elements

Don’t just check your headings, make sure the body text and other key parts of your document or website also have enough contrast.

Avoid Relying on Color Alone

If color is used to show important information, use another marker like bold text or symbols to make sure the message is clear for all users.