Hi everybody. Josh here with Online ADA, bringing you another video from the WCAG accessibility guidelines. Today, we’re covering article 1.4.11, which is the ‘Non Text Contrast Minimum’. This is a AA standard requirement. Let’s jump in.
The visual presentation of the following have a contrast ratio of at least 3/1 against adjacent colors. User interface components. Visual information required to identify user interface components and states, except for inactive components, or where the appearance of the component is determined by user agent and not modified by the author. And graphical objects. Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.
So this article breaks down into two different components. There are user interface components and there’s graphical objects. So let’s dig into the first one. User interface components are going to be things like buttons in your forms or form inputs, like an email field.
This article is saying that when you present a user with a form, and let’s take a a text input, for example. If you have a black background and the input field is white, then that would be a stark contrast, that would meet the 3/1 contrast against its adjacent color, being the background there. In this case we’re talking about an input without a border. A border is not mandatory on form inputs. A border provides the 3/1 contrast ratio against inputs that maybe white against, like, a white background.
So if the internal color of the input doesn’t meet the 3/1 minimum contrast of the background color, if you put them just one over the other, and you couldn’t distinguish where that element was, providing a border around that input would provide that contrast. Because now the adjacent color to the border, which is black, would be white, which is the background color in that case.
This article breaks down into two different topics. So let’s go into the first one user interface components. User interface components are going to be form inputs like buttons or text fields like for Email or first name and let’s take those as an example for what we’re talking about with that minimum contrast ratio whenever you have colors that convey meaning they need to have a contrast minimum ratio three to one against their adjacent colors.
So if we have a White input field against the Background then you can’t see where that input is the user is unable to determine where they need to click in order to interact with that object. So what we’re saying here is that we need to have a three to one minimum contrast ratio from that White internal input color to the White background you can do that in a couple of ways. One would be to provide a border around it. Borders by the way are not mandatory on buttons and form fields. They are a good idea for people with cognitive disabilities and for people with low vision. They give you a stark delineation of where that object exists on the page and is separated from its colors but it’s not mandatory.
This article is simply saying that the colors presented have to contrast each other so White on White doesn’t work but you provide a black border around that input Now, you have black against White adjacent color and that does meet the contrast. That’s a 21 to one ratio another idea would be if you had a button against let’s say it’s a White button against a black background. The button doesn’t actually need a border in this case because the White button serves as the contrast area the hit area for that element meets the contrast against its black background.
If it did not, then you would probably want to provide a border and that’s really what this is saying. Anytime you have a form you just need to be able to present that information and let You’ll know exactly where those inputs are so they don’t have to scroll around and look for it but I will just point out that this is not count for disabled inputs so there is actually no requirement currently for for instance, a button that is disabled read only.
The second topic in this article refers to graphical objects. Graphical objects are going to be anywhere on your site that you’re using a graphic or an image or a symbol of some sort to indicate meaning. A good example of this would be a green down arrow being used to convey a download button. The down arrow would be considered a part of graphic required to understand the content, so this would be required to meet that minimum contrast, ratio of 3/1.
If you had a green down arrow that represented the button against, let’s say, a dark blue background, that wouldn’t be okay because it wouldn’t meet that contrast. You could probably really thick black border and now that blue is contrasted with the black and you would check that contrast ratio. So another good example of this would be something like a pie chart. If you are presenting a pie chart, or a graph of some sort, then you need to make sure that all of the colors that represent the bits of data in that graph for that chart are meeting the contrast ratio because those are all important pieces of information and they’re considered essential for understanding the information being presented.
I want to also point out that there’s a lot of information that goes into this particular article. I highly encourage you to check out the WCAG article itself. Again, it’s 1.4.11 and they have a lot of examples of situations that are commonly used, such as star ratings on comments and radio buttons and how to make them all meet this contrast criteria. And if you’re not entirely sure if there’s a particular area that this overlaps with and you’re not really clear on it, I highly suggest you check out 1.4.11 under the W3.org website. It has, again, just a lot of good information. It’s well worth at least a peruse. And you’ll get a lot of information there.
So anyway, thanks for joining me on this video. I’ll see you in the next one.