3:1 for text bigger than 18 points and at least 14 points if bold and for graphics containing information needed to understand d the content and interactive element (buttons, form borders). 4.5:1 for text smaller than 18 points and smaller than 14 points if bold. There’s more example on the Understanding Success Criterion 1.4.1: Use of Color page.įor the second criteria, it means that the contrast between text (or foreground elements) and color should be: If you have a form, you can’t just use a red border to show there’s an error. 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.
#Violet color oracle 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.
0 kommentar(er)
