Color Contrast Rules to Live by for HR Tech

October 19, 2021

Employee on computer

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.

Approve button does not reach level aa

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.

3:1 ratio success button

To reach the 4.5:1 ratio, the background is changed again to #0B982C. Hurray!

4.5:1 ratio for color of button

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.

Color picker

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.

Incentivize, Recognize, Reward

Recognize increases staff productivity, provides company engagement insights, and helps retain top employees. Providing HR with an out-of-box solution since 2012.

Watch Video