The most common problem of digital products concerning digital accessibility is low color contrast. This post shows why that is a problem and how to fix it.
Disabilities
Disabilities in color deception are fairly common and range from weakness to complete color blindness. Around 12% of the world’s population are restricted in their color vision.
To create content and components that are accessible to all visions, the color contrast from background to foreground – that is text or symbols – has to be high enough. This helps the content to be detected, processed and be readable.
WCAG
The Web Content Accessibility Guide has three levels to rate the accessibility of color usage.
Level A
Information can’t rely on color only. There has to be additional visual information. The best example is an invalid input field. Simply adding a red border isn’t enough to mark it, always add an error message at the field.
Level AA
The next level asks for a color contrast of at least 4,5:1. This excludes inactive or decorative Elements, als well as logos. For headings the contrast is allowed at 3:1 as the font is larger and therefore the borders are easier to see.
Level AAA
The highest level asks for color contrast of at least 7:1 and 4,5:1 for headings.
Analysis
The contrast in use can be found by using one of the thousand color pickers. Some browsers even have a build in color picker tool that shows the contrast and whether this would pass level AA or AAA.
Using high enough contrast starts at the design of a digital product. Yes, there can be decorative elements and a company does not have to change its logo, but it’s worth considering using higher contrast and enable around 10% of the worlds population to finally be able to use your specific page, app or program.