![]() ![]() With this section expanded we get some additional information. ![]() Expanding the tools to get more information on color contrast It will display a tooltip labeled Show more when you hover over it. This basic ratio score is helpful, but to get access to all the color contrast tools click the downwards pointing arrow to the right of the contrast score. Getting the tick of approval on contrast ratio You’ll also notice there are two green ticks next to the score, signifying this contrast ratio is within the accepted parameters for accessibility. This score comes by detecting the color of the background element and comparing it with the color of the text. In the area I’ve highlighted with a red square below you’ll see the contrast ratio score of 5.00 this text element has been given. Select a text element and click the colored square to start Then, in the Styles tab, locate the color property, and to the right of it it click the small color swatch in order to open up the picker tool. Access the Contrast Checker Toolsīegin by opening Chrome/Chromium DevTools and selecting any text element in your HTML. The functionality is now built right into both Chrome and Chromium. Note: You might see some instructions around the web saying you need to enable “Developer Experiments” to use these color contrast checking features but this is no longer the case. This is part of the recently added accessibility tools in Chrome–let’s take a look and see how it all works. If you look closely you can also see there is some additional information in that color picker, such as the display of a contrast ratio score, that helps give feedback on color choices. ![]() You’ll notice in the above screenshots we see the Chrome DevTools color picker. This tutorial is part of Web Accessibility: the Complete Learning Guide, where we’ve collected a range of tutorials, articles, courses, and ebooks, to help you understand web accessibility from the beginning. So how can we be certain our color contrast levels are accessibility friendly? That’s where Chrome DevTools can help out. Sometimes color contrast might look fine to the eye, but in reality may not be up to par. This might be a relatively straight forward concept, but ensuring sufficient contrast in practice can actually be a little tricky. This contrast level is all good: Example of a good text contrast ratioīut if we make the text lighter, we can quickly reach a point where the contrast is too low and it becomes too difficult to read: The same text adjusted now has a bad contrast ratio And in turn, creating readable text means ensuring you have adequate color contrast between your text colors and your background colors.įor example, take a look at the purple text on white background from the homepage of Tuts+. One of the most important aspects of creating accessible websites is ensuring you have readable text. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |