Color Contrast Rules to Live by for HR Tech
Subscribe to the Newsletter
Do your HR tech tools and apps conform to web content accessibility guidelines? What about your own website or content? Learn how to check and make sure everyone can use your products successfully.
4.5:1 Contrast Ratio How-To
When put into practice, this high contrast ratio may seem surprising because most of the web does not support it. However, to reach Level AA according to WCAG 2.0, all websites are required to have a minimum contrast between text and the background by 4.5:1. For instance, the button below does not have enough contrast.
The bright green background you see above on this “success” style button is often seen across the internet. The code system used to describe colors is oftentimes in hexadecimal notation. This specific bright, cheerful green is #0FB034.
However, as mentioned above this button does not meet Level AA. It doesn’t even meet the more lenient [[ISO-9241-3]] and [[ANSI-HFES-100-1988]] standards of 3:1 ratio.
If the background is changed just slightly, then it does pass 3:1 with a background of #0ca22d.
To reach the 4.5:1 ratio, the background is changed again to #0B982C. Hurray!
It goes to show even the most subtle change can make a difference.
Tools to Test Color Contrast of Your HR Technology Tools
At Recognize, we use algorithms in our color code to tell us if certain buttons need to switch from white to black to create the correct contrast. This allows the app to be adapted to different user experiences. One of the ways we do that is with Bootstrap. The popular visual web development framework helps standardize buttons and more. Plus, makes it easy to customize at the same time while staying compliant.
Tools like WebAIM Contrast Checker are easy for anyone that has the color code. Lots of Color Picker Chrome Extensions out there too that help people get the code in the first place.