Understanding contrast ratio
With Framer, you have complete control over the look and feel of your websites. Before launching your site, we recommend checking whether the contrast ratio complies with accessibility standards.
What is contrast ratio?
Contrast ratio refers to the difference in luminance between two colors, usually the foreground (text or graphics) and the background. It is measured on a scale from 1:1 to 21:1, with higher values indicating better contrast. A sufficient contrast ratio ensures readability and visibility, especially for users with visual impairments, color blindness, or other conditions that affect perception.
WCAG guidelines for contrast ratio
The Web Content Accessibility Guidelines (WCAG) provide specific recommendations for contrast ratios, highlighting their importance in creating accessible digital experiences. According to the latest version (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 your website, we recommend using one of the following contrast ratio checkers: