4/18/2023 0 Comments Accessible color palette![]() ![]() When we started, we quickly realized that we had some work to do to meet the contrast ratios and improve our colors. These consistent values ensure (mostly) consistent contrast ratios, which is what we’re using to develop accessibility into digital products. And because distance is meaningful, designers can work with intuitive dimensions to find colors of equal brightness, chroma or hue. While it’s a concept that certainly deserves a deep-dive, in simple terms, a perceptual uniform color space is one where distance is meaningful. This is a concept called perceptual uniformity. The LAB and HCL color spaces, unlike sRGB, take this into account. Luminance (or Lightness): How bright is it?Īs humans, we often think of distance or visual weight between colors. LCH stands for Luminance, Chroma and Hue.Ĭhroma (or Saturation): How colorful is it? Ater developing CIELAB, the CIE team made the process even more human-friendly by introducing another color space called LCH (sometimes referred to as HSL). It expresses color as Lightness (black/white), “a” (green/red) and “b” (blue/yellow). LAB (or CIELAB) is optimized for the human eye, and the language around it is easier for us to use and understand. In response to this problem, some smart minds over at the International Commission on Illumination (CIE) created a color space based on human perception. With an sRGB color, you can’t ask: how bright is it? Or how saturated is it? Therefore –– and stay with me here –– it is hard to discuss in terms that humans understand. The problem with sRGB is that it was created and optimized for screens and printers, and not for the human eye. While sRGB is the default color space in most applications, we're beginning to realize it might not be the best for accessibility. StandardRGB (sRGB) expresses color through the combination of red, blue and green. ![]() Even non-designers might be familiar with standardRGB, the most dominant color space. To talk more on our process, it’s important to do a quick rundown on color spaces and the attributes of color. In this blog post, we’ll share our process, tips and tricks in the hope that it makes your journey to color accessibility a little easier. We learned a lot about how color behaves, automating our processes, and adopting new tools like the CIELAB color space. What followed was a real journey of trial and error. Our goal was to meet the Web Content Accessibility Guidelines (WCAG) for color contrast without compromising our aesthetic. While there are guidelines on when and where to use color for accessibility, we focused on the colors themselves. When designing with color accessibility in mind, you're enabling people with visual impairments or color vision deficiencies to interact with your digital experience. Recently, we turned our attention toward our use of color. Like all good design systems, ours is a perpetual work in progress. So, naturally, it became a major consideration in regard to Forma 36, our open-source design system. It's something we're always working towards when we're designing at Contentful. As designers, creators, and web developers, we have a responsibility to create an inclusive web for people of all abilities. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |