Color Contrast and Styles

[00:00 - 00:12] Throughout most of the course, our focus has been on enhancing accessibility through HTML. However, it's important to note that CSS also plays a significant role in creating an inclusive user experience.

[00:13 - 00:28] In this lesson, we'll explore how CSS can be utilized to ensure appropriate color contrast and style various states of interactive elements. Ensuring appropriate color contrast is key to providing a comfortable and comprehensible reading experience for users interacting with the content on your page.

[00:29 - 00:37] Color contrast is a measurement of the perceived difference in brightness between two colors. This brightness difference is expressed as a ratio ranging from one to one.

[00:38 - 00:47] Achieving the appropriate color contrast, ratio enhances the legibility of content. Fortunately, there are numerous tools available to assist in verifying the contrast ratio between colors.

[00:48 - 01:04] One such tool is the web-aim contrast checker, where you can input the foreground and background colors to determine if they meet the different levels of WCAG conformance. As you can see here, it shows you the conformance levels of both AA and AAA, along with graphical objects and UI interface components.

[01:05 - 01:32] In this case, what it looks like for the border of a text input, there's also an explanation, giving you details about what the contrast ratio requirements are based on the level of conformance you're trying to meet, and also a little bit of verbiage around what's considered large text versus normal text. There's also a contrast checker API and bookmarklet if you're interested in that too, which is kind of neat.

[01:33 - 01:46] There's also a slider, so here's an example where I'm going to intentionally slide things down so that the contrast is really, really low and not visible. And then you can slide it up and it shows you the ratio in real time, updates, same thing with the background color.

[01:47 - 01:58] You can do that, so it's a really nifty tool. It's one I person might use, but there are periods of them out there, so this one doesn't suit your fancy. You can do a quick Google search and find the contrast checker tool that you like.

[01:59 - 02:17] Applying appropriate color contrast is crucial in multiple aspects of a user interface, starting with the background color and text color of a page and extending to other elements like buttons and labels. So I found this image from the four kitchens accessibility as you go article that conveys a difference in contrast ratios in a good way.

[02:18 - 02:41] As you can see, this first button shows you one that fails both double A and triple A conformance, along with the second one there, giving you a better ratio, but still fails both levels of conformance. This third button here passes double A conformance, but fails triple A. And then the fourth button, same thing passes double A fails triple A.

[02:42 - 02:53] And then the fifth button passes both levels of conformance. And then that last button just shows you kind of what the top contrast is versus the bottom contrast and kind of the levels that pass there.

[02:54 - 03:14] So it's just a cool image that I found that I thought kind of conveyed how contrast ratio can be captured on regular elements that we use in day to day. According to the colorblind awareness of the organization, they're estimated to be approximately 300 million people with colorblindness.

[03:15 - 03:26] This breaks down to roughly one in 12 men and one in 200 women who have some form of color deficiency. The web aim checklist item 1.4.1 use of color states the following.

[03:27 - 03:41] That color should not be used as a sole method of conveying content or distinguishing visual elements. And then the second bullet point goes on to say how color law should not be used to distinguish links and providing more context there of how it should be used.

[03:42 - 04:07] And so if you look at the colorblind awareness site, actually they have an interesting slider here that you can kind of play around with and they split it up between the two different types of colorblindness. So this first type with this trinopia, if you go and slide it, you can kind of see how the grays come out more and what a person who has that type of color blindness might see the world.

[04:08 - 04:25] And then the other one, other type with dutor renopia. Also showing how that like look how the paint completely goes to gray. So just it really gives you some context for kind of how the varying types of color blindness can affect what people see in the hues of color.

[04:26 - 04:39] And one way to remedy not solely relying on color is to provide multiple avenues for the user of your site to access critical information. So if we take a look at table and U.I.'s input with validation error example here.

[04:40 - 05:03] You can see that they make the border of the text input red to indicate an error. However, in addition to using color, there's an error message indicating what went wrong along with an icon that we see typically associated with invalid states. So those three things combined, right, the use of red color, the message describing why the input is invalid and the error icon is an example of not relying on color alone to convey information.

[05:04 - 05:16] Now we'll go on to styling states for interactive elements. By applying targeted CSS to the different states of interactive HTML elements, for example links, buttons, form inputs, we can enhance accessibility and improve the user experience.

[05:17 - 05:26] The states will cover in this lesson include hover, focus, and disabled. Customizing these states with appropriate visual indicators ensures that users can easily identify interactive elements.

[05:27 - 05:36] Navigate through the interface and perceive changes in element states. The first one we'll take a look at is hover. And to apply hover styles to an element, you can utilize the hover pseudo class.

[05:37 - 05:52] By adding hover styles, you can create interactive and engaging effects such as changing the color, size, or background of an element. And so for this example, I've applied hover to the button. And as you can see, it goes from the white background to the blue background, and then the white text on the hover.

[05:53 - 06:07] So, and you also want to make sure when you're implementing these effects that you're still meeting contrast ratio requirements. Next, we'll take a look at focus. Each browser applies its own default focus styles, often represented by a blue border surrounding the focused element.

[06:08 - 06:20] These default styles are especially important for keyboard users, as it makes it visually apparent which element is currently receiving focus as a user is tapping through the page. However, sometimes you want to be able to style this better to suit your design .

[06:21 - 06:32] To achieve this, you can leverage the focus pseudo class and the outline CSS property. The focus pseudo class is typically activated when a user interacts with an element by clicking, tapping, or selecting it using the tab key.

[06:33 - 06:48] The outline property is used to create a visible outline around an element, and targeting this property allows you to alter the appearance of the focus ring. Setting outline zero or none should be avoided as it completely removes the focus indicator and prevents users from knowing which element they're interacting with.

[06:49 - 07:07] If you're going to remove the focus ring, you need to replace it with an alternative focus indicator so that it is still easy to discern which element has focus. So, here's an example where I've applied focus to a link, and I've called it smashing link because it's intended to emulate the smashing magazine focus indicator.

[07:08 - 07:26] As you can see, when I tabbed to it, it adds the little dash border around it, and when you click on the link, I actually show you going to the smashing magazine website, kind of how they've employed this and how I kind of took their CSS and applied it to this example. So, just a fun one here.

[07:27 - 07:39] An element is considered disabled when it cannot be interacted with, which is being unable to be selected, clicked on, typed into, or received focus. The style elements that are disabled, you can target the disabled pseudo class.

[07:40 - 07:59] From there, you can select the desired element using its appropriate selector and define the styles you want to apply, such as adjusting color, opacity, cursor, or any other visual properties. In this case, I've just applied a cursor not allowed, a common thing that you see with disabled elements and kind of made its gray background, again, making sure I adhere to color contrast ratio requirements.

[08:00 - 08:17] So, it just makes it very apparent that you can't click on this button, it doesn't do anything, just kind of common techniques to employ. And so, one technique that can be used to properly style custom components you build is to target the RE attribute that is being applied and styled with the CSS attribute selectors.

[08:18 - 08:39] By leveraging RE attributes such as RE disabled or RE invalid, you can apply custom styles to elements that possess these attributes, enhancing the visual representation and end user experience for individuals who rely on assistive technologies. For example, just style and input that contains an error, you could use the attribute selector RE invalid equals true, and apply appropriate styles to visually indicate that the input contains invalid content.

[08:40 - 08:56] And that's exactly what I've done here, kind of imitating that tailwind UI input validation error image I showed you earlier, I've just added RE invalid to true, and make it so that the color and outline color are this maroonish hue .