Debunking Color Contrast Accessibility Myths
There’s a growing demand for designers to make their interfaces accessible to all users. It’s important to accommodate users with disabilities, but there are many myths to color contrast accessibility being perpetuated by misinformed people. They often parrot these myths to discredit a design without understanding which situations a color contrast standard applies. Not only that, but they assume an interface is inaccessible whenever color contrast is used to convey information. Designers often feel the need to obsess over accessibility because of this. They’re misled into believing their interface isn’t accessible when it actually is. This article debunks common color contrast accessibility myths and sets the record straight. Myth 1: The WCAG requirements are always optimal. The Web Content Accessibility Guidelines (WCAG) is used as the standard for determining accessible color contrast. However, these guidelines are not always optimal and applicable. Instead of following them blindly, you should examine how the color contrast standards measure up in practical application. One case where the WCAG standards aren’t applicable is with the brightness contrast of white text. Both buttons below have a blue background, but one has white text, and the other has black. When you survey users on which button is easier to read, the majority will tell you the button with the white text is more readable (source). But the accessibility color contrast ratios tell a different story. The contrast ratio for the black text is 5.41, which passes the requirement. However, the contrast ratio for the white text is 2.94, which fails it. According to the contrast requirements, the button with white text should be less readable, but it’s more readable. A similar study comparing white and black button text confirms this finding. Not only did normal visioned users find the white text easier to read, but color blind users did as well (source). This contrast inaccuracy seems to occur with white text on blue and orange backgrounds. The WCAG contrast ratios don’t always account for the high brightness contrast of white text. White is pure brightness with no hue or saturation, and brightness is the strongest form of contrast. Therefore, it makes sense why the button with white text is easier to read. The reason the contrast ratios failed with the white text is that it has high brightness and is on a background with high brightness. Bright text on a bright background is rendered low contrast computationally. Your design is supposed to satisfy what people see, not computational algorithms. It’s why the designer’s eye should always play a part in the equation. The WCAG are guidelines to help designers choose the right color contrasts. The adage, “The map is not the territory,” applies here. Don’t confuse models of reality with reality itself. Myth 2: Text needs to meet the AAA requirement, or it’s inaccessible. WCAG has different levels of conformance for accessibility. Some believe that all text must conform to the highest level of requirements (AAA), or it’ll be inaccessible to a large portion of their users. This notion is false and is evident when you understand how the AAA requirement was made. The AAA requirement constitutes a contrast ratio of 7:1 to compensate for contrast sensitivity loss by low-vision users with a vision loss of 20/80 or more. Many of these users use assistive technologies that have contrast-enhancing features. They need this technology because they aren’t just viewing content on a single interface, but multiple. The AAA requirement only applies to 20/80 vision loss users who don’t use assistive technologies, which is few and far between (source). A vision loss of 20/80 is rare among the…
Like to keep reading?
This article first appeared on uxmovement.com. If you'd like to keep reading, follow the white rabbit.