![]() ![]() Note that this doesn’t apply to purely decorative elements and inactive states. This applies to icons, charts, buttons, hover, focus and active states, interactive components, form inputs, etc. graphical objects and user interface components that needs to be identified by the user must have a contrast ratio of at least 3:1 with adjacent colors.Please note that WCAG 2.1 filters also take into account non-textual elements : Non-text elements to background minimum contrast ratio The conversion points > pixels isn’t super simple but if you want more details you can check Understanding Success Criterion 1.4.3: Contrast (Minimum)īasically: small text under 24px (or bold text under 19px) need to follow the 4.5 rule, bigger text over 24px (or bold text over 19px) need to follow the 3 ratio rule. Note that decorative graphics and text part of logos don’t need to meet those criteria. 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. Text against background minimum contrast ratioį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. Ensure sufficient contrast ratio between foreground (text or icons but this also now applied to form borders and other elements) and their background.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. 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 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |