Color Contrast for Accessibility

Why Color Accessibility is a Pillar of Professional Design

Imagine designing a beautiful poster, but a significant portion of your audience can't read the information on it. That's the reality when color accessibility is ignored. Accessibility in design means creating products and experiences that can be used by everyone, regardless of their abilities.

This isn't just a "nice-to-have"; it's a fundamental part of good design for several reasons:

• Ethical: It’s about inclusivity and ensuring equal access to information.
• Business: A more accessible product reaches a wider audience. In many places, it's also a legal requirement, and companies have faced lawsuits for having inaccessible websites.
• Practical: Good contrast benefits everyone, not just those with visual impairments. Think about trying to read a screen in bright sunlight or when your eyes are tired after a long day.

To understand the real-world importance of this, let's start with a short video that explains the legal and ethical motivations behind accessible design.

As you can see, this is a topic with serious professional implications. Let's dig into the principles that will allow you to get it right.

Understanding Contrast Ratios: The WCAG Standard

To ensure readability, we can't just guess what "looks good." We need an objective measure. This is provided by the Web Content Accessibility Guidelines (WCAG), which are the global standard for web accessibility.

The key concept is the contrast ratio, a number that measures the difference in perceived brightness (or "luminance") between two colors. This ratio ranges from 1:1 (no contrast, e.g., white text on a white background) to 21:1 (maximum contrast, black text on a white background).

For our purposes as designers, we primarily focus on the WCAG Level AA standard, which is the accepted benchmark for most websites and applications.

To learn more about the specifics, please read the following article.

Here are the essential numbers you need to know from the WCAG Level AA standard:

What is "Large Text"?
WCAG defines large text as:

• At least 18pt (which is roughly 24 pixels) at a regular font weight.
• Or at least 14pt (roughly 18.7 pixels) if it is bold.

Anything smaller than that is considered "normal text" and must meet the higher 4.5:1 ratio.

How to Check Contrast Ratios in Figma

Memorizing the ratios is the first step, but you need a practical way to check them as you design. Fortunately, Figma has a fantastic built-in tool that does the math for you.

Let's watch a video that walks you through how to use it.

As shown in the video, here is the process:

1. Select a text layer in Figma.
2. In the Fill section of the right-hand properties panel, click the color swatch.
3. In the color picker window, you will see a Contrast section. Figma automatically detects the background color behind the text.
4. The tool displays the contrast ratio and shows two lines on the color map representing the WCAG AA and AAA minimums. Your color combination must be on or above the line to pass.

Common Pitfalls and How to Solve Them

Knowing how to use the tool is key, but it's also important to recognize common design patterns that cause accessibility issues.

1. The "Light Gray Text" Problem

A very common trend in minimalist design is to use light gray text on a white background. This almost always fails accessibility standards.

• DON'T: Use a color like #999999 for body text on a white (#FFFFFF) background. The ratio is only 2.32:1.
• DO: Use a darker gray like #595959. This preserves a clean look while achieving a ratio of 7.27:1, which easily passes both AA and AAA standards.

2. Text on Images and Gradients

Placing text over a complex background like a photograph or a gradient is a major challenge because the contrast ratio changes from one part of the image to another.

Here are three reliable techniques to ensure readability:

1. Add a Color Overlay: Place a semi-transparent dark layer over the image but behind the text. This mutes the background and creates a consistent level of contrast.
2. Use a Text Shadow: A subtle but crisp shadow can help "lift" the text from the background, making its edges clearer.
3. Place Text in a Scrim/Box: Put your text inside a solid or semi-transparent colored box. This creates a fully controlled, high-contrast area for your text.

For more on these practical solutions, this article is a great reference.

Conclusion

Congratulations on completing this crucial lesson! You now have the knowledge and practical skills to ensure your color choices are not only beautiful but also inclusive and effective for all users. This is a skill that immediately distinguishes a thoughtful, professional designer.

Here are your key takeaways:

• Accessibility is Essential: It's an ethical, legal, and business imperative for modern design.
• Remember the Ratios: For WCAG Level AA, the standard is 4.5:1 for normal text and 3:1 for large text.
• Use the Tools: Figma's built-in contrast checker is your best friend for getting objective, real-time feedback.
• Solve Common Problems: Use techniques like color overlays or darker shades to fix contrast issues without sacrificing your design aesthetic.

In our next lesson, we will put this all together. Now that you know how to choose, harmonize, and test your colors, we'll learn how to create and manage a color palette using Figma's Color Styles. This will empower you to build systematic, scalable, and accessible design systems.