Ensure Readable Contrast - Framer

Ensure Readable Contrast in Framer

1. Open your project in Framer and navigate to the page where you want to verify color contrast.
2. Select the first text element (heading, paragraph, button label, link, or icon with text). The right-hand properties panel will appear.
3. In the Fill or Text section, check the current text color.
4. Click the color chip to open the color picker and review the contrast indicator included in Framer (if present).
   • Aim for WCAG AA minimums:
     — 4.5:1 for normal text,
     — 3:1 for large text (18px+ regular or 14px bold),
     — 3:1 for UI components like buttons and icons.
5. Adjust contrast if needed:
   • Darken or lighten the text color,
   • Adjust the background color of the Frame,
   • Add a semi-transparent overlay behind text placed on top of an image.
6. Check Headings (H1–H6):
   • Select each heading → adjust color under Text.
   • Ensure the heading’s contrast meets or exceeds minimum ratios.
7. Review Buttons:
   • Select the button → open Design,
   • Ensure contrast between button text and the button background is at least 3:1,
   • Verify Hover and Focus states maintain readable contrast as well.
8. For Icons used as controls:
   • Select the icon → open Fill,
   • Increase contrast by choosing a darker or lighter icon color or adjusting the surrounding background.
9. Check Form Fields:
   • Select the input field → open Design,
   • Ensure label text, input text, and placeholder text have adequate contrast,
   • Confirm focus border color is high contrast for visibility.
10. If using Global Styles:
    • Open the top bar → Fonts & Colors,
    • Adjust your site’s global text, background, and accent colors to maintain accessible contrast across all pages.
11. Switch to Tablet and Mobile breakpoints using the top bar:
    • Verify that overlay images, gradients, and smaller layouts still maintain readable contrast,
    • Adjust breakpoint-specific colors if any text becomes unreadable.
12. Enter Preview mode and scroll the entire page to visually verify readability.
13. Use a browser accessibility tool (WAVE, Chrome DevTools contrast checker) to double-check contrast ratios on the live preview.
14. Publish or update your project once all text and interactive elements meet contrast requirements.