On a lark, I filled out a March Madness bracket in which I compared teams by the color contrast ratio of their primary branding colors. I initially did it as a contrarian joke, but as I dug into it, it became a fun way to demonstrate accessibility using familiar examples. The clear winner in this is the University of Connecticut. To explain what made U. Conn a "clear winner," I might have to explain the concepts of color contrast ratios and how they are determined. Color contrast is about how one color stands out from another color. A color contrast ratio helps measure that. Contrast ratios can range from 1 to 21 (commonly written 1:1 to 21:1). The higher the number, the higher the contrast between the two colors. No color ratio can be lower than 1 to 1, and that's achieved when a color is paired with itself. The highest ratio is 21 to 1, and that is achieved when white is paired with black. Nothing can have a higher ratio color ratio. I started by looking up the primary branding colors for each of the 68 schools in the bracket. Then I went to the school's website to see how the colors were used. Most often, each of the primary colors were paired with white. I checked the color contrast ratios of the primary color when paired with white. To determine the ratio, I plugged the colors into WebAIM's Color Contrast Checker. What if two competing schools have the exact same ratio? And what if they have the exact same color combo? That happened in the first round when Texas Tech faced off against NC State. Texas Tech Red and Wolfpack Red are identical colors, and both are paired with white. I allowed each one to progress the next round, thinking they'd lose to a ratio that's higher than 5.88 to 1. And they did! They lost to Kentucky, whose Wildcat Blue had a higher color contrast ratio of 10.59 to 1. I had another tie in the fourth round (Elite 8) when I had Gonzaga facing off against University of Akron. Both use the same hex code. Paired with white, that blue has a ratio of 16.54 to 1. They each advanced to the next round. In the next round (national semifinals), Gonzaga/Akron had to face off against Longwood University. But Longwood has the exact same hex code! Because all three had the same color contrast ratio of 16.54 to 1, they all advanced to the final round. The University of Connecticut, with a ratio of 19.02 to 1, beat all three. Obviously, this was not a robust checking of one's color palette. This isn't meant to measure which one was "best" or "most accessible," because I only was evaluating one contrast ratio. But the point wasn't to ding one school or praise another. The point was to raise awareness of the concept of color contrast, and on a more basic level, raise awareness of web accessibility in general. If you made it this far in the post, you'll probably start thinking color pairings in a new way. And if that happens, then this silly bracket exercise had some effect! #WCAG #Accessibility #a11y #MarchMadness #NCAA
WebAIM
8mo
This is awesome! Some of the WebAIM team have worked at colleges or universities with tricky color palettes.
Chris Winter
8mo
Pale green on white is all too common example of poor colour contrast. This palette is used by many organisations to publish information relating to the environment, sustainability, climate change, etc.
Renaissance Woman • Lifelong Learner • Career Coach • Anti-niche, pro-strategy • Curator of Inspiration
9moI absolutely love this (as much as the March Madness brackets that simply look at the mascots and how they would do in a battle).