Using the Sketch plugin Stark, I simulated a few different types of color blindness. I pulled in a couple of tools to take my research a step beyond the squint test. While using them takes a little longer than the second-long squint test, it’s still easy and quick to use them to make accessible design decisions. There are many tools that calculate accessibility and simulate color blindness. Let’s look at color-blind users to see if they can explain it further. 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 the following secondary and tertiary Georgetown colors are used as a background color, please use Georgetown Blue, Georgetown Gray, or black to make them accessible.If you guessed the left button, congrats! You are an accessibility wizard.If the following primary, secondary, and tertiary Georgetown colors are used as a background color, please use white or light foreground text.Please visit our Visual Identity Guidelines to view our color combination examples. This includes the use of Georgetown’s color palette combinations and neutral colors.Foreground text and background need to follow WCAG 2.1 level AA compliance where a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text is needed.Online contrast checker tools can be used to verify different background/foreground combinations and check their accessibility. This difference has implications for readability and accessibility. Home ▸ Digital Accessibility ▸ Websites ▸ Issues by Type ▸įor websites, color contrast typically refers to the difference between the background color and the foreground color (usually font color). Skip contextual nav and go to content Navigate to.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |