Using Color Contrast for Better Readability

If you’re new to the complexities of color accessibility standards — like I was at the start of this project — here’s a distilled cheat sheet that can help you make the most of our new tool in Figma. We know this can be a bit daunting at first, so we put a lot of care into this feature, trying to make it as simple as possible for you. Whether you’re brand new to this concept, or a seasoned a11y pro, you can start leveraging this right away. Here are the basics: → Strong color contrast makes your designs more inclusive by improving readability for users with visual impairments. → A contrast ratio is simply the foreground compared to the background, the higher the number, the higher the contrast, the more inclusive it is. This ratio is automatically calculated in real-time and displayed in the top left corner of the color picker. → We built everything using the WCAG 2.2 standard, which is widely accepted and most commonly used. That standard has categories and levels defined, which are available to you in the settings menu. → Figma will automatically detect the appropriate category of the layer you have selected, but you can override this if you need to from the settings menu. → Level AA is good for most projects, and is the Figma default. → Level AAA is considered above and beyond, and is good for projects that have enhanced needs. → Large text is considered at least 24px or Bold 19px. → Normal text is considered below 24px or Bold 19px. → Graphics are considered icons, controls, and other elements that have meaning. (BTW Level AAA does not exist for this category, so if you see your level changing on you, this is probably why.) → You’ll see AA or AAA in the top right corner, alongside a pass/fail icon. This is your stable place to find the status at any point. → You’ll see a pass/fail boundary line on the color spectrum, use this as a visual aid to choose a color that meets your goals. → You’ll also see a dotted pattern on the color spectrum, this is the fail zone. If your color is in this area, you can click on the fail indicator in the top right corner to auto-correct it to the nearest passing color. → If you need to know the background color that was auto-detected, click the contrast ratio in the top left corner to open a flyout with more color info. We blend together any transparent background elements as well, so this value may be technically undefined in your file, but we’ve done it this way to be as accurate as possible to what you see on the canvas. → In more complex layer structures (such as overlapping elements), or complex color scenarios (such as multiple colors, gradients, or images), the calculations may not be possible. If you find that’s the case for your design, we recommend duplicating and isolating the foreground and background elements you want to evaluate onto a clean part of the canvas. Let us know if you have questions, and happy contrasting!

If your brand colors look great but fail the accessibility test — they’re costing you. A beautiful palette means nothing if your audience can’t read it. Here’s my top 3-check process for creating accessible, brand-right color systems: 1. Contrast Is King Use a contrast checker (like WebAIM) to test all text/background combinations. Aim for a 4.5:1 ratio for WCAG AA compliance. 2. Rollover States Matter Do your buttons or links offer enough contrast on hover? Your default and rollover colors need to meet the 4.5:1 contrast ratio too. 3. Bend the Rules Meeting accessibility standards matters more than enforcing strict brand colors. Adjust the value — not the hue — to meet WCAG compliance. No one will notice, but everyone will benefit. Inclusive design isn’t a limitation — it improves engagement! Does your website pass?

Accessibility Tip of the Day: To make content easy to see for sighted users, the WCAG 2.1 recommends a color contrast ratio of 4.5:1 for most text. There are some exceptions, and large text, for example, only has to be 3:1. In general though, with a good color palette, 4.5:1 is at least what you should shoot for everywhere for all text, regardless of size. Why is this important? No one wants to squint to read white text on a yellow background. Additionally, poor color contrast is especially hard for low-vision users and colorblind users. Some cool tools to help check color contrast: 1. If you use Chrome as your browser, the Chrome DevTools have a color contrast checker built into it. Open the DevTools, use the Elements panel, click on the pointer icon in the top-right of the panel, then hover over some text in your UI. You'll see a white rectangle box with information in it next to your element, including the color contrast (see screenshot). 2. WebAIM has a simple contrast checker where you can input your foreground color and background color and see the resulting contrast ratio: https://lnkd.in/g6hUJ2zP 3. If your foreground or background colors use an alpha level (opacity), most color contrast checkers don't attempt to account for it. Just this week I found one though that does take opacity into account when determining the color contrast ratio. I haven't used it a ton yet, but it's the first of its kind that I've found, and it seems promising! https://lnkd.in/g4iup5uC #accessibility #a11y #accessibilitytipoftheday

#Accessibility Tip: Increase Low Vision Readability. Use high contrast colors to improve readability for users with vision impairments. Readability directly affects comprehension. When text is difficult to read due to small size, poor contrast, or cluttered design, individuals with low vision may struggle to grasp the meaning and context of the content. By increasing readability, we enable them to understand and engage with the information effectively, promoting better comprehension and engagement with the content. Increasing readability also ensures compatibility with assistive technologies that individuals with low vision may use, such as screen magnifiers or text-to-speech software. These tools rely on clear and well-designed text to provide accurate information to users. By prioritizing readability, we ensure that the content can be effectively accessed and processed by assistive technologies, facilitating a seamless user experience for individuals with low vision. You want at least a 3 to 1 contrast between headlines and large text and 4.5 to 1 between regular/small text and the background. How do you check? - color.adobe.com - TPGI Color Contrast Analyzer - EightShapes Contrast Grid - WebAIM color contrast checker Which ones do you use? By focusing on increasing readability, we promote inclusive design principles that prioritize the needs of individuals with low vision. By considering factors such as font size, contrast, and layout, we create content that is accessible and usable by a broader range of users. This fosters a more inclusive and equitable digital environment where everyone, regardless of visual abilities, can engage with content on an equal footing. #a11y #accessibility #inclusiveDesign