Hi everybody. Josh, with Online ADA here, once again, to bring you another article from the WCAG accessibility guidelines.
We’re covering 1.4.3 in this video, which is Contrast Minimum. It is a level AA requirement and I’m gonna jump in the description. This is a long one, so bear with me.
The visual presentation of text and images of text have a contrast ratio of at least 4.5/1. Except for the following situations. Large text. Large scale text and images of large scale text have a contrast ratio of at least 3/1. Incidental, text or images of text that are part of an inactive user interface component, that are pure decoration, or that are not visible to anyone, or are part of a picture that contains significant other visual content, have no contrast requirement. And lastly, logo types, text that is part of a logo or brand name, has no minimum contrast requirement.
The gist of this article is to ensure that users of your site are able to see the text on your page. If you have white text on a white background, that’s an extreme case, but that demonstrates the point very elegantly. You can’t see that content and this is making sure that you have a stark enough contrast between the color of the font and the color of the background so that users are able to easily distinguish what that content reads.
The 4.5/1 and the 3/1 ratio is based on a formula. It’s not really important to know what that formula is. There’s a whole bunch of information on it in the official documentation but, there are a number of ways to check the contrast of your text on your page. One of them is to use one of the many online tools that exist. The brand Web Aim has a great color contrast checker. You can plug in hex codes for foreground and background, it’ll give you your ratio and even just gives you green check marks if you’re passing or failing. It will not, however, tell you If you have large text or small text, so that’s something you’ll need to understand a little bit.
Also if you are a fan of Google Chrome, I particularly, tend to use Google Chrome when I’m doing my audits. They have a really handy feature in their developer tools. When you are inspecting a text element it will give you the color in the styles menu and you can click on that and it’ll tell you what the current contrast ratio is and whether it’s passing for its particular size. So it does a lot of work for you. It also has a handy curved algorithm line on the color picker and you can easily see which colors fall inside of your color scheme for the different ratios and making sure they’re compliant.
I’m gonna breakdown the system on how they determine what’s considered large scale and what’s not, a little bit. So large scale is, specifically, font sizes that are considered to be 18 point, which in my developing, I typically use pixels, so 18 point font translates to 24 pixels. So 24 pixel font or 14 point font and bold are considered large text. 14 point translates to about six, sorry, 19 pixels. So if you text is 24 pixels or 19 pixels and bold, it’s considered large text and it only needs to meet 3/1 contrast ratio. Otherwise it needs to meet the 4.5/1 ratio. That’s for AA compliance. AAA goes even higher but we’re not talking about AAA in this particular one. There’s a whole separate WCAG article for that one.
So, and once again, I wanted to touch on brand names and logos. They don’t have a contrast requirement. So don’t worry about whether or not that one’s meeting its requirement. There may be another article that does affect its contrast, but this one does not.
So, thank you for joining me in that longer article, and I will see you in the next video.