Having an accessible website comes with many advantages; probably the most obvious is achieving universal access and understanding of the information you're sharing for all audiences. Color can be a prominent way to communicate your brand identity, and color accessibility is one component that should not be overlooked. Although choosing a color palette to coincide with your brand can be an exciting step in building a website, it is also important to assure that text color contrasts well with your background color choices. Color palettes that work well for people who are visually challenged can work well for everyone. If people with visual impairments like color blindness can't read the words displayed on your site, then it's not considered compliant.

Understanding Contrast Ratio

Displaying contrast between text colors and website backgrounds to be readable for anyone - in it's technical term - is called luminance contrast ratio. Examples to keep in mind for understanding this ratio are: text on top of images, buttons, web icons, infographics, diagrams and maps. Color contrast is graded by a range of numbers from 1 to 21 with 1 being the lowest contrast and 21 the highest. Your website will be given a grade of Fail, AA or AAA for ADA compliance based on this numerical scale. The goal is to have a contrast ratio above 4.5:1 on normal text and 3:1 for large text and graphics for AA compliance. For AAA compliance you'll require a contrast ratio 7:1 on normal text and 4.5:1 for large text. Anything lower is considered a failing grade.

More about ADA

GoWeb1 is an accessiBe partner. accessiBe is transforming web accessibility by streamlining the process to becoming compliant and accessible using state-of-the-art AI technology.