 Welcome back to Designing in the Browser. Today we're continuing our mini series on accessibility and design by talking about color contrast, why and how to maintain accessible color contrast choices within your UI. We'll talk about what double A versus triple A means, how you can use developer tools to help you make color decisions, and also touch on something that's relatively new and quickly growing in the web and app space, preference media queries, and dark mode. Color contrast refers to the difference in values between a background and foreground color. It's important to maintain good color contrast between backgrounds and text in both headers and body copy, buttons, and really wherever you have text contents. Here we have an example of a card that has pretty low color contrast. This background is light blue, and this color here is sort of this light purple in this header. And even the paragraph, I feel is not contrasted enough. But let's check and let's fix this. So I'm going to left click. I'm going to hit Inspect to open up the DevTools panel. And here the header, I can see the styles. And the style here is the color thistle. So if I click on this, I can see that the contrast radio immediately is not compliant. It is not a compliant contrast ratio of 1.5.8. If I open up this accessibility panel here, I can clearly see that it does not comply with neither double A nor triple A color contrast. And if I start to move this around, this color value, I can see that that contrast ratio is changing. These two lines here are guidelines that show me where I have to be in order to have either double A compliance or triple A compliance. This first line demarcates the double A compliance level. And the second line demarcates the triple A compliance level. And since this is a header, I have that one to three contrast ratio for double A and four to five for triple A. So all right, let's find a nice purple header color. You can even change the color values along this hue value. And that's going to also change these lines. So maybe something a little bit more blue rather than red would work here and it would also match the button. So I think that this looks nice. Now let's take a look at this paragraph. It's right here. The color of the paragraph is gray. And if I click in, you can see the contrast ratio of 3.68 is not compliant. So for double A, we have to have a 4.5 contrast ratio. And for triple A, it has to be 7.0. So I think that we better just make this a bit darker. And here I'm already much happier with how this looks. And now we have contrast accessibility for our colors in this card. Now you might have noticed that there are double A and triple A demarcations in these dev tools and maybe wondering what they mean. Those levels come from the WCAG, the Web Contrast Accessibility Guidelines. They denote three different levels of conformance, A, double A and triple A, with A having the lowest bar and triple A having the highest bar. To be considered accessible, all websites should strive to at least conform to the double A level. Some government and informational websites may require triple A compliance. When we're talking about compliance at the color level, color contrast is high on the list. For a double A compliance, small texts should have a contrast of at least four to five to one. And small texts would be like the body copy of a webpage. The contrast ratio of four to five to one was chosen for level double A because it compensates for the loss in contrast sensitivity, commonly reported as the typical visual acuity of people at age 80. The minimum double A contrast ratio is four to five to one for all texts on the page. But for larger texts, which is 120 to 150% larger than a default 16 pixel body text, an exception is made where the ratio can go down to three to one. If you're trying to hit that triple A level of conformance, that's when you'll need a seven to one ratio. This is the highest level of conformance, which is why many public websites, such as government websites, medical or legal websites, do require this level of compliance. You may also have noticed that these two white lines appear in the color picker. These guide us to help reach color contrast levels and pick colors that match our site's themes. Now, if I go and change the background from something pastel like Alice Blue to something more saturated, we'll see something a bit different when I look at the header and the paragraph here. So now if I click into here and I open up the contrast panel, the accessibility panel, you'll see that there are these two lines that are much more far apart. So I could have either a very light color or a dark color and still have that be accessible. If I look at the paragraph, this color gray here and open up the accessibility panel, you'll see that even though I am at a 4.5 accessibility ratio, I will not hit that 7.0 ratio. The best I can do with this background color is 5.97. So I might wanna go back and adjust the background color to be something probably a little bit lighter for it to work with this paragraph. And then I will just go back and make sure that this works with the header as well. So great, that works with the paragraph. Does it work with the header still? No, so now I need to make sure that this is adjusted. I'm gonna go back to that purple color and have this be darker so that it works with our new background color. As I change the background color here, you'll see the white lines change. Cyan and green are notoriously difficult brand colors to work with in terms of color contrast levels, but darker blues and purples lend well to color contrast. You might also run into a situation where you have text above a gradient or multiple colors like in an image and the browser can't determine which background color to use. In this case, you can use the eyedropper tool to select a background color and update the values so you could have that as a basis to play around with to get the color contrast about right. If I did have this header overlapping an area, say up here, I could click on the color, open up this accessibility panel and use the eyedropper to select a representative color. And the minute I do that, the contrast ratio is going to change because it's going to be using this new background color as the baseline for the contrast and you can see that right here. There are also a few newer media queries that help you make decisions about color for your users with specific color preferences. One of those is prefers color scheme, which lets you set values based on the color scheme of the user's operating system preferences. This might be light or dark. What I'm using here is prefers color scheme to adjust these variable theme colors. I'm using CSS custom properties to set this theme styling. Now, if I go into my system preferences on a Mac, open up general and change the appearance to dark, you'll see that the appearance of this theme completely changes and I'm merely overwriting these variables with my dark theme variables, but I'm keeping their name. So you could see here that I'm using app media prefers color scheme dark and updating those variable values. So it's pretty cool having a couple of lines of code. You can completely adjust this theme to suit your user's needs. That's not the only preference query when it comes to color themes on the horizon, however. While these are not yet implemented in browsers, the CSS spec lays out media queries for prefers contrast for high contrast mode, prefers reduced transparency, inverted colors and forced color modes. In addition to color contrast and theme preference considerations, it's also important to consider how humans with clear vision of color adjusted vision see the world. Specifically a common visual challenge for many is color blindness. Studies have shown that globally as many as 8% of biological males have some form of red green color blindness and that's likely a large percentage of your audience. We'll link to a color blindness test in the show notes in case you're curious about your own color perception. But considering that nearly 10% of your audience may be color blind, it's important to think about the color choices you're using for your UIs. Specifically with red and green colors which are the most common forms of color blindness and are also common colors within our UIs. This means that you may need to rethink the use of these colors in core user actions and feedback and make sure you're always accompanying colors with icons and helper text. This is a website called Tooling Report that's intended to help developers make decisions on which tools they use to build their applications based on a series of tests. And here we have this view of this grid that shows which tests passed, which ones had a partial pass and which tests failed to help users get a quick glance overview of these various tooling options. And you can see that in the legend, we have a pass, a partial pass and a fail. So let's test this website using these emulation tools and dev tools. So first you wanna open up the Developer Tools panel, then you want to click on this kebab menu, go to More Tools and find Rendering. Now you can scroll all the way down on rendering and there will be a emulation dropdown. So here I could click Potenopia and I will immediately see that it's much harder to differentiate between these colors, especially with this partial pass and pass state for users. So it's important to make sure that you're using these tools to test. And here with Dutronopia, it's actually a little bit harder for you to see between the pass and the fail state in terms of color. So luckily we have decided to not only rely on color, but to use different styling for each of these dots so that if our users have some sort of color blindness or other visual impairment, they will be able to get a clear view of this table and of the information that we are conveying. I recommend you never use color alone for meaning and always add icons or descriptive text to help with that meaning. It's not just with data visualizations, but also for denoting information types, such as an information bar or helper text within a form. For data visualizations, such as line charts with multiple lines, patterns, labels and icons can help with the understanding of this type of information. Here we see that you don't need to have color. You could have changes in texture to help us to note the different data types and information more clearly. When you improve accessibility, you tend to improve clarity in more ways than one. When you're designing applications and even brands, make sure to keep your user in mind. And your user is likely not someone who is exactly like yourself. It's likely somebody with some sort of color blindness or low vision. So make sure to take the steps and test your UIs. Use media queries where appropriate and test for color contrast and compatibility. Thank you again for joining us. We'll see you next time.