In today's digital age, creating inclusive designs that cater to all users is paramount. Accessibility in web design ensures that everyone, regardless of their abilities, can access and interact with digital content seamlessly. One crucial aspect of accessible design is color contrast, which plays a significant role in making content legible for all users, including those with visual impairments. In this article, we'll explore how to use accessible colors and create an accessible color palette in Figma, a powerful design tool favored by many designers.

Understanding Color Contrast

Color contrast refers to the difference in luminance or color between text and its background. A high contrast ratio between text and background ensures readability, particularly for users with low vision or color blindness. The Web Content Accessibility Guidelines (WCAG) recommend a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text and graphical objects and user interface components to meet accessibility standards.

Case Study: AccessU Conference Digital Tree

To illustrate the importance of accessible color choices, let's examine a case study featuring the digital tree design used to promote the AccessU conference. Initially, we selected colors based on aesthetics, with white text overlaid on different colored branches. See Fig 1.


    Image shows a digital tree with several branches of different colors. On the side is a legend that maps the different colors to different course tracks. They are: Development in yellow, Docs and Templates in sky blue, Policy and Advocacy in ocean blue, Testing in slate gray, Design and UX in grass green, Organizational Practices and Strategies, Planning in tangerine orange, Social Networking in Knowbility royal purple, Keynote and Speeches in grape purple. 

    

    Fig 1. Digital Course Tree for Knowbility.  




However, upon testing the contrast ratios using the Stark contrast checker plugin in Figma by Cat Noone, it was discovered that some combinations did not meet accessibility standards.
For example, the white text on a blue background (#3FB5F6) yielded a contrast ratio of 2.29:1, falling short of the recommended ratio of 3:1 for graphical objects and user interface components. To address this issue, we adjusted the hue of the blue to a darker shade (#0B9CEA), resulting in a higher contrast ratio of 3.01:1, which met accessibility requirements. Similar adjustments were made for other branch colors, ensuring optimal readability for all users. You can use the slider tool in the WebAIM Color Contrast Checker to easily do this.

    Image shows a Figma drawing with blue and green circles that represent the background colors and white text representing the foreground colors. 

    

    Fig 2. Using the Stark plug-in in Figma to create an accessible color palette and check contrast.  




We also checked the white icon color on top of the light yellow and purple, and found the contrast there even more lacking at 1.57:1 and 2.5:1. There were a couple of things we could have done here, we could have darkened the purple for a higher contrast, but unfortunately, there is no dark yellow background that provides enough contrast without looking muddy. Read about this dilemma called the 'Dark Yellow Problem' here in an article by LodeStar Design. We decided to keep both lighter colors and to replace the white icon color with the accessible gray, #262626, a color discovered by Tamar Okail. See Fig 3. for the resulting tree with the color changes.

    Image shows the final digital Knowbility tree with all the corrected colors that provide enough contrast.

    

    Fig 3. Final Digital Course Track Tree for Knowbility.  





Creating an Accessible Color Palette in Figma
Now, let's delve into the steps for creating an accessible color palette in Figma:
1. Selecting Base Colors: Start by choosing base colors for your design. Consider the aesthetic appeal while also prioritizing accessibility. Aim for a balance between visual appeal and readability.
2. Testing Contrast Ratios: Use a built-in Figma plugin like the Stark Contrast Checker or WebAIM's Color Contrast Checker to evaluate the contrast ratios between text and background colors. Identify any combinations that fall below the recommended thresholds.
3. Adjusting Color Values: If any color combinations fail to meet accessibility standards, adjust the color values accordingly. Experiment with darker or lighter hues until the contrast ratio meets or exceeds the recommended guidelines.
4. Documenting Color Palette: Once you've finalized your color choices, document them in Figma using color swatches or styles. Include the contrast ratios for each combination to ensure consistency and accessibility across your designs.
5. Iterative Testing: Continuously test your designs with real users, including those with diverse abilities, to validate the accessibility of your color palette. Iterate and refine as needed to improve usability for all users.
Designing with accessibility in mind is not only a best practice but also a moral imperative. By prioritizing color contrast and creating accessible color palettes in tools like Figma, designers can empower all users to access and engage with digital content effortlessly. Remember, accessible design benefits everyone, regardless of their abilities, and fosters a more inclusive online experience for all.
For reading more about AccessU 2024 and the courses offered in each track this year, visit the AccessU 2024 page  here!
    Blog post header, up close image of an accessible color palette in Figma with the Figma logo.