But in some cases, we might want the color to remain constant like the white text color for buttons and we are ready to alter the background. This works for buttons, text, and many common element styles. However, it does fix most of the issues and really handy when you need a quick fix. 📝 Note: As per Google’s web.dev blog, this feature is experimental. Chose suggested AA or AAA color, that’s it we’re done.Inspect the CSS of the required element.The best part about this is that you are getting the closest color to the existing one, that complies with AA or AAA standards. Chrome Color Picker to the RescueĪ while ago when I was tweaking my blog to hit a 100 on Lighthouse for accessibility, I found out that the Chrome color picker suggests a suitable color automatically based on the component’s background color. AAA is much better and for that, we must use very high contrast and dark colors. Now, we want to be at the level AA, there must be enough contrast between the colors. WCAG (Web Content Accessibility Guidelines) sets the standards to make the web accessible for everyone and there are three levels by which quality and compliance can be measured. For example, we’ve seen buttons like delete/cancel associated with the red color, here the color briefly describes the nature of the operation. And, there are a lot of perks with using accessible colors, as they decrease the cognitive load i.e the user’s ability to process information and make the right decisions.
Color of the text, background, buttons, forms almost everything can tamper the readability and visibility. The web must be accessible for everyone, and the color combinations we chose affect the accessibility directly.
0 kommentar(er)
