

Ensure sufficient contrast ratio between foreground (text or icons but this also now applied to form borders and other elements) and their background.įor the first criteria, it means for instance that if you create a graph, you should have some secondary way of helping people understand the different sections.Don’t use color as the only visual means of conveying an information, action, etc.So for inclusivity, accessibility and colors, there’s 2 big things you need to remember: In this big list, the 1.4 section is dedicated to “making it easier for users to see and hear content including separating foreground from background.” Those look scary, a little bit like the HTML specification, I know. For this small introduction, I will stick to the AA criteria. What you need to understand about accessibility is that there’s a list of criterion you can find under the WCAG 2.1 guidelines to help you. I will not enter in all the details since I’m no accessibility expert.

This is why you need to be careful about accessibility when you are using color in your products. Some users might be color blind, some users might be visually impaired, some users might be in different environments. Unfortunately, not everybody gets to experience colors the same way. The color can convey your brand identity, help users understand information, etc. Color choice is all about communication and is usually a decision marketing and visual design sometimes fight over. When building products with diversity in mind (digital ones but this could also apply to other products), color choice is important. ** Cet article existe aussi en Français ** Contrasts and accessibility: a few basics on color I will keep on updating this article with new resources regularly. So I thought I would share the resources, tips and tools I regularly use to build and check the color accessibility of my products in one single place for future reference.
#Color oracle simulator how to
It brought up some interesting discussions on color accessibility, inclusive design an interesting discussion about the use of emojis.Ī few people asked me for advice on how to chose accessible color palettes for their projects. I wrote a quick tweet about teaching the basics of accessibility and colors to design students a few months ago that go quite some attention.
