Understanding contrast ratio
Learn why contrast ratio matters for accessibility and how to check it before publishing your site.
With Framer, you have full control over your website’s look and feel. Before launching, it’s important to make sure your color contrast meets accessibility standards so your content is easy to read for everyone.
What is contrast ratio
Contrast ratio describes the difference in luminance between two colors. It’s most commonly measured between foreground elements, such as text or icons, and their background.
Contrast ratio is expressed on a scale from 1:1 to 21:1. Higher values indicate stronger contrast. Adequate contrast improves readability and visibility, especially for people with visual impairments, color blindness, or other perception-related conditions.
WCAG guidelines for contrast ratio
The Web Content Accessibility Guidelines (WCAG) define minimum contrast requirements to support accessible digital experiences.
Under WCAG 2.1 Level AA, the recommended minimum contrast ratios are:
4.5:1 for normal text
3:1 for large text, defined as 18pt or 14pt bold
Meeting these thresholds helps ensure your content is readable across a wide range of devices and viewing conditions.
Tools to check contrast ratio
Before publishing your site, use a contrast checker to verify that your color combinations meet accessibility requirements. These tools can help:
Updated