It wouldn’t hold up in the court of accessibility standards.Ĭonclusion: White text button wins, but there isn’t any science behind what I tested and I’m not color blind so there are huge gaps of knowledge to fill in. Squinting is a natural contrast checker, but it doesn’t have science behind it. By squinting, you can tell which elements stand out on the page - in this case, the prominence of CTAs. It’s a frequently used technique and can be used by anyone. I started with the squint test because it was the easiest and quickest way to determine if this issue was worth exploring. I decided to deconstruct the disparity to see if there was a loophole, using a few tools from my experience over the years to figure out how and why this was happening. It seemed to have a lot more contrast, but the contrast ratios varied hugely between black text button (6.44 AA Compliant, or well above the minimum contrast required) and white text button (3.26 AA Large, or well below the minimum contrast required). Lost that modern, but non-digital tie-in.Īs I looked at the two buttons, I was still convinced that white was more accessible. And although white stood out more to me, black was technically the more accessible alternative - but it also felt like Halloween. I couldn’t change the background color - orange was a branded color used in advertisements and billboards across the city, so any other color would feel disconnected.
Table 1: Color Contrast Ratio of Our Orange with Black and White TextĪlthough white looked significantly clearer to me, it wasn’t AA compliant for my 14px button text. Large text for AA and AAA is 18.66px minimum.Īn orange background results in the following contrast ratios: AA compliance, the most common, requires a minimum contrast ratio of 4.5 or 3 for large text, while AAA compliance, the more stringent or rare, requires a minimum contrast ratio of 7 or 4.5 for large text. One such tool, Colorable, calculates the contrast ratio between colors and ensures they meet Web Content Accessibility Guidelines (WCAG), an established range of recommendations for making web content more accessible. Using tools based in scientific equations can help determine if certain color combinations pass accessibility standards. People with color blindness are less likely to see the contrast between certain colors. Join me as I qualitatively deconstruct why the white text button is more legible than the black text button, despite what quantitative results such as contrast ratios would suggest. The difference between the buttons is complex and opens up additional questions of accessibility. Accessibility ensures that we are being empathetic and inclusive of all different abilities including, but not limited to, visual limitations such as color blindness. As a designer, accessibility compliance is a topmost priority. White on orange appears to be more clear, but black on orange is technically more accessible. If you guessed the right, you’re not alone. If you guessed the left button, congrats! You are an accessibility wizard.
0 kommentar(er)
