Making sure webistes are accessible is a big deal these days. Websites should be mindful of their audience to make sure people with disabilities are not excluded from the site content. Color contrasts between foregrounds and backgrounds is an easy miss when checking that a site is accessible, but one that is vital to hard of sight users.
For more information about website contrast ratios, visit WebAIM’s Contrast and Color Accessibility page.
Making it easier
Using the Contrast Ratio Calculator library, calculating contrast ratios can be automatic in any site.
Colors can be made into their object representation by using the Color class. The color objects can be created by either the hexidecimal representation of the color or the RGB representation of the color.
Calculating the Contrast
Once color objects have been created, the Contrast Ratio class can be used. The Contrast Ratio class requires two color objects on insantiation, a primary and a secondary color (typically foreground and background colors). The contrast ratio calculation is made immediately upon object instantiation, so it can be retrieved from the class immediately.
Making the grade
A ratio alone is just a number. Without knowing how to grade a raio, it’s actually useless. That’s where the WCAGContrastRating class comes in to play. The WCAGContrastRating can return a grade by either passing a set of Color objects, or by passing an already created ContrastRatio object. The Web Content Accessibility Guidelines (WCAG) state what contrast ratios are a pass/fail. Specifically WCAG guidelines give grades of AAA, AA, AA Large, and FAIL (there are variations of these grades, but if text has a grade of AAA at normal text size, it can be assumed that it will receive an AAA at large text sizes as well, so those variations are ommitted from the grading scale).
Grades will be returned as one of four constants:
A real world example
I help manage a large website installation where a small set of editors can manage >160 websites from a single admin. These editors can choose a site’s primary and secondary colors for the site, providing a more individualized look and feel for the various sites. Using the Contrast Ratio Calculator library, I am able to grade the primary/secondary color contrast ratios, as well as the font colors appearing in with the theme colors. By grading them automatically on the server, editors do not need to check each site individually. Editors do not need to worry about this feature of their websites. By automating these contrast ratios, editors are able to focus on other site content needs.