IAAP Certified Digital Accessibility Specialist | Inclusive Design | WCAG | I'll help your company get customers you didn't know you were turning away
There are no silly accessibility questions - color contrast version! In accessibility we talk a lot about color contrast, and we assume everyone knows what that means. We usually think that if someone isn’t choosing colors with high contrast then they’re doing that on purpose. But none of us were born knowing what color contrast is, so here's a quick intro! When we talk about color contrast we mean the difference between two different colors. Sometimes we mean text and a background color, and sometimes we’re talking about an element (like a button, form field, or focus indicator) with the background color. Other times we might be talking about two colors that are next to each other in a pie chart. In accessibility we use a specific way of determining color contrast. The scores are written as __:1 (like 4.2:1). If the score is higher it means the contrast is higher, and lower scores mean lower contrast. The highest score is 21:1, which is the score black and white get when they’re compared to each other. The lowest score is 1:1, which is the score a color has with itself. There’s a formula to determine the ratio, but my brain shuts down when math is involved, so I’ll link a resource below in case you want to learn more. And we don’t need to know how to calculate the ratio, because there are tools that can do that for us! You can use the tools by getting the code for the colors (usually a hex or RGB code) and inputting it into the fields. The tool will calculate the ratio and tell you whether it’s high enough. If the contrast is between text and a background color then the size of the text matters too. To meet the accessibility standard most companies aim for, the ratio between the colors should be: - 3:1 for large text (it’s considered large text if it’s 18 pt or larger or bold text that’s 14 pt and larger) and also for non-text elements - 4.5:1 for regular or small sized text Generally higher contrast is better, but having white text with black text can be difficult to read, so the goal isn’t to just make everything white and black. Having a color that’s close to white and a color that’s close to black will help make sure lots of people can read it. People can't do something if they don't know it exists, so color contrast is important! Color Contrast Resources: - WebAIM Contrast Checker - https://lnkd.in/e6D6xNEb - Colour Contrast Analyzer (CCA) - https://lnkd.in/e_kAgShu - Contrast plugin for Figma - https://lnkd.in/eGzATeAA - Coolors Contrast Checker - https://lnkd.in/eX9upvSz - How to calculate colour contrast (article) - https://lnkd.in/e9ArEZ8Z - Accessible color palette generator from Venngage - https://lnkd.in/eHACA3Jm #Accessibility #A11y #ColorContrast
Elizabeth Rogers
4mo
I love that you go beyond text in your explanation of colour contrast! WCAG will eventually catch up with that. if someone can't read light coloured text on a white background, chances are they're also missing other important elements too!
WebAIM
4mo
Thanks for sharing!
Jesse Sookne
4mo
Great explanation for anyone new to color contrast, Kae Anderson, CPACC!
Connie Shaw
4mo
Well said and well put together! Thank you, Kae Anderson, CPACC. 😊
Great explanation! I will keep it in my back pocket for the next time I need to explain to someone why I am pushing back on their colour choices :)
Thanks for the great explanation! Kae Anderson, CPACC
Marketing * Web Design * Project Management
4moCommenting to help bump visibility. These are some great resources. More agencies and companies must use accessible colors in their branding. It's not just an accessible issue but in general good design practices. As a designer and tech lover, one of the other things to consider is that every screen has different levels of brightness they can achieve. So, while two colors may look great on a high-end monitor, they can be tough to see on older and bargain tech. This also happens in different light settings a low-contrast app on mobile is going to be hard to navigate in full sun.