Understanding contrast ratio

With Framer, you have full control over your website’s look and feel. Before launching, we recommend checking that the contrast ratio meets accessibility standards.

What is contrast ratio?

Contrast ratio is the difference in luminance between two colors, typically between foreground (text or graphics) and background. It’s measured on a scale from 1:1 to 21:1, with higher values indicating greater contrast. A sufficient contrast ratio ensures readability and visibility, especially for users with visual impairments, color blindness, or other perception-related conditions.

WCAG guidelines for contrast ratio

The Web Content Accessibility Guidelines (WCAG) provide specific contrast ratio recommendations to support accessible digital experiences. According to WCAG 2.1, Level AA compliance requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold).

Before publishing, we suggest using one of these contrast ratio checkers:

By ensuring your site meets contrast ratio guidelines, you’ll create a more accessible experience for all users.