Project Overview

Accessibility Grid

In September 2025, Figma and Contra hosted a Make-a-thon to encourage designers to explore Figma Make. I had been meaning to try it, so I entered with a project focused on accessibility.

I built an improved accessibility contrast grid with the following features:

• Support for both WCAG and Accessible Perceptual Contrast Algorithm (APCA) contrast calculations
• Sorting by compliance level
• Bulk palette uploads with auto-inclusion of black and white
• Default palettes for Tailwind, Material Design, and Bootstrap

I really enjoyed the hackathon and loved seeing the range of projects other designers submitted. I wish I’d had more time to refine the look and feel, but since it was my first time using Figma Make, I ran into some challenges that are common with vibe coding. The tool often overwrote my previous work, and implementing APCA contrast calculations was more complex than I expected.

Because WCAG is more common, even though APCA offers a more accurate approach based on the science of human perception, the AI struggled to apply it correctly. I eventually got it to work by tracking down the original scientific papers and a detailed Medium article. That part alone took up two of the three evenings I spent on the project.

Note: This project is a work in progress. 

© 2023 Danita Delce. All rights reserved.